Comments (3)
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Recipe Generator</title>
<style>
/* Add some basic styling for the recipe display */
body {
font-family: Arial, sans-serif;
}
.recipe {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.recipe h2 {
font-size: 24px;
}
</style>
</head>
<body>
<div class="recipe">
<h2 id="recipeTitle">Recipe Title</h2>
<h3>Ingredients:</h3>
<ul id="ingredientList">
<li>Ingredient 1</li>
<li>Ingredient 2</li>
<li>Ingredient 3</li>
</ul>
<h3>Instructions:</h3>
<ol id="instructionList">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
</div>
<button id="generateButton">Generate Recipe</button>
<script>
// Sample data for the recipe
const recipes = [
{
title: "Spaghetti Bolognese",
ingredients: ["Spaghetti", "Ground beef", "Tomato sauce", "Onion", "Garlic", "Olive oil"],
instructions: ["Heat olive oil in a pan.", "Sauté chopped onion and garlic.", "Add ground beef and brown it.", "Stir in tomato sauce.", "Cook spaghetti according to package instructions.", "Serve sauce over cooked spaghetti."]
},
{
title: "Caesar Salad",
ingredients: ["Romaine lettuce", "Croutons", "Parmesan cheese", "Caesar dressing"],
instructions: ["Toss lettuce with dressing.", "Sprinkle with cheese and croutons."]
}
// Add more recipes here...
];
// Function to generate a random recipe
function generateRandomRecipe() {
const randomIndex = Math.floor(Math.random() * recipes.length);
const randomRecipe = recipes[randomIndex];
document.getElementById("recipeTitle").textContent = randomRecipe.title;
const ingredientList = document.getElementById("ingredientList");
ingredientList.innerHTML = "";
randomRecipe.ingredients.forEach(ingredient => {
const li = document.createElement("li");
li.textContent = ingredient;
ingredientList.appendChild(li);
});
const instructionList = document.getElementById("instructionList");
instructionList.innerHTML = "";
randomRecipe.instructions.forEach(instruction => {
const li = document.createElement("li");
li.textContent = instruction;
instructionList.appendChild(li);
});
}
// Attach the generateRandomRecipe function to the button click event
const generateButton = document.getElementById("generateButton");
generateButton.addEventListener("click", generateRandomRecipe);
// Generate a random recipe on page load
generateRandomRecipe();
</script>
</body>
</html>
HTML Structure:
The HTML structure defines the basic layout of the web page. It includes a button with the id "generateButton" and a
CSS Styling:
Some basic CSS styling is applied to the recipe display to make it visually appealing. This includes setting font styles, margins, and borders.
JavaScript Logic:
JavaScript is used to make the web application interactive and dynamic. It begins with defining sample recipe data in the recipes array. Each recipe object has a title, ingredients list, and instructions.
The generateRandomRecipe function is defined. This function selects a random recipe from the recipes array, updates the HTML elements to display the selected recipe's title, ingredients, and instructions.
When the "Generate Recipe" button is clicked (generateButton.addEventListener), it triggers the generateRandomRecipe function to display a random recipe.
The generateRandomRecipe function updates the content of the HTML elements (recipeTitle, ingredientList, and instructionList) with the data from the randomly selected recipe.
Initialization:
The code also includes an initial call to generateRandomRecipe when the page loads. This ensures that a random recipe is displayed as soon as the user opens the page.
User Interaction:
When a user clicks the "Generate Recipe" button, the event listener attached to the button triggers the generateRandomRecipe function. This function selects a random recipe from the recipes array and updates the displayed content.
Dynamic Content:
The JavaScript code dynamically generates the list of ingredients and instructions based on the selected recipe. It clears any existing content in these lists and populates them with the data from the selected recipe.
Customization:
You can easily extend the recipes array with more recipes to increase the variety of recipes that can be generated. Each recipe object should have a title, ingredients, and instructions.
from javascript-code-challenges.
@BhaskarKulshrestha Thanks for the challenge and description. This is JS code challenges repo. The scope is limited to JS challenges only
from javascript-code-challenges.
Ok, I will try to shorten it.
Thanks for the instructions
from javascript-code-challenges.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from javascript-code-challenges.