From e5db31e559ded0ca40924e4d27261d23f75c46ee Mon Sep 17 00:00:00 2001
From: Garima <garimachandra149@gmail.com>
Date: Sat, 22 Jun 2024 17:56:36 +0530
Subject: [PATCH] Rating component on feedback page #1331

---
 new-website/feedback.css  | 28 ++++++++++++++++-
 new-website/feedback.html | 64 ++++++++++++++++++++++++++++++++++++++-
 new-website/home.js       |  3 +-
 3 files changed, 92 insertions(+), 3 deletions(-)
diff --git a/new-website/feedback.css b/new-website/feedback.css
index 40101671..6ffbdced 100644
--- a/new-website/feedback.css
+++ b/new-website/feedback.css
@@ -122,4 +122,30 @@ body.dark #form-messages .alert-danger {
     background-color: #333; /* Darker background color for messages */
     color: #fff; /* Light text color for messages */
     border-color: #333; /* Darker border color for messages */
-}
\ No newline at end of file
+}
+
+
+
+
+/*star rating*/
+.star-rating {
+  direction: ltr; /* Optional: this can change star direction */
+}
+
+.star-rating ul {
+  list-style-type: none;
+  padding: 0;
+  display: inline-block;
+}
+
+.star-rating .star {
+  display: inline-block;
+  font-size: 2em;
+  color: lightgrey;
+  cursor: pointer;
+}
+
+.star-rating .star.selected,
+.star-rating .star.hover {
+  color: gold;
+}
diff --git a/new-website/feedback.html b/new-website/feedback.html
index 7ddacd7d..8f7dcbf9 100644
--- a/new-website/feedback.html
+++ b/new-website/feedback.html
@@ -22,6 +22,7 @@
     <title>ResourceHub</title>
 </head>
 <body>
+
     <div class="col-md-10">
         <a href="index.html" class="home-link"><i class="fas fa-arrow-left"> </i></a>
     </div>
@@ -34,7 +35,18 @@
                         <div class="col-lg-7 mb-5 mb-lg-0">
                          <h2 class="mb-5">Fill this feedback form</h2><h3>Reach out to us.</h3>
                             <form action="" class="border-right pr-5 mb-5" method="post" id="contactForm" name="contactForm"> 
-                                <!-- replace email id accordingly -->
+                                <!--Star rating-->
+                                <div class="star-rating">
+                                    <ul>
+                                        <li class="star" data-value="1">&#9733;</li>
+                                        <li class="star" data-value="2">&#9733;</li>
+                                        <li class="star" data-value="3">&#9733;</li>
+                                        <li class="star" data-value="4">&#9733;</li>
+                                        <li class="star" data-value="5">&#9733;</li>
+                                    </ul>
+                                </div>
+
+                                <!--Replace email accordingly-->
                                 <div class="row">
                                   <div class="col-md-6 form-group">
                                      <input type="text" class="form-control" name="fname" id="fname" placeholder="First name">
@@ -78,7 +90,57 @@ <h3 class="mb-4">We value your feedback</h3>
 </div>
 <script src="scripts.js"></script>
 <script src="home.js"></script>
+<script>
     
+        document.addEventListener('DOMContentLoaded', () => {
+            const stars = document.querySelectorAll('.star-rating .star');
+
+            console.log('Stars:', stars); // Debugging
+
+            if (stars.length === 0) {
+                console.error('No stars found!'); // Debugging
+                return;
+            }
+
+            stars.forEach(star => {
+                star.addEventListener('mouseover', handleMouseOver);
+                star.addEventListener('mouseout', handleMouseOut);
+                star.addEventListener('click', handleClick);
+            });
+
+            function handleMouseOver(event) {
+                console.log('Mouse Over:', event.target); // Debugging
+                const value = event.target.dataset.value;
+                highlightStars(value);
+            }
+
+            function handleMouseOut() {
+                console.log('Mouse Out'); // Debugging
+                highlightStars(0);
+            }
+
+            function handleClick(event) {
+                console.log('Click:', event.target); // Debugging
+                const value = event.target.dataset.value;
+                setRating(value);
+            }
+
+            function highlightStars(value) {
+                stars.forEach(star => {
+                    star.classList.toggle('hover', star.dataset.value <= value);
+                });
+            }
+
+            function setRating(value) {
+                stars.forEach(star => {
+                    star.classList.toggle('selected', star.dataset.value <= value);
+                });
+            }
+        });
+   
+
+
+</script>    
   
 </body>
 </html>
\ No newline at end of file
diff --git a/new-website/home.js b/new-website/home.js
index b546fe3f..1d454746 100644
--- a/new-website/home.js
+++ b/new-website/home.js
@@ -17,4 +17,5 @@ function toggleDarkMode() {
 
 particlesJS.load('particles-js', './assets/homeparticles.json', function () {
     console.log('callback - particles.js config loaded');
-});
\ No newline at end of file
+});
+
