JAVASCRIPT I need help adding the following to my code Enha.pdf

JAVASCRIPT:
I need help adding the following to my code
Enhance the personal website you have created in the preceding chapters of this book to
include state information that will be retained from one session to the next. You can use
either web storage or cookies depending on the tools available to you. Remember that if
you use cookies you need to place your website on its own server. If your website contains
web forms that span several pages, show your mastery of query strings by adding code to
store data within query strings as users navigate from one form to the next.
Please add to existing code below
--------------------------------------------------------------------------------------
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<title>Abuelita's Mexican Recipes</title>
</head>
<body>
<label id="lblGreetings"></label>
</body>
<script>
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 12)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
document.getElementById('lblGreetings').innerHTML =
'<b>' + greet + '</b> and welcome to my page!';
</script>
</html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h3 id='image label'>A collection of abuelita's favorite recipes</h3>
<form id="myForm">
<label for="name">Name:</label>

<input type="text" id="name" name="name" required>
<br>
<label for="meat">Select your favorite meats:</label>
<br>
<input type="checkbox" id="chicken" name="meat" value="chicken">
<label for="chicken">Chicken</label><br>
<input type="checkbox" id="beef" name="meat" value="beef">
<label for="beef">Beef</label><br>
<input type="checkbox" id="pork" name="meat" value="pork">
<label for="pork">Pork</label><br>
<input type="checkbox" id="fish" name="meat" value="fish">
<label for="fish">Fish</label><br>
<input type="checkbox" id="vegetarian" name="meat" value="vegetarian">
<label for="vegetarian">Vegetarian</label><br>
<button type="submit">Submit</button>
</form>
<script>
const myForm = document.getElementById("myForm");
let selectedMeats = [];
myForm.addEventListener("submit", function(event) {
event.preventDefault();
const nameInput = document.getElementById("name");
if (nameInput.value === "") {
nameInput.setCustomValidity("Please enter your name.");
} else if (nameInput.value.length < 2) {
nameInput.setCustomValidity("Please enter a valid name.");
} else {
nameInput.setCustomValidity("");
// Get the selected meats
const meatInputs = document.getElementsByName("meat");
selectedMeats = [];
for (let i = 0; i < meatInputs.length; i++) {
if (meatInputs[i].checked) {
selectedMeats.push(meatInputs[i].value);
}
}
myForm.submit();
}
});
// Remove a meat from the selectedMeats array if its checkbox is unchecked
const meatInputs = document.getElementsByName("meat");
for (let i = 0; i < meatInputs.length; i++) {

meatInputs[i].addEventListener("change", function(event) {
if (!this.checked) {
const index = selectedMeats.indexOf(this.value);
if (index !== -1) {
selectedMeats.splice(index, 1);
}
}
});
});
// Convert the selectedMeats array to a string
const selectedMeatsString = JSON.stringify(selectedMeats);
</script>
</body>
</html>
<script>
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event) {
event.preventDefault();
const nameInput = document.getElementById("name");
if (nameInput.value === "") {
nameInput.setCustomValidity("Please enter your name.");
} else if (nameInput.value.length < 2) {
nameInput.setCustomValidity("Please enter a valid name.");
} else {
nameInput.setCustomValidity("");
myForm.submit();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<title>Kilograms to Ounces Weight Converter</title>
<body>
<h2>Weight Converter</h2>
<p>Type a value in the Ounces field to convert the value to Cups:</p>
<p>
<label>Ounces</label>
<input id="Ounces" type="number" placeholder="Ounces" oninput="weightConverter(this.value)"
onchange="weightConverter(this.value)">
</p>

<p>Cups: <span id="outputCups"></span></p>
<script>
function weightConverter(valNum) {
try {
if (isNaN(valNum) || valNum <= 0) {
throw "Please enter a valid positive number";
}
document.getElementById("outputCups").innerHTML = valNum * 0.125;
} catch(error) {
document.getElementById("outputCups").innerHTML = error;
}
}
</script>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Abuelita's Mexican Recipes!</h1>
<p id="greeting"></p>
<ul id="recipe-list"></ul>
<script src="Recipes.js"></script>
<script>
// Add recipes to an array
const recipes = [
new Recipe(
"Enchiladas",
"A classic Mexican dish",
["corn tortillas", "chicken", "enchilada sauce", "cheese"],
"1. Preheat oven to 350F. n2. Warm tortillas in the oven or microwave. n3. Fill each tortilla with
shredded chicken and roll up. n4. Place rolled tortillas in a baking dish, seam-side down. n5. Pour
enchilada sauce over the tortillas. n6. Sprinkle cheese on top. n7. Bake for 20-25 minutes, until
cheese is melted and bubbly."
),
new Recipe(
"Guacamole",
"A delicious avocado dip",
["avocados", "lime", "tomatoes", "onion", "jalapeo", "cilantro"],
"1. Cut avocados in half and remove pit. n2. Scoop out avocado flesh into a bowl. n3. Mash
avocado with a fork. n4. Add lime juice and salt to taste. n5. Stir in chopped tomatoes, onion,
jalapeo, and cilantro."

)
];
// Display the recipes on the page
const recipeList = document.getElementById('recipe-list');
recipes.forEach(recipe => {
const recipeItem = document.createElement('li');
recipeItem.innerHTML = `
<h2>${recipe.name}</h2>
<p>${recipe.description}</p>
<p><strong>Ingredients:</strong> ${recipe.ingredients.join(', ')}</p>
<p><strong>Instructions:</strong></p>
<ol>${recipe.instructions.split('n').map(instruction => `<li>${instruction.trim()}</li>`).join('')}</ol>
`;
recipeList.appendChild(recipeItem);
});
</script>
</body>
</html>
<a href="https://swisscyberinstitute.com/blog/10-tips-on-how-to-browse-the-internet-
safely/">Choose strict privacy and security settings on your browser</a>
<br>
<a href="https://ciso.uw.edu/education/risk-advisories/web-browsing/">Keep operating systems
and applications up to date by applying all critical software patches to protect against viruses,
spyware, and other malicious software that may infect your system through the browser.</a>
<br>
<a href="https://usa.kaspersky.com/resource-center/preemptive-safety/top-10-internet-safety-
rules-and-what-not-to-do-online">Make Sure Your Internet Connection is Secure. Use a Secure
VPN Connection.</a>
</body>
</html>
--------------------------------------------------------------------------------
JS FILE:
// Define the Recipe class
class Recipe {
constructor(name, description, ingredients, instructions) {
this.name = name;
this.description = description;
this.ingredients = ingredients;
this.instructions = instructions;
}
// Add a method to display the recipe details
display() {

console.log(`${this.name}: ${this.description}`);
console.log("Ingredients:");
for (let i = 0; i < this.ingredients.length; i++) {
console.log(`- ${this.ingredients[i]}`);
}
console.log("Instructions:");
console.log(this.instructions);
}
}
// Create some sample recipes
const recipe1 = new Recipe(
"Enchiladas",
"A classic Mexican dish",
["corn tortillas", "chicken", "enchilada sauce", "cheese"],
"1. Preheat oven to 350F. n2. Warm tortillas in the oven or microwave. n3. Fill each tortilla with
shredded chicken and roll up. n4. Place rolled tortillas in a baking dish, seam-side down. n5. Pour
enchilada sauce over the tortillas. n6. Sprinkle cheese on top. n7. Bake for 20-25 minutes, until
cheese is melted and bubbly."
);
const recipe2 = new Recipe(
"Guacamole",
"A delicious avocado dip",
["avocados", "lime", "tomatoes", "onion", "jalapeo", "cilantro"],
"1. Cut avocados in half and remove pit. n2. Scoop out avocado flesh into a bowl. n3. Mash
avocado with a fork. n4. Add lime juice and salt to taste. n5. Stir in chopped tomatoes, onion,
jalapeo, and cilantro."
);
// Display the recipe details
recipe1.display();
recipe2.display();

JAVASCRIPT I need help adding the following to my code Enha.pdf

More Related Content

More from adinathassociates

Recently uploaded

JAVASCRIPT I need help adding the following to my code Enha.pdf