Merge pull request #1032 from Damini2004/Animated-Emoji

Animated emoji Addition

index.html

@@ -615,15 +615,24 @@ <h2>We'd Love Your Feedback!</h2>
       <p>Let us know how we're doing and how we can improve. <br /> <span style="color: hwb(181 21% 19%);"><strong>RapiDoc</strong> Healthcare</p>
       <p>This is a confused face emoji: &#x1f615;</p>
       <div>
-        <label for="rating" class="rate-us"> <strong>Please Rate us below</strong></label>
-        <div class="rating-container">
-          <button type="button" onclick="handleRatingChange(1)">😡</button>
-          <button type="button" onclick="handleRatingChange(2)">☹️</button>
-          <button type="button" onclick="handleRatingChange(3)">😐</button>
-          <button type="button" onclick="handleRatingChange(4)">🙂</button>
-          <button type="button" onclick="handleRatingChange(5)">😄</button>
+
+
+                           <label for="rating" class="rate-us"> <strong>Please Rate us below</strong></label>
+
+      <div class="container" style="text-align: center;" >
+        <div class="emoji-gifs">
+          <img src="emoji1.gif" alt="Emoji 1" class="emoji-gif" data-emoji="😡" data-gif-src="emoji1.gif" width="50px" height="50px" >
+          <img src="emoji2.gif" alt="Emoji 2" class="emoji-gif" data-emoji="☹️" data-gif-src="emoji2.gif" width="50px" height="50px" >
+          <img src="emoji3.gif" alt="Emoji 3" class="emoji-gif" data-emoji="😐" data-gif-src="emoji3.gif" width="50px" height="50px" >
+          <img src="emoji5.gif" alt="Emoji 4" class="emoji-gif" data-emoji="😊" data-gif-src="emoji5.gif" width="50px" height="50px" >
+          <img src="emoji4.gif" alt="Emoji 5" class="emoji-gif" data-emoji="😍" data-gif-src="emoji4.gif" width="50px" height="50px" >
+     </div>
+        <div class="selected-emoji" style="text-align: center;" >
+            <p>You selected: <span id="selected-emoji"></span></p>
+            <img  id="selected-gif" src="" alt="Selected GIF" width="50px" height="50px"  >
+
         </div>
-      </div>
+    </div>
       <form id="feedback-form" onsubmit="handleSubmit(event)">
         <label for="name">Your Name</label>
         <input type="text" id="name" placeholder="Enter your name" required>

js/feedbackmessage.js

@@ -8,7 +8,7 @@
         }, 3000);
       }
 
-/* Rating */
+// /* Rating */
 let rating = null;
 
 function handleRatingChange(value) {
@@ -28,16 +28,30 @@ function handleRatingChange(value) {
           });
       }
 
-      function getEmoji(rating) {
-          switch(rating) {
-              case 1: return '😡';
-              case 2: return '☹️';
-              case 3: return '😐';
-              case 4: return '🙂';
-              case 5: return '😄';
-              default: return '😐';
-          }
-      }
+// script.js
+const emojiGifs = document.querySelectorAll('.emoji-gif');
+const selectedEmojiElement = document.getElementById('selected-emoji');
+const selectedGifElement = document.getElementById('selected-gif');
+
+emojiGifs.forEach(gif => {
+    gif.addEventListener('click', () => {
+        const emoji = gif.getAttribute('data-emoji');
+        const gifSrc = gif.getAttribute('data-gif-src');
+        selectedEmojiElement.textContent = emoji;
+        selectedGifElement.src = gifSrc;
+    });
+});
+
+//       function getEmoji(rating) {
+//           switch(rating) {
+//               case 1: return '😡';
+//               case 2: return '☹️';
+//               case 3: return '😐';
+//               case 4: return '🙂';
+//               case 5: return '😄';
+//               default: return '😐';
+//           }
+//       }
 
 function handleSubmit(event) {
   event.preventDefault();
@@ -83,4 +97,6 @@ function handleScroll() {
 
 window.addEventListener('scroll', handleScroll);
 
-updateStars();
+updateStars();
+
+