por Contenidos
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 cocina, 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 contenido inicial a 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 cocina en este repositorio de GitHub.
- Agregue la estructura HTML básica en un nuevo archivo HTML llamado index.html:
<!DOCTYPE html>
<html>
<head>
<title>Recipe App</title>
</head>
<body>
<nav>
<h1>Recipe App</h1>
</nav>
<div class="container">
</div>
</body>
</html> - Dentro de la clase de contenedor, separe la página en una columna izquierda y una columna derecha:
<div class="left-column"></div>
<div class="right-column"></div>
- Dentro de la columna izquierda, agregue un formulario para permitir 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>Add Recipe</h3><form>
<label for="recipe-name">Name:</label>
<input type="text" id="recipe-name" required>
<br /><label for="recipe-ingredients">Ingredients:</label>
<textarea id="recipe-ingredients" rows="5" required></textarea>
<br /><label for="recipe-method">Method:</label>
<textarea id="recipe-method" rows="5" required></textarea>
<br /><button type="submit">Add Recipe</button>
</form> - 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:
<link rel="stylesheet" href="styles.css"> - Dentro del archivo CSS, agrega un estilo para toda la página:
body {
font-family: sans-serif;
}nav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
padding: 20px;
left: 0;
color: white;
text-align: center;
}.container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 150px 5%;
}.left-column {
width: 25%;
}.right-column {
width: 65%;
} - Agregue un poco de estilo a la Añadir recetas módulo:
form {
display: flex;
flex-direction: column;
}label {
margin-bottom: 10px;
}input[type="text"], textarea {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}button[type="submit"] {
padding: 10px;
background-color: #3338;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
} - 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:
<body>
<script src="script.js"></script>
</body> - Dentro de script.js, use el método querySelector para recorrer el DOM y obtener el elemento de formulario de la página.
const form = document.querySelector('form'); - Cree una nueva matriz para almacenar las recetas que el usuario ingresa en el formulario:
let recipes = []; - En una nueva función, obtiene los campos de nombre, ingredientes y método ingresados a través del formulario. También puede implementar la validación de formularios del lado del cliente para evitar entradas no válidas o para verificar si ya existe una receta.
function handleSubmit(event) {
event.preventDefault();
const nameInput = document.querySelector('#recipe-name');
const ingrInput = document.querySelector('#recipe-ingredients');
const methodInput = document.querySelector('#recipe-method');
const name = nameInput.value.trim();
const ingredients = ingrInput.value.trim().split(',').map(i => i.trim());
const method = methodInput.value.trim();
} - Si las entradas son válidas, agréguelas a la matriz de recetas:
if (name && ingredients.length > 0 && method) {
const newRecipe = { name, ingredients, method };
recipes.push(newRecipe);
} - Borrar las entradas en el formulario:
nameInput.value = '';
ingrInput.value = '';
methodInput.value = ''; - Después de la función handleSubmit(), agregue un detector de eventos para llamar a la función cuando el usuario envíe el formulario:
form.addEventListener('submit', handleSubmit); - Abra index.html en un navegador y vea el formulario a la izquierda:
Cómo ver recetas añadidas
Puede ver 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 en la columna derecha. Agregue otro div para mostrar un mensaje si no hay recetas:
<div class="right-column">
<div id="recipe-list"></div>
<div id="no-recipes">You have no recipes.</div>
</div> - Agregue algunos estilos CSS para la lista de recetas:
#recipe-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}#no-recipes {
display: flex;
background-color: #FFCCCC;
padding: 20px;
border-radius: 8px;
margin-top: 44px;
} - En la parte superior del archivo JavaScript, obtiene los elementos HTML utilizados para mostrar la lista de recetas y el mensaje de error:
const recipeList = document.querySelector('#recipe-list');
const noRecipes = document.getElementById('no-recipes'); - Dentro de una nueva función, itere a través de cada receta en la matriz de recetas. Para cada receta, cree un nuevo div para mostrar esa receta:
function displayRecipes() {
recipeList.innerHTML = '';
recipes.forEach((recipe, index) => {
const recipeDiv = document.createElement('div');
});
} - Agregue contenido al div de receta única 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 los siguientes pasos:
recipeDiv.innerHTML = `
<h3>${recipe.name}</h3>
<p><strong>Ingredients:</strong></p>
<ul>
${recipe.ingredients.map(ingr => `<li>${ingr}</li>`).join('')}
</ul>
<p><strong>Method:</strong></p>
<p>${recipe.method}</p>
<button class="delete-button" data-index="${index}">Delete</button>`; - Agregue una clase para diseñar el div:
recipeDiv.classList.add('recipe'); - Agregue el nuevo div al elemento HTML RecipeList:
recipeList.appendChild(recipeDiv); - Agregue el estilo para la clase en el archivo CSS:
.recipe {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}.recipe h3 {
margin-top: 0;
margin-bottom: 10px;
}.recipe ul {
margin: 0;
padding: 0;
list-style: none;
}.recipe ul li {
margin-bottom: 5px;
} - Consulta si hay más de una receta. Si es así, oculta el mensaje de error:
noRecipes.style.display = recipes.length > 0 ? 'none' : 'flex';
- Llame a la nueva función dentro de la función handleSubmit(), después de agregar la nueva receta en la matriz de recetas:
displayRecipes(); - 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 Eliminar debajo de las instrucciones de una receta.
- Agregue algunos estilos CSS para el botón Eliminar:
.delete-button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}.delete-button:hover {
background-color: #c82333;
} - En el archivo JavaScript, agregue una nueva función para eliminar una receta:
function handleDelete(event) {}
- Usando el evento de JavaScript, busque el índice de la receta en la que el usuario hizo clic:
if (event.target.classList.contains('delete-button')) {
const index = event.target.dataset.index;
} - Use el índice para eliminar la receta seleccionada de la matriz de recetas:
recipes.splice(index, 1); - Actualice la lista de recetas que se muestra en la página:
displayRecipes(); - Agregue un detector de eventos para llamar a la función handleDelete() cuando el usuario haga clic en el botón Eliminar:
recipeList.addEventListener('click', handleDelete); - Abra index.html en un navegador. Agregue una receta para mostrar el botón Eliminar:
Cómo buscar recetas
Puede buscar recetas usando la barra de búsqueda para verificar si existe una receta en particular.
- En la columna de la derecha, agregue una barra de búsqueda antes de la lista de recetas:
<div id="search-section">
<h3>Recipes List</h3>
<label for="search-box">Search:</label>
<input type="text" id="search-box">
</div> - Agregue estilo CSS para la etiqueta de la barra de búsqueda:
label[for="search-box"] {
display: block;
margin-bottom: 10px;
} - En script.js, obtenga el elemento HTML del cuadro de búsqueda:
const searchBox = document.getElementById('search-box'); - Dentro de una nueva función, cree una nueva matriz que contenga las recetas cuyo nombre coincida con la entrada de búsqueda:
function search(query) {
const filteredRecipes = recipes.filter(recipe => {
return recipe.name.toLowerCase().includes(query.toLowerCase());
});
} - Borra la lista de recetas que se muestran actualmente en la pantalla:
recipeList.innerHTML = ''; - Revise cada receta filtrada que coincida con el resultado de la búsqueda y cree un nuevo elemento div:
filteredRecipes.forEach(recipe => {
const recipeEl = document.createElement('div');
}); - Agregue el contenido HTML para la receta filtrada al div:
recipeEl.innerHTML = `
<h3>${recipe.name}</h3>
<p><strong>Ingredients:</strong></p>
<ul>
${recipe.ingredients.map(ingr => `<li>${ingr}</li>`).join('')}
</ul>
<p><strong>Method:</strong></p>
<p>${recipe.method}</p>
<button class="delete-button" data-index="${recipes.indexOf(recipe)}">
Delete
</button>`; - Agregue la misma clase de receta para un estilo consistente. Agregue el nuevo div a la lista que se muestra en la página:
recipeEl.classList.add('recipe');
recipeList.appendChild(recipeEl); - 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('input', event => search(event.target.value)); - 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 muestra cómo construir una interfaz de usuario para un libro de recetas simple. Tenga en cuenta que no hay un servidor back-end y la aplicación no guarda ningún dato; 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, siga explorando otros proyectos divertidos que puede crear en su computadora.
