Merge pull request khushi-joshi-05#775 from vansh-sardana/enhancing-r…

…ating-stars Enhanced star rating functionality.
sohinirathor2004 · Jun 1, 2024 · cfc0b5b · cfc0b5b
2 parents ae9c628 + eb304f6
commit cfc0b5b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git 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
@@ -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");