Merge pull request #408 from ananyag309/main

updated ui of stars rate me buttons
PriyaGhosal · Oct 9, 2024 · ce74cc7 · ce74cc7
2 parents 5c2e5ba + 3679140
commit ce74cc7
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
@@ -712,17 +712,22 @@ <h2>Rate your experience</h2>
             <label for="destination">Destination/Service:</label>
             <input type="text" id="destination" name="destination" required />
 
-            <label for="rating">Rating:</label>
-            <select id="rating" name="rating">
-              <option value="5">⭐⭐⭐⭐⭐</option>
-              <option value="4">⭐⭐⭐⭐</option>
-              <option value="3">⭐⭐⭐</option>
-              <option value="2">⭐⭐</option>
-              <option value="1">⭐</option>
-            </select>
+            <label>Rating:</label>
+            <div class="rating-container">
+              <div class="star-buttons">
+                <button type="button" class="star-btn" data-rating="5">☆</button>
+                <button type="button" class="star-btn" data-rating="4">☆</button>
+                <button type="button" class="star-btn" data-rating="3">☆</button>
+                <button type="button" class="star-btn" data-rating="2">☆</button>
+                <button type="button" class="star-btn" data-rating="1">☆</button>
+              </div>
+              <input type="hidden" id="rating" name="rating" required>
+              <div id="rating-value">0</div>
+            </div>
 
             <label for="review">Your Review:</label>
             <textarea id="review" name="review" rows="4" required></textarea>
+
             <label for="complaint">Complaint (if any):</label>
             <textarea id="complaint" name="complaint" rows="3"
               placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"></textarea>

diff --git a/project-structure.md b/project-structure.md
@@ -3,6 +3,9 @@
 ├── Code_of_Conduct.md
 ├── README.md
 ├── RatingStyle.css
+├── auth.css
+├── auth.html
+├── auth.js
 ├── book.html
 ├── boy.png
 ├── chatbot.gif
@@ -26,14 +29,9 @@
 │   ├── logo2.png
 │   └── new-york-page.png
 ├── index.html
-├── login.css
-├── login.html
-├── login.js
 ├── project-structure.md
 ├── project_structure.txt
 ├── script.js
-├── signUp.css
-├── signUp.html
 ├── star-rating.js
 └── style.css
 ```

diff --git a/project_structure.txt b/project_structure.txt
@@ -1,6 +1,9 @@
 ├── Code_of_Conduct.md
 ├── README.md
 ├── RatingStyle.css
+├── auth.css
+├── auth.html
+├── auth.js
 ├── book.html
 ├── boy.png
 ├── chatbot.gif
@@ -24,13 +27,8 @@
 │   ├── logo2.png
 │   └── new-york-page.png
 ├── index.html
-├── login.css
-├── login.html
-├── login.js
 ├── project-structure.md
 ├── project_structure.txt
 ├── script.js
-├── signUp.css
-├── signUp.html
 ├── star-rating.js
 └── style.css
diff --git a/star-rating.js b/star-rating.js
@@ -1,9 +1,36 @@
-let star = document.querySelectorAll('input');
-let showValue = document.querySelector('#rating-value');
+document.addEventListener('DOMContentLoaded', () => {
+    const starContainer = document.querySelector('.star-rating');
+    const stars = document.querySelectorAll('.star');
+    const showValue = document.querySelector('#rating-value');
 
-for(let i = 0; i < star.length; i++) {
-    star[i].addEventListener('click', function() {
-        let selectedRating = this.value;
-        showValue.innerHTML = selectedRating; // Only show the rating value
+    if (!starContainer) {
+        console.error('Star rating container not found');
+        return;
+    }
+
+    if (!stars.length) {
+        console.error('No star rating inputs found');
+        return;
+    }
+
+    if (!showValue) {
+        console.error('Rating value display element not found');
+        return;
+    }
+
+    starContainer.addEventListener('change', (event) => {
+        if (event.target.matches('input')) {
+            const selectedRating = event.target.value;
+            console.log('Selected rating:', selectedRating);
+
+            showValue.textContent = `You rated this ${selectedRating} star${selectedRating !== '1' ? 's' : ''}`;
+
+            // Update visual state of stars
+            stars.forEach((star) => {
+                star.checked = star.value <= selectedRating;
+            });
+        }
     });
-}
+
+    console.log('Star rating initialization complete');
+});