Hugging Face's logo

Spaces:
DSatishchandra
/
BiryaniHubflaskMenu
Sleeping

App Files Community
DSatishchandra commited on
Commit
c5c7dcb
·
verified ·
1 Parent(s): 346957f

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +53 -44
templates/menu.html CHANGED
@@ -322,50 +322,51 @@ form.text-center.mb-4 {
322
  margin-right: 10px; /* Add a little space between the quantity input and the buttons */
323
  }
324
  .cart-container {
325
- display: flex;
326
- align-items: center;
327
- gap: 10px;
328
- margin-bottom: 10px;
329
- }
330
 
331
- .quantity-box {
332
- display: flex;
333
- align-items: center;
334
- border: 1px solid #ccc;
335
- border-radius: 5px;
336
- overflow: hidden;
337
- height: 40px;
338
- }
339
 
340
- .quantity-box button {
341
- background: #f0f0f0;
342
- border: none;
343
- padding: 5px 10px;
344
- cursor: pointer;
345
- height: 100%;
346
- }
347
 
348
- .quantity-box input {
349
- width: 40px;
350
- text-align: center;
351
- border: none;
352
- font-size: 16px;
353
- height: 100%;
354
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
355
 
356
- .add-to-cart-btn {
357
- background: green;
358
- color: white;
359
- padding: 10px 15px;
360
- border: none;
361
- border-radius: 5px;
362
- cursor: pointer;
363
- font-size: 16px;
364
- height: 40px;
365
- display: flex;
366
- align-items: center;
367
- justify-content: center;
368
- }
369
  </style>
370
  </head>
371
  <body>
@@ -501,7 +502,7 @@ form.text-center.mb-4 {
501
  </div>
502
 
503
  <div>
504
- <button class="add-to-cart-btn" onclick="addToCartFromModal()">Add items to Cart $<span id="totalAmountDisplay">0.00</span></button>
505
  </div>
506
 
507
  </div>
@@ -526,13 +527,21 @@ function updateTotalAmount(itemId) {
526
  let quantity = parseInt(document.getElementById("quantity-" + itemId).value);
527
  let price = parseFloat(document.getElementById("price-" + itemId).innerText); // Get price dynamically
528
  let totalAmount = price * quantity;
529
- document.getElementById("totalAmountDisplay-" + itemId).innerText = totalAmount.toFixed(2);
 
 
530
  }
531
 
532
  function addToCartFromModal(itemId) {
533
- let quantity = document.getElementById("quantity-" + itemId).value;
534
  let itemName = document.getElementById("name-" + itemId).innerText; // Get item name dynamically
535
- alert(`Added ${quantity} x ${itemName} to cart!`);
 
 
 
 
 
 
536
  }
537
  function showItemDetails(name, price, image, description, section, selectedCategory) {
538
  document.getElementById('modal-name').innerText = name;
 
322
  margin-right: 10px; /* Add a little space between the quantity input and the buttons */
323
  }
324
  .cart-container {
325
+ display: flex;
326
+ align-items: center;
327
+ gap: 10px;
328
+ }
 
329
 
330
+ .quantity-box {
331
+ display: flex;
332
+ align-items: center;
333
+ border: 1px solid #ccc;
334
+ border-radius: 5px;
335
+ overflow: hidden;
336
+ height: 40px;
337
+ }
338
 
339
+ .quantity-box button {
340
+ background: #f0f0f0;
341
+ border: none;
342
+ padding: 5px 10px;
343
+ cursor: pointer;
344
+ height: 100%;
345
+ }
346
 
347
+ .quantity-box input {
348
+ width: 40px;
349
+ text-align: center;
350
+ border: none;
351
+ font-size: 16px;
352
+ height: 100%;
353
+ }
354
+
355
+ .add-to-cart-btn {
356
+ background: green;
357
+ color: white;
358
+ padding: 10px 15px;
359
+ border: none;
360
+ border-radius: 5px;
361
+ cursor: pointer;
362
+ font-size: 16px;
363
+ height: 40px;
364
+ display: flex;
365
+ align-items: center;
366
+ justify-content: center;
367
+ white-space: nowrap;
368
+ }
369
 
 
 
 
 
 
 
 
 
 
 
 
 
 
370
  </style>
371
  </head>
372
  <body>
 
502
  </div>
503
 
504
  <div>
505
+ <button class="add-to-cart-btn" onclick="addToCartFromModal()">Add items $<span id="totalAmountDisplay">0.00</span></button>
506
  </div>
507
 
508
  </div>
 
527
  let quantity = parseInt(document.getElementById("quantity-" + itemId).value);
528
  let price = parseFloat(document.getElementById("price-" + itemId).innerText); // Get price dynamically
529
  let totalAmount = price * quantity;
530
+
531
+ // Update the individual total amount display
532
+ document.getElementById("totalAmountDisplay-" + itemId).innerText = `$${totalAmount.toFixed(2)}`;
533
  }
534
 
535
  function addToCartFromModal(itemId) {
536
+ let quantity = parseInt(document.getElementById("quantity-" + itemId).value);
537
  let itemName = document.getElementById("name-" + itemId).innerText; // Get item name dynamically
538
+ let price = parseFloat(document.getElementById("price-" + itemId).innerText); // Get price dynamically
539
+ let totalAmount = price * quantity;
540
+
541
+ // Update the "Add to Cart" button with the correct total amount
542
+ document.getElementById("addToCartBtn-" + itemId).innerHTML = `Add to Cart $${totalAmount.toFixed(2)}`;
543
+
544
+ alert(`Added ${quantity} x ${itemName} ($${totalAmount.toFixed(2)}) to cart!`);
545
  }
546
  function showItemDetails(name, price, image, description, section, selectedCategory) {
547
  document.getElementById('modal-name').innerText = name;