<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>Delicious Dash - Food Delivery Made Easy</title>

        <meta name="description" content="Fast and easy food delivery service providing a variety of delicious cuisines at your fingertips. Order now and enjoy!">

        <meta name="keywords" content="food delivery, online ordering, cuisines, tasty food, meal delivery, restaurants, fast delivery">



        <!-- Libraries -->

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

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

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <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() {

                    const menu = [

                        { name: "Pizza", description: "Cheesy goodness topped with fresh veggies!", price: 9.99 },

                        { name: "Sushi", description: "Fresh and delicious sushi rolls.", price: 12.99 },

                        { name: "Burger", description: "Juicy beef burger with all the toppings.", price: 7.99 },

                        { name: "Pasta", description: "Creamy and rich pasta with sauce of your choice.", price: 8.99 },

                        { name: "Salad", description: "A healthy mix of fresh greens and veggies.", price: 6.99 },

                    ];



                    const orderContainer = document.getElementById("order-container");

                    const totalPriceEl = document.getElementById("total-price");

                    let totalPrice = 0;



                    menu.forEach(item => {

                        const itemDiv = document.createElement("div");

                        itemDiv.className = "menu-item";

                        itemDiv.innerHTML = `

                            <h5>${item.name} - $${item.price.toFixed(2)}</h5>

                            <p>${item.description}</p>

                            <button class="btn btn-primary order-btn" data-price="${item.price}">Order</button>

                        `;

                        orderContainer.appendChild(itemDiv);

                    });



                    $(document).on("click", ".order-btn", function() {

                        const price = $(this).data("price");

                        totalPrice += price;

                        totalPriceEl.textContent = totalPrice.toFixed(2);

                        alert(`${$(this).siblings('h5').text()} added to your order!`);

                    });

                });



            } catch (error) {

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

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(120deg, #f3e7e0 0%, #b1b2ff 100%);

                color: #333;

            }

            #main-container {

                padding: 30px;

                border-radius: 8px;

                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

                background-color: white;

                margin-top: 50px;

                border: 1px solid #ddd;

            }

            .menu-item {

                margin-bottom: 20px;

                padding: 15px;

                border: 1px solid #ccc;

                border-radius: 5px;

                transition: transform 0.3s, box-shadow 0.3s;

            }

            .menu-item:hover {

                transform: translateY(-5px);

                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

            }

            h5 {

                margin: 0;

            }

            #total-price {

                font-weight: bold;

                font-size: 1.2em;

            }

        </style>

    </head>

    <body>

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

            <h1 class="text-center">Delicious Dash</h1>

            <p class="text-center">Order your favorite meals for fast delivery!</p>

            <div id="order-container"></div>

            <div class="text-center mt-3">

                <h5>Total Price: $<span id="total-price">0.00</span></h5>

            </div>

        </div>

    </body>

</html>