<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Create Your Pizza</title>

        <meta name="description" content="Create your own pizza with custom toppings and slices">

        <meta name="keywords" content="pizza, custom pizza, toppings, slices">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                

                // This will run when the DOM is ready.

                document.addEventListener("DOMContentLoaded", function() {

                    // Initialize the pizza image

                    var pizzaImage = document.getElementById("pizza-image");

                    

                    // Get user input for pizza name and number of slices

                    var pizzaNameInput = document.getElementById("pizza-name");

                    var numSlicesInput = document.getElementById("num-slices");

                    

                    // Add event listener to the "Add Topping" button

                    var addToppingBtn = document.getElementById("add-topping-btn");

                    addToppingBtn.addEventListener("click", function() {

                        // Create a new topping element

                        var toppingInput = document.createElement("input");

                        toppingInput.type = "text";

                        toppingInput.className = "form-control mb-2";

                        toppingInput.placeholder = "Enter Topping";

                        

                        // Append the topping input to the topping container

                        var toppingContainer = document.getElementById("topping-container");

                        toppingContainer.appendChild(toppingInput);

                    });

                    

                    // Add event listener to the "Create Pizza" button

                    var createPizzaBtn = document.getElementById("create-pizza-btn");

                    createPizzaBtn.addEventListener("click", function() {

                        // Get the pizza name and number of slices

                        var pizzaName = pizzaNameInput.value;

                        var numSlices = parseInt(numSlicesInput.value);

                        

                        // Create the pizza HTML

                        var pizzaHTML = "";

                        

                        // Create the pizza image with toppings

                        pizzaHTML += "<h2>Your Custom Pizza:</h2>";

                        pizzaHTML += "<img src='https://placeimg.com/400/400/food' alt='Pizza' id='pizza-image' class='img-fluid'>";

                        pizzaHTML += "<h4 class='mt-4'>Name: " + pizzaName + "</h4>";

                        

                        // Get the toppings inputs

                        var toppingsInputs = document.querySelectorAll(".form-control");

                        

                        // Initialize an empty array for toppings

                        var toppings = [];

                        

                        // Loop through the toppings inputs and add them to the toppings array

                        for (var i = 0; i < toppingsInputs.length; i++) {

                            var topping = toppingsInputs[i].value;

                            toppings.push(topping);

                        }

                        

                        // Add the toppings to the pizza HTML

                        if (toppings.length > 0) {

                            pizzaHTML += "<h4>Toppings:</h4>";

                            pizzaHTML += "<ul>";

                            for (var i = 0; i < toppings.length; i++) {

                                pizzaHTML += "<li>" + toppings[i] + "</li>";

                            }

                            pizzaHTML += "</ul>";

                        }

                        

                        // Add the number of slices to the pizza HTML

                        pizzaHTML += "<h4>Number of Slices: " + numSlices + "</h4>";

                        

                        // Update the pizza image and pizza details

                        pizzaImage.src = "https://placeimg.com/400/400/food?" + new Date().getTime();

                        pizzaImage.alt = "Pizza";

                        pizzaImage.classList.add("img-fluid");

                        pizzaImage.style.display = "block";

                        

                        // Update the main container with the pizza HTML

                        var mainContainer = document.getElementById("main-container");

                        mainContainer.innerHTML = pizzaHTML;

                    });

                });



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                font-family: 'Poppins', sans-serif;

                background-color: #f8f9fa;

            }

            

            .container {

                max-width: 600px;

                margin: 0 auto;

                padding: 20px;

            }

            

            h1 {

                text-align: center;

                margin-bottom: 30px;

            }

            

            .form-control {

                border-radius: 0;

            }

            

            .mb-2 {

                margin-bottom: 10px;

            }

            

            .mt-4 {

                margin-top: 20px;

            }

            

            #pizza-image {

                display: none;

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Create Your Pizza</h1>

            

            <div class="mb-4">

                <label for="pizza-name" class="form-label">Pizza Name</label>

                <input type="text" id="pizza-name" class="form-control" placeholder="Enter Pizza Name">

            </div>

            

            <div class="mb-4">

                <label for="num-slices" class="form-label">Number of Slices</label>

                <input type="number" id="num-slices" class="form-control" min="1" max="12" placeholder="Enter Number of Slices">

            </div>

            

            <div id="topping-container" class="mb-4">

                <label class="form-label">Toppings</label>

                <input type="text" class="form-control mb-2" placeholder="Enter Topping">

            </div>

            

            <button id="add-topping-btn" class="btn btn-primary mb-4">Add Topping</button>

            

            <button id="create-pizza-btn" class="btn btn-success">Create Pizza</button>

            

            <img src="https://placeimg.com/400/400/food" alt="Pizza" id="pizza-image" class="img-fluid">

        </div>

    </body>

</html>