Enhanced Rate Us

khushi-joshi-05 · Aug 2, 2024 · 26d2b5a · 26d2b5a
1 parent 110557e
commit 26d2b5a
Showing 1 changed file with 52 additions and 35 deletions.
diff --git a/Html-files/RateUs.html b/Html-files/RateUs.html
@@ -18,16 +18,35 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
-    <style> #progressBar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 0%;
-        height: 8px;
-        background-color: #b80d0d;
-        z-index: 9999;
-    }
-</style>
+    <style>
+        #progressBar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 8px;
+            background-color: #b80d0d;
+            z-index: 9999;
+        }
+
+        .emoji {
+            font-size: 2rem;
+            cursor: pointer;
+        }
+
+        .emoji.selected {
+            animation: shine 1s ease-in-out infinite alternate;
+        }
+
+        @keyframes shine {
+            from {
+                text-shadow: 0 0 10px gold;
+            }
+            to {
+                text-shadow: 0 0 20px gold;
+            }
+        }
+    </style>
 
 </head>
 <body>
@@ -77,10 +96,10 @@
                             <i class="fa-solid fa-gear"></i> Services
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <li><a class="dropdown-item" href="#">Ordering options</a></li>
-                            <li><a class="dropdown-item" href="#">Order Tracking</a></li>
-                            <li><a class="dropdown-item" href="#">Customer Support</a></li>
-                            <li><a class="dropdown-item" href="#">FAQS</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fa-solid fa-check"></i> Ordering options</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fa-solid fa-truck"></i> Order Tracking</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fa-solid fa-headset"></i> Customer Support</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fa-solid fa-question"></i> FAQS</a></li>
                         </ul>
                     </li>
                     <li class="nav-item">
@@ -132,12 +151,12 @@
 
     <div class="rateus-container">
         <h2 class="rateus-heading">Rate Us</h2>
-        <div class="star-rating">
-            <i class="fa fa-star star" id="star1" onclick="rateStar(1)"></i>
-            <i class="fa fa-star star" id="star2" onclick="rateStar(2)"></i>
-            <i class="fa fa-star star" id="star3" onclick="rateStar(3)"></i>
-            <i class="fa fa-star star" id="star4" onclick="rateStar(4)"></i>
-            <i class="fa fa-star star" id="star5" onclick="rateStar(5)"></i>
+        <div class="emoji-rating">
+            <span class="emoji" id="emoji1" onclick="rateEmoji(1)">😡</span>
+            <span class="emoji" id="emoji2" onclick="rateEmoji(2)">😟</span>
+            <span class="emoji" id="emoji3" onclick="rateEmoji(3)">😐</span>
+            <span class="emoji" id="emoji4" onclick="rateEmoji(4)">😊</span>
+            <span class="emoji" id="emoji5" onclick="rateEmoji(5)">😍</span>
         </div>
         <textarea class="feedback-textarea" id="feedback" placeholder="Leave your feedback here..." rows="4"></textarea>
         <button class="submit-button" onclick="submitFeedback()">Submit</button>
@@ -157,34 +176,33 @@ <h2 class="rateus-heading">Rate Us</h2>
     <script>
         document.getElementById("copyright-year").textContent = new Date().getFullYear();
 
-        function rateStar(star) {
-            for (let i = 1; i <= 5; i++) {
-                const starElement = document.getElementById(`star${i}`);
-                starElement.classList.remove('selected');
-                if (i <= star) {
-                    starElement.classList.add('selected');
-                }
-            }
+        function rateEmoji(clickedEmoji) {
+            // Remove 'selected' class from all emojis
+            document.querySelectorAll('.emoji').forEach(emoji => {
+                emoji.classList.remove('selected');
+            });
+
+            // Add 'selected' class to only the clicked emoji
+            const emojiElement = document.getElementById(`emoji${clickedEmoji}`);
+            emojiElement.classList.add('selected');
         }
 
         function submitFeedback() {
             const feedback = document.getElementById('feedback').value.trim();
-            const stars = document.querySelectorAll('.star.selected').length;
+            const emojis = document.querySelectorAll('.emoji.selected').length;
 
-            if (stars > 0 && feedback !== '') {
-                // Simulating success for demonstration
+            if (emojis > 0 && feedback !== '') {
                 Toastify({
                     text: 'Feedback submitted successfully!',
                     backgroundColor: 'green',
-                    position :'center',
+                    position: 'center',
                     duration: 3000
                 }).showToast();
             } else {
-                // Simulating failure for demonstration
                 Toastify({
                     text: 'Please rate and provide feedback.',
                     backgroundColor: 'red',
-                    positon:'center',
+                    position: 'center',
                     duration: 3000
                 }).showToast();
             }
@@ -200,6 +218,5 @@ <h2 class="rateus-heading">Rate Us</h2>
     </script>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 
-
 </body>
 </html>