Merge pull request #785 from kiran1901/feedback-improvements

Feedback form - Toast msg addition
PriyaGhosal · Oct 22, 2024 · 10180f0 · 10180f0
2 parents 08d7447 + cb64835
commit 10180f0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -679,7 +679,7 @@ input[type="email"] {
   width: 100%;
   padding: 10px;
   margin: 10px 0;
-  border: 1px solid #ccc;
+  border: 1px solid #ccc; 
   border-radius: 4px;
 }
 
@@ -692,14 +692,10 @@ button {
   cursor: pointer;
 }
 
-button:hover {
-  background-color: #45a049;
-}
-
-.feedbackPopUp {
+.feedbackRequestPopUps {
   position: fixed;
   transform: translate(120%);
-  transition: all 1s ease-in-out;
+  transition: all 0.1s ease-in-out;
   right: 20px;
   bottom: 100px;
   background-color: hsl(357, 100%, 75%);
@@ -711,6 +707,10 @@ button:hover {
   z-index: 1000;
 }
 
+button:hover {
+  background-color: #45a049;
+}
+
 .PopUpDisplay {
   transition: all 1.5s ease-in-out;
   transform: translate(0);

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -92,9 +92,8 @@ document.getElementById('closeModal').onclick = function() {
 
 document.getElementById('nextToFeedback').onclick = function() {
     const selectedEmoji = document.querySelector('.emoji.selected');
-    if (!selectedEmoji) {    
-        document.getElementsByClassName('emojis')[0].style.margin="0 0 20px 0";
-        document.getElementById('emoji-not-selected').removeAttribute("hidden");
+    if (!selectedEmoji) {
+        selectEmotionPopUpDisplay()
         return;
       }
     selectedEmotion = selectedEmoji.dataset.value;
@@ -114,7 +113,7 @@ document.querySelectorAll('.emoji').forEach(emoji => {
 
 document.getElementById('nextToEmail').onclick = function() {
     if (!document.getElementById('feedback').value) {
-        alert('Please provide your feedback!');
+        selectFeedbackRequestPopUp()
         return;
     }
     document.getElementById('step2').style.display = 'none';
@@ -133,7 +132,7 @@ document.getElementById('backToFeedback').onclick = function() {
 
 window.onload = () => {
   if (sessionStorage.getItem('showPopUp') === 'true') {
-      popUpDisplay();
+      feedbackPopUpSuccessDisplay()
       sessionStorage.removeItem('showPopUp'); 
   }
 };
@@ -147,11 +146,26 @@ document.getElementById('feedbackForm').onsubmit = function(event) {
   window.location.reload(); 
 };
 
-const popUpDisplay = () => {
+const showAndHidePopUp = (selector, delayShow = 100, delayHide = 3000, showTranslate = 'translate(0)', hideTranslate = 'translate(120%)') => {
   setTimeout(() => {
-      document.querySelector('.feedbackPopUp').style.transform = 'translate(0)';
+    const element = document.querySelector(selector)
+    if (element) {
+      element.style.transform = showTranslate
       setTimeout(() => {
-          document.querySelector('.feedbackPopUp').style.transform = 'translate(120%)';
-      }, 3000);
-  }, 1000);
-};
+        element.style.transform = hideTranslate
+      }, delayHide)
+    }
+  }, delayShow)
+}
+
+const selectFeedbackRequestPopUp = () => {
+  showAndHidePopUp('.feedbackRequestPopUp', 100, 3000)
+}
+
+const feedbackPopUpSuccessDisplay = () => {
+  showAndHidePopUp('.feedbackPopUpSuccess', 100, 3000)
+}
+
+const selectEmotionPopUpDisplay = () => {
+  showAndHidePopUp('.selectEmotionPopUp', 100, 3000)
+}
diff --git a/index.html b/index.html
@@ -285,15 +285,21 @@ <h3>Your Email</h3>
           </form>
         </div>
       </div>
-
-      <div class="feedbackPopUp">
+
+
+
+      <div class="feedbackPopUpSuccess feedbackRequestPopUps">
         Thank you for your Feedback
       </div>
 
+      <div class="selectEmotionPopUp feedbackRequestPopUps">
+        Please select an emotion!
+      </div>
+
+      <div class="feedbackRequestPopUp feedbackRequestPopUps">
+        Please provide your feedback!
+      </div>
 
-      <!--
-        - #CATEGORY
-      -->
 
       <section class="section category has-bg-image" aria-labelledby="category-label">
         <div class="container">