Feature/Enhancement: Add Clear Cart button to Cart Page

cart.html

@@ -37,13 +37,70 @@
     }
 
     #checkout-btn {
-      margin-top: 20px;
-      padding: 10px 15px;
+      padding: 10px 18px;
       background: #ff6b35;
       color: white;
       border: none;
       cursor: pointer;
       border-radius: 6px;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+
+    #checkout-btn:hover {
+      background: #e64a19;
+      transform: translateY(-1px);
+    }
+
+    #checkout-btn:active {
+      transform: translateY(0);
+    }
+
+    .cart-actions {
+      margin-top: 20px;
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    #clear-cart-btn {
+      padding: 6px 14px;
+      background: #e64a19;
+      color: white;
+      border: none;
+      cursor: pointer;
+      border-radius: 6px;
+      font-weight: 600;
+      font-size: 0.88rem;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 10px rgba(230, 74, 25, 0.12);
+    }
+
+    #clear-cart-btn:hover {
+      background: #c2410c;
+      transform: translateY(-1px);
+      box-shadow: 0 6px 14px rgba(194, 65, 12, 0.22);
+    }
+
+    #clear-cart-btn:active {
+      transform: translateY(0);
+    }
+
+    .cart-list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+      margin-bottom: 15px;
+      border-bottom: 2px solid rgba(255, 87, 34, 0.12);
+      padding-bottom: 8px;
+    }
+
+    .cart-list-title {
+      font-size: 1.3rem;
+      font-weight: 700;
+      color: #bf360c;
+      margin: 0;
     }
 
     .empty-cart {
@@ -115,6 +172,10 @@ <h1>Your Cart</h1>
         eligibility. We deliver within 5 km of India Gate, New Delhi.
       </p>
     </div>
+    <div class="cart-list-header">
+      <h2 class="cart-list-title">Items in Cart</h2>
+      <button id="clear-cart-btn" class="secondary-btn">Clear Cart</button>
+    </div>
     <div id="cart-items"></div>
 
     <section class="coupon-section">
@@ -136,7 +197,9 @@ <h2>Have a promo code?</h2>
       <p class="grand-total">Total: <strong id="coupon-grand-total">₹0</strong></p>
     </section>    
 
-  <button id="checkout-btn">Checkout</button>
+  <div class="cart-actions">
+    <button id="checkout-btn">Checkout</button>
+  </div>
 </section>
 
   <div id="toast-notification" class="toast-notification"></div>
@@ -222,17 +285,32 @@ <h3>Contact Us</h3>
   function renderCart() {
     const container = document.getElementById("cart-items");
     const totalEl = document.getElementById("total-price");
+    const listHeader = document.querySelector(".cart-list-header");
+    const checkoutBtn = document.getElementById("checkout-btn");
 
     const items = window.cartManager.getItems();
 
     container.innerHTML = "";
 
     if (!items || items.length === 0) {
       container.innerHTML = `<p class="empty-cart">Your cart is empty 🛒</p>`;
-      totalEl.innerText = "";
+      if (totalEl) totalEl.innerText = "";
+      if (listHeader) listHeader.style.display = "none";
+      if (checkoutBtn) {
+        checkoutBtn.disabled = true;
+        checkoutBtn.style.opacity = "0.5";
+        checkoutBtn.style.cursor = "not-allowed";
+      }
       return;
     }
 
+    if (listHeader) listHeader.style.display = "flex";
+    if (checkoutBtn) {
+      checkoutBtn.disabled = false;
+      checkoutBtn.style.opacity = "1";
+      checkoutBtn.style.cursor = "pointer";
+    }
+
     items.forEach((cartItem) => {
       container.innerHTML += `
         <div class="cart-item">
@@ -252,12 +330,24 @@ <h3>Contact Us</h3>
       `;
     });
 
-    totalEl.innerText =
-      "Total: ₹" + window.cartManager.getTotalPrice();
+    if (totalEl) {
+      totalEl.innerText = "Total: ₹" + window.cartManager.getTotalPrice();
+    }
   }
 
-  // Initial render
-  window.addEventListener("load", renderCart);
+  // Initial render & Clear Cart wiring
+  window.addEventListener("load", () => {
+    renderCart();
+
+    const clearBtn = document.getElementById("clear-cart-btn");
+    if (clearBtn) {
+      clearBtn.addEventListener("click", () => {
+        if (confirm("Are you sure you want to remove all items from your cart?")) {
+          window.cartManager.clear();
+        }
+      });
+    }
+  });
 
   // Live update when cart changes
   window.cartManager.subscribe(renderCart);

js/cart-manager.js

@@ -6,12 +6,36 @@ const CART_STORAGE_KEY = 'chaatCart';
 const CART_SYNC_EVENT = 'cartStateChanged';
 
 class CartManager {
-  constructor() {
+  constructor(maxUniqueItems = 50) {
+    this.maxUniqueItems = maxUniqueItems;
     this.items = this.loadFromStorage();
     this.listeners = [];
     this.setupStorageSync();
   }
 
+  getMaxUniqueItems() {
+    return this.maxUniqueItems;
+  }
+
+  setMaxUniqueItems(limit) {
+    if (typeof limit === 'number' && limit > 0) {
+      this.maxUniqueItems = limit;
+      return true;
+    }
+    return false;
+  }
+
+  showCartFullMessage() {
+    const message = "Your cart is full. Please remove some items before adding more.";
+    if (typeof showToast === 'function') {
+      showToast(message);
+    } else if (typeof window.showToast === 'function') {
+      window.showToast(message);
+    } else {
+      alert(message);
+    }
+  }
+
   // =====================
   // LOAD
   // =====================
@@ -117,10 +141,14 @@ class CartManager {
       return false;
     }
 
-   const existingItem = this.getItem(item.id);
+    const existingItem = this.getItem(item.id);
     if (existingItem) {
       existingItem.quantity += quantity;
     } else {
+      if (this.getSize() >= this.maxUniqueItems) {
+        this.showCartFullMessage();
+        return false;
+      }
       this.items.push({
         item: { ...item },
         quantity: quantity

js/main.js

@@ -941,7 +941,8 @@ function addToCart(id) {
     return;
   }
 
-  cartManager.addItem(item, 1);
+  const success = cartManager.addItem(item, 1);
+  if (!success) return;
   updateCartCount();
   updateFavCount();
   renderCart();

js/recommendations.js

@@ -106,17 +106,38 @@ const foodPairings = {
 // ===== ADD TO CART FUNCTION =====
 
 function addToCart(itemName, itemPrice) {
+  if (typeof cartManager !== 'undefined') {
+    const success = cartManager.addItem({
+      id: itemName + "-" + itemPrice,
+      name: itemName,
+      price: itemPrice
+    }, 1);
+
+    if (success) {
+      cart = cartManager.getItems();
+      updateCartCount();
+      renderRecommendations();
+      showToast(`${itemName} added to cart 🛒`);
+    }
+    return;
+  }
 
   const existingItem = cart.find(
     cartItem => cartItem.item.name === itemName
   );
 
   if (existingItem) {
-
     existingItem.quantity += 1;
-
   } else {
-
+    if (cart.length >= 50) {
+      const message = "Your cart is full. Please remove some items before adding more.";
+      if (typeof showToast === 'function') {
+        showToast(message);
+      } else {
+        alert(message);
+      }
+      return;
+    }
     cart.push({
       item: {
         name: itemName,

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "chaatbazaar",
+  "version": "1.0.0",
+  "description": "ChaatBazaar - Authentic Indian Street Food Platform",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.2.0"
+  }
+}