Merge pull request #1449 from Garima-149/main

Adding rating component in feedback section Issue no #1331
jfmartinz · Jun 26, 2024 · 270ce7a · 270ce7a
2 parents 160f960 + d70328e
commit 270ce7a
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 3 deletions.
diff --git 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 */
-}
+}
+
+
+
+
+/*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
@@ -23,6 +23,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>
@@ -35,7 +36,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">
@@ -81,7 +93,57 @@ <h3 class="mb-4">We value your feedback</h3>
 <script src="cursorAnimation.js"></script>
 <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>
diff --git 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');
-});
+});
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,5 @@ function toggleDarkMode() { @@
     particlesJS.load('particles-js', './assets/homeparticles.json', function () {
         console.log('callback - particles.js config loaded');
-    });
+    });