GithubHelp home page GithubHelp logo

Comments (3)

BhaskarKulshrestha avatar BhaskarKulshrestha commented on July 22, 2024

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

element with the class "recipe" to display the generated recipe. Inside the "recipe"
, there are placeholders for the recipe title, ingredients, and instructions.
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.

sadanandpai avatar sadanandpai commented on July 22, 2024

@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.

BhaskarKulshrestha avatar BhaskarKulshrestha commented on July 22, 2024

Ok, I will try to shorten it.
Thanks for the instructions

from javascript-code-challenges.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.