From eb304f6a544b9c0b81c3382aa136f968cfd490a7 Mon Sep 17 00:00:00 2001
From: Vansh Sardana <vanshsrdn25703@gmail.com>
Date: Sat, 1 Jun 2024 17:24:31 +0530
Subject: [PATCH] Enhanced star rating functionality.

---
 Css-files/content.css |  7 ++++++-
 Html-files/menu.js    | 41 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/Css-files/content.css b/Css-files/content.css
index 2c6bcb94..5478e8d3 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -568,8 +568,13 @@ td {
   /* Yellow color for filled star */
 }
 
+.star-button.hover {
+  color: #f1c40f; /* Yellow color for hovered star */
+}
 
-
+.star-button.greyed {
+  color: #ccc; /* Grey color for greyed out star */
+}
 
 /* Cart -> Input Section for Coupon Code  */
 
diff --git a/Html-files/menu.js b/Html-files/menu.js
index 017581b2..fa015cd9 100644
--- a/Html-files/menu.js
+++ b/Html-files/menu.js
@@ -1,7 +1,5 @@
-
 function rateItem(button, rating) {
     const starButtons = button.parentElement.querySelectorAll('.star-button');
-
     starButtons.forEach((starButton, index) => {
         if (index < rating) {
             starButton.classList.add('rated');
@@ -11,6 +9,45 @@ function rateItem(button, rating) {
     });
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+    const starButtons = document.querySelectorAll('.star-button');
+    starButtons.forEach((starButton, index) => {
+        //Adding event listener for all stars
+        starButton.addEventListener('mouseover', (e) => {
+            highlightStars(e.target, (index)%5);
+        });
+        starButton.addEventListener('mouseout', (e) => {
+            removeHoverStars(e.target);
+        });
+    });
+
+    function highlightStars(target, rating) {
+        //Finding the parent container of the current star
+        const starRating = target.closest('.star-rating');
+        const starChildren = Array.from(starRating.children);
+
+        starChildren.forEach((starButton, index) => {
+            if (index <= rating) {
+                //glowing up all stars before current index
+                starButton.classList.add('hover');
+            } else {
+                //(supressing the effect of rated class)
+                starButton.classList.add('greyed');
+            }
+        });
+    }
+    function removeHoverStars(target) {
+        const starRating = target.closest('.star-rating');
+        const starButtons = Array.from(starRating.children);
+        starButtons.forEach(starButton => {
+            //removing both hover and greyed classes in order to make 'rated' class stand out
+            starButton.classList.remove('hover');
+            starButton.classList.remove('greyed');
+        });
+    }
+});
+
+
 document.querySelectorAll('.add-to-cart-button').forEach(button => {
     button.addEventListener('click', function () {
         const image = this.parentElement.querySelector("img").getAttribute("src");