Update app.py

app.py

@@ -90,6 +90,15 @@ def app():
         modal_and_cart_js = """
         <script>
             let cart = [];
+            const extrasPrices = {
+                "Extra Raitha 4oz": 1,
+                "Extra Raitha 8oz": 2,
+                "Extra Salan 4oz": 1,
+                "Extra Salan 8oz": 2,
+                "Extra Onion": 1,
+                "Extra Onion & Lemon": 2,
+                "Extra Fried Onion 4oz": 2
+            };
 
             function openModal(name, image, description, price) {
                 document.getElementById('modal').style.display = 'block';
@@ -111,29 +120,24 @@ def app():
                 const instructions = document.getElementById('special-instructions').value;
                 const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')).map(extra => extra.value);
 
-                const cartItem = { name, price, spiceLevel, quantity, instructions, extras };
-                cart.push(cartItem);
+                const extrasCost = extras.reduce((sum, extra) => sum + (extrasPrices[extra] || 0), 0);
+                const itemTotal = (parseFloat(price.replace('$', '')) + extrasCost) * quantity;
 
-                fetch("/update_cart", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify(cart)
-                });
+                const cartItem = { name, price, spiceLevel, quantity, instructions, extras, itemTotal };
+                cart.push(cartItem);
 
                 alert(`${name} added to cart!`);
-                closeModal();
                 updateCartDisplay();
+                closeModal();
             }
 
             function updateCartDisplay() {
                 let totalBill = 0;
                 let cartHTML = "<h3>Your Cart:</h3><ul>";
                 cart.forEach(item => {
-                    let extrasCost = item.extras.reduce((sum, extra) => sum + (EXTRAS_PRICES[extra] || 0), 0);
-                    let itemTotal = (parseFloat(item.price.replace('$', '')) + extrasCost) * item.quantity;
-                    totalBill += itemTotal;
-                    let extras = item.extras.join(', ');
-                    cartHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${itemTotal.toFixed(2)}</li>`;
+                    totalBill += item.itemTotal;
+                    const extras = item.extras.join(', ');
+                    cartHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
                 });
                 cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
                 document.getElementById('floating-cart').innerHTML = cartHTML;
@@ -152,21 +156,21 @@ def app():
             <p id="modal-description"></p>
             <p id="modal-price"></p>
             <!-- Spice Levels -->
-            <label for="spice-level"><b>Choose a Spice Level (Required):</b></label>
+            <label for="spice-level">Choose a Spice Level (Required):</label>
             <div id="spice-level-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
-                <label><input type="radio" name="spice-level" value="American Mild" required /> American Mild</label>
-                <label><input type="radio" name="spice-level" value="American Medium" required /> American Medium</label>
-                <label><input type="radio" name="spice-level" value="American Spicy" required /> American Spicy</label><br>
-                <label><input type="radio" name="spice-level" value="Indian Mild" required /> Indian Mild</label>
-                <label><input type="radio" name="spice-level" value="Indian Medium" required /> Indian Medium</label>
-                <label><input type="radio" name="spice-level" value="Indian Very Spicy" required /> Indian Very Spicy</label>
+                <label><input type="radio" name="spice-level" value="American Mild" /> American Mild</label>
+                <label><input type="radio" name="spice-level" value="American Medium" /> American Medium</label>
+                <label><input type="radio" name="spice-level" value="American Spicy" /> American Spicy</label>
+                <label><input type="radio" name="spice-level" value="Indian Mild" /> Indian Mild</label>
+                <label><input type="radio" name="spice-level" value="Indian Medium" /> Indian Medium</label>
+                <label><input type="radio" name="spice-level" value="Indian Very Spicy" /> Indian Very Spicy</label>
             </div>
             <!-- Biryani Extras -->
-            <label for="biryani-extras"><b>Biryani Extras (Optional - Choose as many as you like):</b></label>
+            <label for="biryani-extras">Biryani Extras (Optional - Choose as many as you like):</label>
             <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
                 <label><input type="checkbox" name="biryani-extra" value="Extra Raitha 4oz" /> Extra Raitha 4oz + $1.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Extra Raitha 8oz" /> Extra Raitha 8oz + $2.00</label>
-                <label><input type="checkbox" name="biryani-extra" value="Extra Salan 4oz" /> Extra Salan 4oz + $1.00</label><br>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Salan 4oz" /> Extra Salan 4oz + $1.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Extra Salan 8oz" /> Extra Salan 8oz + $2.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Extra Onion" /> Extra Onion + $1.00</label>
                 <label><input type="checkbox" name="biryani-extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>