From 7f655e64794831cba6bbbbed70bb8830e80d2422 Mon Sep 17 00:00:00 2001
From: kavyamore <kavyamore18@gmail.com>
Date: Wed, 27 May 2026 18:33:43 +0530
Subject: [PATCH 1/2] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 066b023..bd890f7 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
         </div>
       </div>
       <a href="#about" class="nav-link">About</a>
-      <a href="#cart-sidebar" class="nav-link" id="cart-open-btn" aria-label="Open Cart">Cart (<span id="cart-count">0</span>)</a>
+      <a href="#cart.html" class="nav-link" id="cart-open-btn" aria-label="Open Cart">Cart (<span id="cart-count">0</span>)</a>
       <div class="search-bar" role="search">
         <input type="search" placeholder="Search menu..." aria-label="Search menu" id="search-input" />
         <button aria-label="Search" id="search-btn"></button>

From f2101a43cec850cf1456ad117e6134e97a79270a Mon Sep 17 00:00:00 2001
From: kavyamore <kavyamore18@gmail.com>
Date: Wed, 27 May 2026 19:35:35 +0530
Subject: [PATCH 2/2] Add community recommendation and interactive rating
 system

---
 css/style.css  | 149 ++++++++++++++++++++++++++++++++++
 data/menu.json |  64 +++++++++++++--
 index.html     |   4 +-
 js/main.js     | 214 +++++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 419 insertions(+), 12 deletions(-)

diff --git a/css/style.css b/css/style.css
index 2907981..c9d9953 100644
--- a/css/style.css
+++ b/css/style.css
@@ -924,4 +924,153 @@
   height: 28px;
   width: 90px;
   border-radius: 6px;
+}
+
+.food-meta {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.food-rating {
+  font-size: 14px;
+  color: #f4b400;
+  font-weight: 600;
+}
+
+.rating-stars {
+  display: flex;
+  gap: 4px;
+}
+
+.star {
+  cursor: pointer;
+  font-size: 18px;
+  color: #d3d3d3;
+  transition: 0.2s ease;
+}
+
+.star:hover {
+  color: #f4b400;
+  transform: scale(1.1);
+}
+
+.trending-badge {
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 20px;
+
+  background: rgba(255, 140, 0, 0.12);
+  color: #ff7a00;
+
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.food-meta {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.food-rating {
+  font-size: 14px;
+  color: #f4b400;
+  font-weight: 600;
+}
+
+.rating-stars {
+  display: flex;
+  gap: 4px;
+}
+
+.star {
+  cursor: pointer;
+  font-size: 18px;
+  color: #d3d3d3;
+  transition: 0.2s ease;
+}
+
+.star:hover {
+  color: #f4b400;
+  transform: scale(1.1);
+}
+
+.trending-badge {
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 20px;
+
+  background: rgba(255, 140, 0, 0.12);
+  color: #ff7a00;
+
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.star.active {
+  color: #f4b400;
+}
+
+.toast-message {
+
+  position: fixed;
+
+  bottom: 20px;
+  right: 20px;
+
+  background: #333;
+  color: white;
+
+  padding: 12px 18px;
+
+  border-radius: 10px;
+
+  opacity: 0;
+
+  transform: translateY(20px);
+
+  transition: 0.3s ease;
+
+  z-index: 9999;
+}
+
+.toast-message.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.first-try-section {
+  margin-top: 10px;
+}
+
+.first-try-count {
+  font-size: 13px;
+  color: #555;
+  margin-bottom: 6px;
+}
+
+.first-try-btn {
+
+  border: none;
+
+  padding: 6px 12px;
+
+  border-radius: 8px;
+
+  cursor: pointer;
+
+  background: #fff3e0;
+
+  color: #ff7a00;
+
+  font-weight: 600;
+
+  transition: 0.3s ease;
+}
+
+.first-try-btn:hover {
+  background: #ffe0b2;
 }
\ No newline at end of file
diff --git a/data/menu.json b/data/menu.json
index fa3bafb..c9b83c8 100644
--- a/data/menu.json
+++ b/data/menu.json
@@ -1,7 +1,61 @@
 [
-  {"id":1,"name":"Samosa","category":"Snacks","price":15,"spice":"Medium","image":"../img/samosa.jpg"},
-  {"id":2,"name":"Kachori","category":"Snacks","price":20,"spice":"Medium","image":"../img/9.avif"},
-  {"id":3,"name":"Pani Puri","category":"Chaat","price":30,"spice":"High","image":"../img/panipuri.jpg"},
-  {"id":4,"name":"Sev Puri","category":"Chaat","price":35,"spice":"High","image":"../img/sevpuri.jpg"},
-  {"id":5,"name":"Chai","category":"Beverages","price":10,"spice":"Low","image":"../img/chai.jpg"}
+  {
+    "id": 1,
+    "name": "Samosa",
+    "category": "Snacks",
+    "price": 15,
+    "spice": "Medium",
+    "image": "../img/samosa.jpg",
+
+    "rating": 4.5,
+    "recommendedCount": 32
+  },
+
+  {
+    "id": 2,
+    "name": "Kachori",
+    "category": "Snacks",
+    "price": 20,
+    "spice": "Medium",
+    "image": "../img/9.avif",
+
+    "rating": 4.2,
+    "recommendedCount": 18
+  },
+
+  {
+    "id": 3,
+    "name": "Pani Puri",
+    "category": "Chaat",
+    "price": 30,
+    "spice": "High",
+    "image": "../img/panipuri.jpg",
+
+    "rating": 4.8,
+    "recommendedCount": 67
+  },
+
+  {
+    "id": 4,
+    "name": "Sev Puri",
+    "category": "Chaat",
+    "price": 35,
+    "spice": "High",
+    "image": "../img/sevpuri.jpg",
+
+    "rating": 4.4,
+    "recommendedCount": 24
+  },
+
+  {
+    "id": 5,
+    "name": "Chai",
+    "category": "Beverages",
+    "price": 10,
+    "spice": "Low",
+    "image": "../img/chai.jpg",
+
+    "rating": 4.7,
+    "recommendedCount": 51
+  }
 ]
\ No newline at end of file
diff --git a/index.html b/index.html
index bd890f7..f7a29b8 100644
--- a/index.html
+++ b/index.html
@@ -27,8 +27,8 @@
           <a href="#menu" role="menuitem" tabindex="-1" class="menu-filter" data-filter="All">All</a>
         </div>
       </div>
-      <a href="#about" class="nav-link">About</a>
-      <a href="#cart.html" class="nav-link" id="cart-open-btn" aria-label="Open Cart">Cart (<span id="cart-count">0</span>)</a>
+      <a href="about.html" class="nav-link">About</a>
+      <a href="cart.html" class="nav-link" id="cart-open-btn" aria-label="Open Cart">Cart (<span id="cart-count">0</span>)</a>
       <div class="search-bar" role="search">
         <input type="search" placeholder="Search menu..." aria-label="Search menu" id="search-input" />
         <button aria-label="Search" id="search-btn"></button>
diff --git a/js/main.js b/js/main.js
index ff16dce..d8aff16 100644
--- a/js/main.js
+++ b/js/main.js
@@ -5,39 +5,58 @@ const menuItems = [
     category: "Snacks",
     price: 30,
     description: "Crispy golden triangle stuffed with spiced potatoes.",
-    image: "img/8.avif"
+    image: "img/8.avif",
+
+    rating: 4.5,
+    recommendedCount: 32
   },
+
   {
     id: 2,
     name: "Pani Puri",
     category: "Chaat",
     price: 50,
     description: "Hollow crispy puris filled with spicy, tangy water and chickpeas.",
-    image: "img/2.avif"
+    image: "img/2.avif",
+
+    rating: 4.8,
+    recommendedCount: 67
   },
+
   {
     id: 3,
     name: "Masala Chai",
     category: "Beverages",
     price: 20,
     description: "Aromatic tea brewed with spices and milk.",
-    image: "img/7.avif"
+    image: "img/7.avif",
+
+    rating: 4.6,
+    recommendedCount: 41
   },
+
   {
     id: 4,
     name: "Kachori",
     category: "Snacks",
     price: 35,
     description: "Deep-fried pastry filled with spicy lentils.",
-    image: "img/9.avif"
+    image: "img/9.avif",
+
+    rating: 4.3,
+    recommendedCount: 24
   },
+
   {
     id: 5,
     name: "Bhel Puri",
     category: "Chaat",
     price: 45,
     description: "Crunchy puffed rice mixed with tangy tamarind chutney.",
-    image: "img/1.avif"
+    image: "img/1.avif",
+
+    rating: 4.7,
+    recommendedCount: 58
   },
 ];
 
@@ -51,6 +70,12 @@ const cartTotal = document.getElementById("cart-total");
 const checkoutBtn = document.getElementById("checkout-btn");
 
 let cart = JSON.parse(localStorage.getItem('chaatCart')) || [];
+let ratingsData =
+  JSON.parse(localStorage.getItem("chaatRatings")) || {};
+let firstTryData =
+  JSON.parse(
+    localStorage.getItem("firstTryRecommendations")
+  ) || {};
 
 function saveCart() {
   localStorage.setItem('chaatCart', JSON.stringify(cart));
@@ -61,6 +86,41 @@ function formatPrice(price) {
   return `₹${price}`;
 }
 
+function saveRatings() {
+  localStorage.setItem(
+    "chaatRatings",
+    JSON.stringify(ratingsData)
+  );
+}
+function saveFirstTryData() {
+
+  localStorage.setItem(
+    "firstTryRecommendations",
+    JSON.stringify(firstTryData)
+  );
+
+}
+
+function getItemRatings(itemId, defaultRating) {
+
+  const ratings = ratingsData[itemId];
+
+  if (!ratings || ratings.length === 0) {
+    return {
+      average: defaultRating,
+      count: 0
+    };
+  }
+
+  const total =
+    ratings.reduce((sum, r) => sum + r, 0);
+
+  return {
+    average: (total / ratings.length).toFixed(1),
+    count: ratings.length
+  };
+}
+
 // ===== Render Functions =====
 
 function createCard(item) {
@@ -69,11 +129,63 @@ function createCard(item) {
   card.tabIndex = 0;
   card.setAttribute("aria-label", `${item.name} - ${item.description}. Price: ${formatPrice(item.price)}.`);
 
+  const ratingData =
+    getItemRatings(item.id, item.rating);
+
+  const isTrending =
+    ratingData.average >= 4.7 &&
+    ratingData.count >= 3;
+
   card.innerHTML = `
     <img src="${item.image}" alt="${item.name}" loading="lazy" />
     <div class="card-content">
       <h3>${item.name}</h3>
       <p>${item.description}</p>
+
+      <div class="food-meta">
+
+        <div class="food-rating">
+          ⭐ ${ratingData.average}
+          • ${ratingData.count || item.recommendedCount}
+          recommendations
+        </div>
+
+        ${
+          isTrending
+            ? `
+            <span class="trending-badge">
+              🔥 Most Loved
+            </span>
+            `
+            : ""
+        }
+
+        <div class="rating-stars">
+          ${[1,2,3,4,5].map(star => `
+            <span
+              class="star"
+              data-rating="${star}"
+            >
+              ★
+            </span>
+          `).join("")}
+        </div>
+
+         <div class="first-try-section">
+
+          <p class="first-try-count">
+            👥 ${
+              firstTryData[item.id] || 0
+            } people recommend this for first-time visitors
+          </p>
+
+          <button class="first-try-btn">
+            👍 Recommend
+          </button>
+
+        </div>
+
+      </div>
     </div>
     <div class="card-footer">
       <span class="price">${formatPrice(item.price)}</span>
@@ -83,6 +195,79 @@ function createCard(item) {
 
   const addBtn = card.querySelector(".add-btn");
   addBtn.addEventListener("click", () => addToCart(item.id));
+  const stars = card.querySelectorAll(".star");
+
+stars.forEach(star => {
+
+  star.addEventListener("click", () => {
+
+    const value =
+      Number(star.dataset.rating);
+
+        const alreadyRated =
+          localStorage.getItem(
+            `rated-${item.id}`
+          );
+
+        if (alreadyRated) {
+          showToast("You already rated this item!");
+          return;
+        }
+
+        if (!ratingsData[item.id]) {
+          ratingsData[item.id] = [];
+        }
+
+        ratingsData[item.id].push(value);
+
+        saveRatings();
+
+        localStorage.setItem(
+          `rated-${item.id}`,
+          true
+        );
+
+        renderMenu();
+
+      });
+
+    });
+
+    const firstTryBtn =
+    card.querySelector(".first-try-btn");
+
+  firstTryBtn.addEventListener(
+    "click",
+    () => {
+
+      const alreadyRecommended =
+        localStorage.getItem(
+          `recommended-${item.id}`
+        );
+
+      if (alreadyRecommended) {
+
+        showToast(
+          "You already recommended this item!"
+        );
+
+        return;
+      }
+
+      firstTryData[item.id] =
+        (firstTryData[item.id] || 0) + 1;
+
+      saveFirstTryData();
+
+      localStorage.setItem(
+        `recommended-${item.id}`,
+        true
+      );
+
+      renderMenu();
+
+    }
+  );
 
   return card;
 }
@@ -440,6 +625,25 @@ function setupNewsletterForm() {
 }
 
 // ===== Initialization =====
+function showToast(message) {
+
+  const toast =
+    document.createElement("div");
+
+    toast.className = "toast-message";
+
+    toast.textContent = message;
+
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+      toast.classList.add("show");
+    }, 100);
+
+    setTimeout(() => {
+      toast.remove();
+    }, 3000);
+  }
 
 function init() {
   renderSpecials();