Merge pull request #309 from KanwalpreetSingh1823/newFeature

Feedback Section Added in the Website
PriyaGhosal · Oct 8, 2024 · 5bdf9f3 · 5bdf9f3
2 parents 1c943f4 + 28b2d5c
commit 5bdf9f3
Show file tree

Hide file tree

Showing 3 changed files with 249 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -442,6 +442,136 @@ body.nav-active { overflow: hidden; }
 }
 
 
+/*-----------------------------------*\
+  #Feedback
+\*-----------------------------------*/
+
+.feedback-Section{
+  display: flex;
+  flex-direction: column;
+  border:1px solid black;
+  padding: 3rem;
+}
+
+.feedback-button {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  background-color: hsl(357, 100%, 75%);
+  color: white;
+  padding: 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  z-index: 1000;
+}
+
+.feedback-modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 300px;
+  text-align: center;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.emojis {
+  font-size: 30px;
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.emoji {
+  cursor: pointer;
+  margin: 0 10px;
+  transition: transform 0.2s;
+}
+
+.emoji:hover {
+  transform: scale(1.2);
+}
+
+.emoji.selected {
+  border: 1px solid black; /* Highlight selected emoji */
+  border-radius: 5px;
+}
+
+
+.buttons{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+textarea, input[type="email"] {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+.feedbackPopUp{
+  position: fixed;
+  transform: translate(120%);
+  transition: all 1s ease-in-out;
+  right: 20px;
+  bottom: 100px;
+  background-color: hsl(357, 100%, 75%);
+  color: white;
+  padding: 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  z-index: 1000;
+}
+
+.PopUpDisplay{
+  transition: all 1.5s ease-in-out;
+  transform: translate(0);
+}
 
 
 

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -67,4 +67,78 @@ const headerActive = function () {
 document.getElementById('year').textContent = new Date().getFullYear();
 
 
-window.addEventListener("scroll", headerActive);
+window.addEventListener("scroll", headerActive);
+
+
+// Feedback Section
+let selectedEmotion = '';
+
+document.getElementById('feedbackButton').onclick = function() {
+    document.getElementById('feedbackModal').style.display = 'flex';
+}
+
+document.getElementById('closeModal').onclick = function() {
+    document.getElementById('feedbackModal').style.display = 'none';
+}
+
+document.getElementById('nextToFeedback').onclick = function() {
+    const selectedEmoji = document.querySelector('.emoji.selected');
+    if (!selectedEmoji) {
+        alert('Please select an emotion!');
+        return;
+    }
+    selectedEmotion = selectedEmoji.dataset.value;
+    document.getElementById('step1').style.display = 'none';
+    document.getElementById('step2').style.display = 'block';
+}
+
+document.querySelectorAll('.emoji').forEach(emoji => {
+    emoji.onclick = function() {
+        document.querySelectorAll('.emoji').forEach(e => e.classList.remove('selected'));
+        emoji.classList.add('selected');
+    }
+});
+
+document.getElementById('nextToEmail').onclick = function() {
+    if (!document.getElementById('feedback').value) {
+        alert('Please provide your feedback!');
+        return;
+    }
+    document.getElementById('step2').style.display = 'none';
+    document.getElementById('step3').style.display = 'block';
+}
+
+document.getElementById('backToEmoji').onclick = function() {
+    document.getElementById('step2').style.display = 'none';
+    document.getElementById('step1').style.display = 'block';
+}
+
+document.getElementById('backToFeedback').onclick = function() {
+    document.getElementById('step3').style.display = 'none';
+    document.getElementById('step2').style.display = 'block';
+}
+
+window.onload = () => {
+  if (sessionStorage.getItem('showPopUp') === 'true') {
+      popUpDisplay();
+      sessionStorage.removeItem('showPopUp'); 
+  }
+};
+
+document.getElementById('feedbackForm').onsubmit = function(event) {
+  event.preventDefault();
+  document.getElementById('feedbackForm').reset();
+  document.getElementById('feedbackModal').style.display = 'none';
+
+  sessionStorage.setItem('showPopUp', 'true'); // Set a flag to show pop-up after reload
+  window.location.reload(); 
+};
+
+const popUpDisplay = () => {
+  setTimeout(() => {
+      document.querySelector('.feedbackPopUp').style.transform = 'translate(0)';
+      setTimeout(() => {
+          document.querySelector('.feedbackPopUp').style.transform = 'translate(120%)';
+      }, 3000);
+  }, 1000);
+};
diff --git a/index.html b/index.html
@@ -206,7 +206,51 @@ <h1 class="headline-lg" id="hero-label" data-aos="zoom-out">
       </section>
 
 
+     <!--
+        Feedback Section
+      -->
+      <div class="feedback-button" id="feedbackButton">Feedback</div>
+    <div class="feedback-modal" id="feedbackModal">
+        <div class="modal-content">
+            <span class="close" id="closeModal">&times;</span>
+            <h2>We Value Your Feedback</h2>
+            <form id="feedbackForm">
+                <div class="step" id="step1">
+                    <h3>How do you feel?</h3>
+                    <div class="emojis">
+                        <span class="emoji" data-value="happy">😀</span>
+                        <span class="emoji" data-value="neutral">😐</span>
+                        <span class="emoji" data-value="sad">😢</span>
+                    </div>
+                    <button type="button" id="nextToFeedback">Next</button>
+                </div>
 
+                <div class="step" id="step2" style="display: none;">
+                    <h3>Your Feedback</h3>
+                    <textarea id="feedback" rows="5" placeholder="Write your feedback here..." required></textarea>
+                    <div class="buttons">
+                      <button type="button" id="nextToEmail">Next</button>
+                    <button type="button" id="backToEmoji">Back</button>
+                    </div>
+                </div>
+
+                <div class="step" id="step3" style="display: none;">
+                    <h3>Your Email</h3>
+                    <input type="email" id="email" placeholder="Enter your email" required />
+                   <div class="buttons">
+                    <button type="submit" id="submitForm">Submit Feedback</button>
+                    <button type="button" id="backToFeedback">Back</button>
+                   </div>
+                </div>
+              </form>
+        </div>
+    </div>
+
+
+    <div class="feedbackPopUp">
+      Thank you for your Feedback
+    </div>
+
 
 
       <!--