Merge pull request #146 from maadi7/Feedback

feedback box added.
apu52 · Jan 23, 2024 · 9daa17e · 9daa17e
2 parents ae1a943 + f1d5d56
commit 9daa17e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 7 deletions.
diff --git a/feedback.html b/feedback.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="style_.css">
     <!-- FontAwsome-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+
 </head>
 <body>
     <div class="container">
@@ -19,11 +20,19 @@ <h1>Rate our Service</h1>
 
         <p id="rating-text">Rating: 0</p>
 
-
+         <!-- Feedback input box section -->
+         <div>
+          <label for="feedback-input">Your feedback:</label>
+          <textarea id="feedback-input" placeholder="Enter your feedback here..."></textarea>
+      </div>
+      <button class="submit-button" onclick="submitFeedback()">Submit</button>
       </div>
     <div><button class="button-36" onclick="location.href = 'index.html';">Return To Home Page</button></div>
     </div>
 </div>
+<!-- SweetAlert2 -->
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
+
     <script src="feedback.js" defer></script>
 </body>
 </html>
diff --git a/feedback.js b/feedback.js
@@ -21,4 +21,32 @@ document.addEventListener('DOMContentLoaded', () => {
     const updateRating = () => {
       ratingText.textContent = `Rating: ${currentRating}`;
     };
-});
+
+});
+function submitFeedback() {
+  var feedbackInput = document.getElementById("feedback-input");
+  var feedback = feedbackInput.value.trim();
+
+  // Check if the feedback is empty
+  if (feedback === "") {
+    // Show a SweetAlert error modal
+    Swal.fire({
+      icon: 'error',
+      title: 'Oops...',
+      text: 'Please enter your feedback before submitting.',
+    });
+    return; // Exit the function if feedback is empty
+  }
+
+  Swal.fire({
+    icon: 'success',
+    title: 'Success!',
+    text: 'Your response has been recorded.',
+  }).then((result) => {
+    // Clear the feedback input box after the user acknowledges the success modal
+    if (result.isConfirmed || result.isDismissed) {
+      feedbackInput.value = "";
+    }
+  });
+
+}
diff --git a/style_.css b/style_.css
@@ -1,4 +1,4 @@
-/*Google Fonts*/
+/* Google Fonts */
 body {
   display: flex;
   justify-content: center;
@@ -22,9 +22,9 @@ body {
   border-radius: 15px;
   padding: 20px;
   text-align: center;
-  max-width: 400px; 
-  width: 90%; 
-  margin-bottom: 20px; 
+  max-width: 400px;
+  width: 90%;
+  margin-bottom: 20px;
 }
 
 .stars {
@@ -48,6 +48,37 @@ body {
   margin-top: 10px;
 }
 
+/* Feedback input box and submit button styles */
+.feedback-container {
+  margin-top: 20px;
+}
+
+#feedback-input {
+  width: 100%;
+  height: 80px;
+  resize: vertical;
+  margin-bottom: 10px;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+
+.submit-button {
+  display: inline-block;
+  padding: 10px 20px;
+  background: #4DA0B0;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s ease-in-out;
+}
+
+.submit-button:hover {
+  background: #357c8e;
+}
+
 .button-36-container {
   margin-top: 20px;
 }
@@ -71,7 +102,6 @@ body {
   background: #357c8e;
 }
 
-
 @media (max-width: 768px) {
   .container {
     width: 80%;