I have this HTML file of a website that includes a form to enter recipes and display them below. Every recipe has a title, an ingredients section and an instructions section and every recipe must have its own Edit and Delete buttons.
I’m currently trying to make the editRecipe function and I already have the deleteRecipe function.
However, I haven’t been able to set the deleteRecipe function to the delete button and therefore the recipe doesn’t get deleted when I click on the button. In other words, the delete button is not working.
Here are the HTML and the JS codes I have:
<code><!DOCTYPE html>
<html>
<head>
<title>Recipe Book</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recipe Book</h1>
<div class="container">
<div id="recipe-form">
<h2>Add a Recipe</h2>
<label for="title">Title:</label>
<input type="text" id="title" placeholder="Recipe Title">
<label for="ingredients">Ingredients:</label>
<input type="text" id="ingredients" placeholder="Ingredients (comma-separated)">
<label for="instructions">Instructions:</label>
<textarea id="instructions" placeholder="Preparation Instructions"></textarea>
<button id="add-recipe-btn">Add Recipe</button>
</div>
</div>
<div id="recipe-list">
<h2>Recipes</h2>
<ul id="recipes"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html>
<head>
<title>Recipe Book</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recipe Book</h1>
<div class="container">
<div id="recipe-form">
<h2>Add a Recipe</h2>
<label for="title">Title:</label>
<input type="text" id="title" placeholder="Recipe Title">
<label for="ingredients">Ingredients:</label>
<input type="text" id="ingredients" placeholder="Ingredients (comma-separated)">
<label for="instructions">Instructions:</label>
<textarea id="instructions" placeholder="Preparation Instructions"></textarea>
<button id="add-recipe-btn">Add Recipe</button>
</div>
</div>
<div id="recipe-list">
<h2>Recipes</h2>
<ul id="recipes"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
</code>
<!DOCTYPE html>
<html>
<head>
<title>Recipe Book</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recipe Book</h1>
<div class="container">
<div id="recipe-form">
<h2>Add a Recipe</h2>
<label for="title">Title:</label>
<input type="text" id="title" placeholder="Recipe Title">
<label for="ingredients">Ingredients:</label>
<input type="text" id="ingredients" placeholder="Ingredients (comma-separated)">
<label for="instructions">Instructions:</label>
<textarea id="instructions" placeholder="Preparation Instructions"></textarea>
<button id="add-recipe-btn">Add Recipe</button>
</div>
</div>
<div id="recipe-list">
<h2>Recipes</h2>
<ul id="recipes"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
The JS code:
<code>const recipes = [];
var indexOfRecipeToBeEdited = -1
// Declared a flag to set the edit mode
var isEditMode = false
document.getElementById('add-recipe-btn').addEventListener('click', function() {
const title = document.getElementById('title').value;
const ingredients = document.getElementById("ingredients").value;
const instructions = document.getElementById('instructions').value;
console.log(title, ingredients, instructions)
if (!isEditMode) {
addRecipe({ title, ingredients, instructions });
}
else {
editRecipeDetails({ title, ingredients, instructions})
isEditMode = false
}
displayRecipes();
clearInputFields();
});
function editRecipeDetails(recipe) {
const {title, ingredients, instructions} = recipe
recipes[indexOfRecipeToBeEdited].title = title;
recipes[indexOfRecipeToBeEdited].ingredients = ingredients;
recipes[indexOfRecipeToBeEdited].instructions = instructions;
}
function clearInputFields() {
// Write your code here for task 1
document.getElementById("title").value = "";
document.getElementById("ingredients").value = "";
document.getElementById("instructions").value = "";
}
// Add the new recipe to the recipes array
function addRecipe(recipe) {
const {title, ingredients, instructions} = recipe;
if (title && ingredients && instructions) {
recipes.push(recipe);
displayRecipes();
}
}
// Display Recipes
function displayRecipes() {
// Write your code here for task 3
const recipesList = document.getElementById('recipes');
recipesList.innerHTML = '';
for (const recipe of recipes) {
const recipeItem = document.createElement('li');
let deleteButton = document.createElement('button'); // here's the delete button being created
let editButton = document.createElement('button');
recipeItem.innerHTML =
`<p><b>${recipe.title}</b></p>
<p><b>Ingredients: </b> ${recipe.ingredients}</p>
<p><b>Instructions: </b> ${recipe.instructions}</p>
`
deleteButton.innerText = 'Delete';
editButton.innerText = 'Edit';
for (let i = 0; i < recipes.length ; i++) {
deleteButton.addEventListener("click", function() {
deleteRecipe(i); // Here I tried to pass the function to the button, no success
})
}
recipesList.appendChild(recipeItem);
recipesList.appendChild(editButton); // I still don't have the edit function
recipesList.appendChild(deleteButton);
}
}
// Edit the recipe object when the Edit button is clicked
function editRecipe(index) {
isEditMode = true
}
// Delete the recipe object when the Delete button is clicked
function deleteRecipe(index){
if (index >= 0 && index < recipes.length) {
recipes.splice(index, 1); // Remove 1 element at the specified index
displayRecipes();
console.log(recipes)
clearInputFields();
isEditMode = false;
}
}
</code>
<code>const recipes = [];
var indexOfRecipeToBeEdited = -1
// Declared a flag to set the edit mode
var isEditMode = false
document.getElementById('add-recipe-btn').addEventListener('click', function() {
const title = document.getElementById('title').value;
const ingredients = document.getElementById("ingredients").value;
const instructions = document.getElementById('instructions').value;
console.log(title, ingredients, instructions)
if (!isEditMode) {
addRecipe({ title, ingredients, instructions });
}
else {
editRecipeDetails({ title, ingredients, instructions})
isEditMode = false
}
displayRecipes();
clearInputFields();
});
function editRecipeDetails(recipe) {
const {title, ingredients, instructions} = recipe
recipes[indexOfRecipeToBeEdited].title = title;
recipes[indexOfRecipeToBeEdited].ingredients = ingredients;
recipes[indexOfRecipeToBeEdited].instructions = instructions;
}
function clearInputFields() {
// Write your code here for task 1
document.getElementById("title").value = "";
document.getElementById("ingredients").value = "";
document.getElementById("instructions").value = "";
}
// Add the new recipe to the recipes array
function addRecipe(recipe) {
const {title, ingredients, instructions} = recipe;
if (title && ingredients && instructions) {
recipes.push(recipe);
displayRecipes();
}
}
// Display Recipes
function displayRecipes() {
// Write your code here for task 3
const recipesList = document.getElementById('recipes');
recipesList.innerHTML = '';
for (const recipe of recipes) {
const recipeItem = document.createElement('li');
let deleteButton = document.createElement('button'); // here's the delete button being created
let editButton = document.createElement('button');
recipeItem.innerHTML =
`<p><b>${recipe.title}</b></p>
<p><b>Ingredients: </b> ${recipe.ingredients}</p>
<p><b>Instructions: </b> ${recipe.instructions}</p>
`
deleteButton.innerText = 'Delete';
editButton.innerText = 'Edit';
for (let i = 0; i < recipes.length ; i++) {
deleteButton.addEventListener("click", function() {
deleteRecipe(i); // Here I tried to pass the function to the button, no success
})
}
recipesList.appendChild(recipeItem);
recipesList.appendChild(editButton); // I still don't have the edit function
recipesList.appendChild(deleteButton);
}
}
// Edit the recipe object when the Edit button is clicked
function editRecipe(index) {
isEditMode = true
}
// Delete the recipe object when the Delete button is clicked
function deleteRecipe(index){
if (index >= 0 && index < recipes.length) {
recipes.splice(index, 1); // Remove 1 element at the specified index
displayRecipes();
console.log(recipes)
clearInputFields();
isEditMode = false;
}
}
</code>
const recipes = [];
var indexOfRecipeToBeEdited = -1
// Declared a flag to set the edit mode
var isEditMode = false
document.getElementById('add-recipe-btn').addEventListener('click', function() {
const title = document.getElementById('title').value;
const ingredients = document.getElementById("ingredients").value;
const instructions = document.getElementById('instructions').value;
console.log(title, ingredients, instructions)
if (!isEditMode) {
addRecipe({ title, ingredients, instructions });
}
else {
editRecipeDetails({ title, ingredients, instructions})
isEditMode = false
}
displayRecipes();
clearInputFields();
});
function editRecipeDetails(recipe) {
const {title, ingredients, instructions} = recipe
recipes[indexOfRecipeToBeEdited].title = title;
recipes[indexOfRecipeToBeEdited].ingredients = ingredients;
recipes[indexOfRecipeToBeEdited].instructions = instructions;
}
function clearInputFields() {
// Write your code here for task 1
document.getElementById("title").value = "";
document.getElementById("ingredients").value = "";
document.getElementById("instructions").value = "";
}
// Add the new recipe to the recipes array
function addRecipe(recipe) {
const {title, ingredients, instructions} = recipe;
if (title && ingredients && instructions) {
recipes.push(recipe);
displayRecipes();
}
}
// Display Recipes
function displayRecipes() {
// Write your code here for task 3
const recipesList = document.getElementById('recipes');
recipesList.innerHTML = '';
for (const recipe of recipes) {
const recipeItem = document.createElement('li');
let deleteButton = document.createElement('button'); // here's the delete button being created
let editButton = document.createElement('button');
recipeItem.innerHTML =
`<p><b>${recipe.title}</b></p>
<p><b>Ingredients: </b> ${recipe.ingredients}</p>
<p><b>Instructions: </b> ${recipe.instructions}</p>
`
deleteButton.innerText = 'Delete';
editButton.innerText = 'Edit';
for (let i = 0; i < recipes.length ; i++) {
deleteButton.addEventListener("click", function() {
deleteRecipe(i); // Here I tried to pass the function to the button, no success
})
}
recipesList.appendChild(recipeItem);
recipesList.appendChild(editButton); // I still don't have the edit function
recipesList.appendChild(deleteButton);
}
}
// Edit the recipe object when the Edit button is clicked
function editRecipe(index) {
isEditMode = true
}
// Delete the recipe object when the Delete button is clicked
function deleteRecipe(index){
if (index >= 0 && index < recipes.length) {
recipes.splice(index, 1); // Remove 1 element at the specified index
displayRecipes();
console.log(recipes)
clearInputFields();
isEditMode = false;
}
}
How can I make the delete function work when the button is clicked? How can the Edit function be?
TIA