From de4797af987543a2462896b1053d33b6779fc670 Mon Sep 17 00:00:00 2001
From: Kiran <kiran.in2002@gmail.com>
Date: Mon, 21 Oct 2024 21:12:32 +0530
Subject: [PATCH 1/5] Feedback form - Toast msg addition

---
 assets/css/style.css | 12 ++++++------
 assets/js/script.js  | 33 ++++++++++++++++++++++++---------
 index.html           |  8 +++++++-
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 672db37f..c9d52755 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -677,14 +677,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%);
@@ -696,6 +692,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
index 8ac10063..ab107c29 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -93,7 +93,7 @@ document.getElementById('closeModal').onclick = function() {
 document.getElementById('nextToFeedback').onclick = function() {
     const selectedEmoji = document.querySelector('.emoji.selected');
     if (!selectedEmoji) {
-        alert('Please select an emotion!');
+        selectEmotionPopUpDisplay()
         return;
     }
     selectedEmotion = selectedEmoji.dataset.value;
@@ -110,7 +110,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';
@@ -129,7 +129,7 @@ document.getElementById('backToFeedback').onclick = function() {
 
 window.onload = () => {
   if (sessionStorage.getItem('showPopUp') === 'true') {
-      popUpDisplay();
+      feedbackPopUpSuccessDisplay()
       sessionStorage.removeItem('showPopUp'); 
   }
 };
@@ -143,11 +143,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);
-};
\ No newline at end of file
+        element.style.transform = hideTranslate
+      }, delayHide)
+    }
+  }, delayShow)
+}
+
+const selectFeedbackRequestPopUp = () => {
+  showAndHidePopUp('.feedbackRequestPopUp', 100, 3000)
+}
+
+const feedbackPopUpSuccessDisplay = () => {
+  showAndHidePopUp('.feedbackPopUpSuccess', 100, 3000)
+}
+
+const selectEmotionPopUpDisplay = () => {
+  showAndHidePopUp('.selectEmotionPopUp', 100, 3000)
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index bb7c10f4..04f1fd7d 100644
--- a/index.html
+++ b/index.html
@@ -267,11 +267,17 @@ <h3>Your Email</h3>
       </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

From 6e0ed2449e23d0f844651cdbe56618539b5488af Mon Sep 17 00:00:00 2001
From: Kiran <kiran.in2002@gmail.com>
Date: Tue, 22 Oct 2024 00:42:35 +0530
Subject: [PATCH 2/5] Removed un wanted line

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 639a86ba..0e178f9a 100644
--- a/index.html
+++ b/index.html
@@ -284,7 +284,7 @@ <h3>Your Email</h3>
 
 
 
-      <div class="feedbackPopUpSuccess feedbackRequestPopUps">1
+      <div class="feedbackPopUpSuccess feedbackRequestPopUps">
         Thank you for your Feedback
       </div>
 

From 07e46d27e7cd49135aac05a5c26194f55c2da97b Mon Sep 17 00:00:00 2001
From: Kiran <kiran.in2002@gmail.com>
Date: Tue, 22 Oct 2024 00:57:54 +0530
Subject: [PATCH 3/5] Vercel

---
 assets/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 2ad4381c..d64d8f65 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -675,7 +675,7 @@ body.nav-active .navbar-list .navbar-link {
 }
 
 textarea,
-input[type="email"] {
+input[type="email"] { 
   width: 100%;
   padding: 10px;
   margin: 10px 0;

From 43e8be0f78e0231613b132be0d70bf2879d4763e Mon Sep 17 00:00:00 2001
From: Kiran <kiran.in2002@gmail.com>
Date: Tue, 22 Oct 2024 00:58:56 +0530
Subject: [PATCH 4/5] Vercel

---
 assets/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index d64d8f65..2ad4381c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -675,7 +675,7 @@ body.nav-active .navbar-list .navbar-link {
 }
 
 textarea,
-input[type="email"] { 
+input[type="email"] {
   width: 100%;
   padding: 10px;
   margin: 10px 0;

From cb648357fe6f262b7f9b448101fd77cedf028220 Mon Sep 17 00:00:00 2001
From: Kiran <kiran.in2002@gmail.com>
Date: Tue, 22 Oct 2024 00:59:40 +0530
Subject: [PATCH 5/5] Vercel test

---
 assets/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 2ad4381c..4dcf853f 100644
--- 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;
 }