Este proyecto lo ayudará a perfeccionar sus habilidades de front-end y le enseñará cómo crear una interfaz utilizando estándares web básicos.
Los proyectos son una excelente manera de mejorar sus habilidades de HTML, CSS y JavaScript, y reforzar conceptos y técnicas importantes.
Un proyecto con el que puede comenzar es un libro de recetas, que puede ejecutar en un navegador como Google Chrome o Firefox.
En el recetario, la parte izquierda de la página web incluye una sección donde el usuario puede agregar nuevas recetas. A la derecha de la página, el usuario puede ver y buscar recetas existentes.
Cómo pedir al usuario que agregue una nueva receta
Agregue el contenido inicial a los archivos HTML, CSS y JavaScript. Si no está familiarizado con los conceptos de desarrollo web, hay muchos lugares donde puede aprender desarrollo web en línea.
También puede ver el ejemplo completo del libro de recetas en este repositorio de GitHub.
- Agregue la estructura HTML básica en un nuevo archivo HTML llamado index.html:
html>
<html>
<cabeza>
<título>Aplicación de recetastítulo>
cabeza>
<cuerpo>
<navegación>
<h1>Aplicación de recetash1>
navegación>
<divisiónclase="envase">
Contenido aquí
división>
cuerpo>
html> - Dentro de la clase de contenedor, separe la página en una columna izquierda y una columna derecha:
<divisiónclase="columna izquierda">división>
<divisiónclase="columna derecha">división> - Dentro de la columna izquierda, agregue un formulario para que el usuario agregue una nueva receta. El usuario puede ingresar el nombre de la receta, la lista de ingredientes y el método:
<h3>Agregar Recetah3><forma>
<etiquetapara="nombre de la receta">Nombre:etiqueta>
<aportetipo="texto"identificación="nombre de la receta"requerido>
<hermano /><etiquetapara="ingredientes de la receta">Ingredientes:etiqueta>
<área de textoidentificación="ingredientes de la receta"filas="5"requerido>área de texto>
<hermano /><etiquetapara="receta-método">Método:etiqueta>
<área de textoidentificación="receta-método"filas="5"requerido>área de texto>
<hermano /><botóntipo="entregar">Agregar Recetabotón>
forma> - En la etiqueta principal del archivo HTML, agregue un enlace a un nuevo archivo CSS llamado estilos.css. Cree el archivo en la misma carpeta que su archivo HTML:
<enlacereal="hoja de estilo"href="estilos.css"> - Dentro del archivo CSS, agregue algo de estilo para la página general:
cuerpo {
Familia tipográfica: sans-serif;
}navegación {
color de fondo: #333;
posición: fijado;
arriba: 0;
ancho: 100%;
relleno: 20píxeles;
izquierda: 0;
color: blanco;
texto alineado: centro;
}.envase {
mostrar: doblar;
dirección de flexión: fila;
justificar-contenido: espacio entre;
margen: 150píxeles 5%;
}.columna izquierda {
ancho: 25%;
}.columna derecha {
ancho: 65%;
} - Agregue un poco de estilo para el Agregar Recetas forma:
forma {
mostrar: doblar;
dirección de flexión: columna;
}etiqueta {
margen inferior: 10píxeles;
}aporte[tipo="texto"], área de texto {
relleno: 10píxeles;
margen inferior: 10píxeles;
borde-radio: 5píxeles;
borde: 1píxelessólido#ccc;
ancho: 100%;
tamaño de caja: cuadro de borde;
}botón[tipo="entregar"] {
relleno: 10píxeles;
color de fondo: #3338;
color: #fff;
borde: ninguno;
borde-radio: 5píxeles;
cursor: puntero;
} - En la parte inferior de la etiqueta del cuerpo de su archivo HTML, agregue un enlace a un archivo JavaScript llamado script.js. Cree el archivo en la misma carpeta:
<cuerpo>
Contenido
<guionorigen="script.js">guion>
cuerpo> - Dentro de script.js, use el método querySelector para atravesar el DOM y obtenga el elemento de formulario de la página.
constante formulario = documento.querySelector('forma'); - Cree una nueva matriz para almacenar recetas que el usuario ingresa en el formulario:
dejar recetas = []; - En una nueva función, obtenga los campos de nombre, ingredientes y método ingresados a través del formulario. También puede implementar validación de formulario del lado del cliente para evitar entradas no válidas o para comprobar si ya existe una receta.
funciónmanejarEnviar(evento) {
// Evitar el comportamiento predeterminado de envío de formularios
event.preventDefault();
// Obtenga el nombre de la receta, los ingredientes y los valores de entrada del método
constante nombreEntrada = documento.querySelector('#nombre-receta');
constante ingrEntrada = documento.querySelector('#receta-ingredientes');
constante métodoEntrada = documento.querySelector('#receta-método');
constante nombre = nombreEntrada.valor.trim();
constante ingredientes = ingrInput.value.trim().split(',').mapa(i => i.trim());
constante método = métodoEntrada.valor.trim();
} - Si las entradas son válidas, agréguelas a la matriz de recetas:
si (nombre && ingredientes.longitud > 0 && método) {
constante newRecipe = { nombre, ingredientes, método };
recetas.push (nuevaReceta);
} - Borre las entradas en el formulario:
nombreEntrada.valor = '';
ingrEntrada.valor = '';
métodoEntrada.valor = ''; - Después de la función handleSubmit(), agregue un oyente de eventos para llamar a la función cuando el usuario envía el formulario:
formulario.addEventListener('entregar', manejarEnviar); - Abra index.html en un navegador y vea el formulario a la izquierda:
Cómo mostrar recetas añadidas
Puede mostrar las recetas almacenadas en la matriz de recetas en el lado derecho de la página.
- En el archivo HTML, agregue un div para mostrar la lista de recetas dentro de la columna derecha. Agregue otro div para mostrar un mensaje si no hay recetas:
<divisiónclase="columna derecha">
<divisiónidentificación="lista de recetas">división>
<divisiónidentificación="sin recetas">No tienes recetas.división>
división> - Agrega algo de estilo CSS para la lista de recetas:
#lista-de-recetas {
mostrar: red;
cuadrícula-plantilla-columnas: repetir(ajuste automático, mínimo máximo(300píxeles, 1es));
brecha de rejilla: 20píxeles;
}#no-recetas {
mostrar: doblar;
color de fondo: #FFCCCC;
relleno: 20píxeles;
borde-radio: 8píxeles;
margen superior: 44píxeles;
} - En la parte superior del archivo JavaScript, obtenga los elementos HTML utilizados para mostrar la lista de recetas y el mensaje de error:
constante lista de recetas = documento.querySelector('#lista-de-recetas');
constante sinRecetas = documento.getElementById('sin recetas'); - Dentro de una nueva función, recorra cada receta en la matriz de recetas. Para cada receta, cree un nuevo div para mostrar esa receta:
funciónmostrarRecetas() {
lista de recetas.innerHTML = '';
recetas.paraCada((receta, índice) => {
constante recetaDiv = documento.createElement('div');
});
} - Agregue algo de contenido al div de receta individual para mostrar el nombre, los ingredientes y el método. El div también incluirá un botón de eliminación. Agregará esta funcionalidad en pasos posteriores:
recetaDiv.innerHTML = `${receta.nombre}</h3>
<fuerte>Ingredientes:fuerte></p>
- ${ingr} `).unirse('')}
${receta.ingredientes.mapa(ingr =>`
</ul><fuerte>Método:fuerte></p>
${receta.método}</p>
- Agregue una clase para diseñar el div:
recetaDiv.classList.add('receta'); - Agregue el nuevo div al elemento HTML RecipeList:
recetaList.appendChild (recetaDiv); - Agregue el estilo de la clase en el archivo CSS:
.receta {
borde: 1píxelessólido#ccc;
relleno: 10píxeles;
borde-radio: 5píxeles;
sombra de la caja: 0 2píxeles 4píxelesrgb(0,0,0,.2);
}.recetah3 {
margen superior: 0;
margen inferior: 10píxeles;
}.recetaul {
margen: 0;
relleno: 0;
estilo de lista: ninguno;
}.recetaulli {
margen inferior: 5píxeles;
} - Consulta si hay más de una receta. Si es así, oculta el mensaje de error:
noRecipes.style.display = recetas.longitud > 0? 'ninguno': 'flexible';
- Llame a la nueva función dentro de la función handleSubmit(), después de agregar la nueva receta a la matriz de recetas:
mostrarRecetas(); - Abra index.html en un navegador:
- Agregue recetas a la lista y observe cómo aparecen en el lado derecho:
Cómo eliminar recetas
Puede eliminar recetas haciendo clic en el Borrar botón debajo de las instrucciones de una receta.
- Agregue un poco de estilo CSS para el botón Eliminar:
.borrar-botón {
color de fondo: #dc3545;
color: #fff;
borde: ninguno;
borde-radio: 5píxeles;
relleno: 5píxeles 10píxeles;
cursor: puntero;
}.borrar-botón:flotar {
color de fondo: #c82333;
} - En el archivo JavaScript, agregue una nueva función para eliminar una receta:
funciónmanejarEliminar(evento) {} - Usando el evento de JavaScript, busque el índice de la receta en la que el usuario hizo clic:
si (event.target.classList.contains('borrar-botón')) {
constante índice = evento.objetivo.conjunto de datos.índice;
} - Use el índice para eliminar la receta seleccionada de la matriz de recetas:
recetas.splice (índice, 1); - Actualice la lista de recetas que se muestra en la página:
mostrarRecetas(); - Agregue un detector de eventos para llamar a la función handleDelete() cuando el usuario haga clic en el botón Eliminar:
lista de recetas.addEventListener('hacer clic', manejarEliminar); - Abra index.html en un navegador. Agregue una receta para ver el botón Eliminar:
Cómo buscar recetas
Puede buscar recetas usando la barra de búsqueda para verificar si existe una determinada receta.
- Dentro de la columna de la derecha, agrega una barra de búsqueda antes de la lista de recetas:
<divisiónidentificación="sección de búsqueda">
<h3>Lista de recetash3>
<etiquetapara="caja de búsqeda">Buscar:etiqueta>
<aportetipo="texto"identificación="caja de búsqeda">
división> - Agregue estilo CSS para la etiqueta de la barra de búsqueda:
etiqueta[para="caja de búsqeda"] {
mostrar: bloquear;
margen inferior: 10píxeles;
} - En script.js, obtenga el elemento HTML del cuadro de búsqueda:
constante cuadro de búsqueda = documento.getElementById('caja de búsqeda'); - Dentro de una nueva función, cree una nueva matriz que contenga recetas cuyo nombre coincida con la entrada de búsqueda:
funciónbuscar(consulta) {
constante recetasfiltradas = recetas.filtro(receta => {
devolver receta.nombre.toLowerCase().includes (consulta.toLowerCase());
});
} - Borre la lista de recetas que se muestran actualmente en la pantalla:
lista de recetas.innerHTML = ''; - Recorra cada receta filtrada que coincida con el resultado de la búsqueda y cree un nuevo elemento div:
recetasfiltradas.paracada(receta => {
constante recetaEl = documento.createElement('div');
}); - Agregue el contenido HTML para la receta filtrada al div:
recetaEl.innerHTML = `${receta.nombre}</h3>
<fuerte>Ingredientes:fuerte></p>
- ${ingr} `).unirse('')}
${receta.ingredientes.mapa(ingr =>`
</ul><fuerte>Método:fuerte></p>
${receta.método}</p>
- Agregue la misma clase de receta para un estilo uniforme. Agregue el nuevo div a la lista que se muestra en la página:
recetaEl.classList.add('receta');
listaListaDeRecetas.appendChild (RecetaEl); - Agregue un detector de eventos para llamar a la función de búsqueda () cuando el usuario escriba en la barra de búsqueda:
searchBox.addEventListener('aporte', evento => buscar (evento.objetivo.valor)); - Dentro de la función handleDelete(), borre el cuadro de búsqueda si el usuario elimina un elemento, para actualizar la lista:
searchBox.value = ''; - Abra index.html en un navegador web para ver la nueva barra de búsqueda y agregue algunas recetas:
- Agregue un nombre de receta en la barra de búsqueda para filtrar la lista de recetas:
Realización de proyectos con HTML, CSS y JavaScript
Este proyecto demuestra cómo construir una interfaz frontal para un libro de recetas simple. Tenga en cuenta que no hay un servidor back-end y la aplicación no conserva los datos; si actualiza la página, perderá los cambios. Una posible extensión en la que podría trabajar es un mecanismo para guardar y cargar datos usando localStorage.
Para mejorar sus habilidades de desarrollo web, continúe explorando otros proyectos divertidos que puede crear en su propia computadora.