[ad_1]
This project will help you sharpen your front-end skills and teach you how to build interfaces using core web standards.
Projects are a great way to improve your HTML, CSS, and JavaScript skills and reinforce important concepts and techniques.
One project you can start is a recipe book that runs in a browser such as Google Chrome or Firefox.
A recipe book has a section on the left side of a web page where users can add new recipes. On the right side of the page, users can view and search existing recipes.
How to ask users to add new recipes
Add initial content to your HTML, CSS, and JavaScript files. If he is new to web development concepts, there are many places online where he can learn web development.
You can also view a complete recipe book example in this GitHub repository.
- Add the basic HTML structure to a new HTML file named index.html.
<!DOCTYPE html>
<html>
<head>
<title>Recipe App</title>
</head>
<body>
<nav>
<h1>Recipe App</h1>
</nav>
<div class="container">
</div>
</body>
</html> - Within the container class, divide the page into left and right columns.
<div class="left-column"></div>
<div class="right-column"></div>
- Within the left column, add a form for users to add new recipes. The user can enter a recipe name, ingredient list, and method.
<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> - Add a link to a new CSS file called styles.css in the head tag of your HTML file. Create the file in the same folder as your HTML file.
<link rel="stylesheet" href="styles.css"> - In your CSS file, add page-wide styles.
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%;
} - Add styling for Add recipe shape:
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;
} - Add a link to a JavaScript file called script.js at the end of the HTML file’s body tag. Create a file in the same folder.
<body>
<script src="script.js"></script>
</body> - Within script.js, use the querySelector method to traverse the DOM and retrieve form elements from the page.
const form = document.querySelector('form'); - Create a new array to store the recipes that the user will enter into the form.
let recipes = []; - A new function to get the name, ingredient, and method fields entered from the form. You can also implement client-side form validation to prevent invalid input or check if the recipe already exists.
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();
} - If the inputs are valid, add them to the recipe array.
if (name && ingredients.length > 0 && method) {
const newRecipe = { name, ingredients, method };
recipes.push(newRecipe);
} - Clear the form inputs.
nameInput.value = '';
ingrInput.value = '';
methodInput.value = ''; - After the handleSubmit() function, add an event listener that will call the function when the user submits the form.
form.addEventListener('submit', handleSubmit); - Open index.html in your browser to view the form on the left.
How to display additional recipes
You can view the recipes stored in the Recipes array on the right side of the page.
- Add a div to your HTML file to display the recipe list within the right column. Add another div to display a message if the recipe is missing.
<div class="right-column">
<div id="recipe-list"></div>
<div id="no-recipes">You have no recipes.</div>
</div> - Add CSS styles for the recipe list.
#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;
} - Gets the HTML element used to display the recipe list and error messages at the top of the JavaScript file.
const recipeList = document.querySelector('#recipe-list');
const noRecipes = document.getElementById('no-recipes'); - Inside the new function, loop through each recipe in the recipes array. For each recipe create a new div to display that recipe.
function displayRecipes() {
recipeList.innerHTML = '';
recipes.forEach((recipe, index) => {
const recipeDiv = document.createElement('div');
});
} - Add some content to individual recipe divs to display the name, ingredients, and method. The div also contains a delete button. We will add this functionality in a later step.
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>`; - Add a class to style the div.
recipeDiv.classList.add('recipe'); - Add a new div to the recipe list HTML element.
recipeList.appendChild(recipeDiv); - Add a class style to your CSS file.
.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;
} - Check if there are multiple recipes. In that case, hide the error message.
noRecipes.style.display = recipes.length > 0 ? 'none' : 'flex';
- After adding the new recipe to the recipes array, call the new function within the handleSubmit() function.
displayRecipes(); - Open index.html in your browser.
- Add recipes to the list and watch them appear on the right.
How to delete a recipe
Click to delete a recipe. erase A button below the recipe description.
- Add CSS styles for the delete button.
.delete-button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}.delete-button:hover {
background-color: #c82333;
} - In your JavaScript file, add a new function that deletes the recipe.
function handleDelete(event) {}
- Use JavaScript events to find the index of the recipe the user clicked on.
if (event.target.classList.contains('delete-button')) {
const index = event.target.dataset.index;
} - Removes the selected recipe from the recipe array by index.
recipes.splice(index, 1); - Refresh the list of recipes displayed on the page.
displayRecipes(); - Add an event listener that calls the handleDelete() function when the user clicks the delete button.
recipeList.addEventListener('click', handleDelete); - Open index.html in your browser. Add a recipe that displays a delete button.
How to find recipes
You can use the search bar to search for recipes and see if a particular recipe exists.
- Add a search bar in front of the list of recipes in the right column.
<div id="search-section">
<h3>Recipes List</h3>
<label for="search-box">Search:</label>
<input type="text" id="search-box">
</div> - Add CSS styles to the search bar label.
label[for="search-box"] {
display: block;
margin-bottom: 10px;
} - In script.js, get the HTML element for the search box.
const searchBox = document.getElementById('search-box'); - Inside the new function, create a new array containing the recipes whose names match the search input.
function search(query) {
const filteredRecipes = recipes.filter(recipe => {
return recipe.name.toLowerCase().includes(query.toLowerCase());
});
} - Clears the list of recipes currently displayed on the screen.
recipeList.innerHTML = ''; - Loop through each filtered recipe that matches the search results and create a new div element.
filteredRecipes.forEach(recipe => {
const recipeEl = document.createElement('div');
}); - Add the HTML content of the filtered recipe to the 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>`; - Add the same recipe class for consistent styling. Add a new div to the list displayed on the page.
recipeEl.classList.add('recipe');
recipeList.appendChild(recipeEl); - Add an event listener that calls the search() function when the user types in the search bar.
searchBox.addEventListener('input', event => search(event.target.value)); - Inside the handleDelete() function, clear the search box if the user has deleted the item and update the list.
searchBox.value = ''; - Open index.html in your web browser to reveal a new search bar and add some recipes.
- Filter the recipe list by adding the recipe name to the search bar.
Create a project using HTML, CSS, and JavaScript
This project shows how to build a front-end interface for a simple recipe book. Note that there are no backend servers and the app does not hold any data. If you refresh the page your changes will be lost. One extension you might be able to work with is a mechanism for saving and loading data using localStorage.
Continue exploring other fun projects you can create on your own computer to improve your web development skills.
[ad_2]
Source link
