From f1d5d5632a17d79b26f1f2a48aebc1ab36667f37 Mon Sep 17 00:00:00 2001 From: Adi Date: Tue, 23 Jan 2024 18:16:43 +0530 Subject: [PATCH] feedback --- feedback.html | 11 ++++++++++- feedback.js | 30 +++++++++++++++++++++++++++++- style_.css | 40 +++++++++++++++++++++++++++++++++++----- 3 files changed, 74 insertions(+), 7 deletions(-) diff --git a/feedback.html b/feedback.html index 9ebfec16..ec53ac9e 100644 --- a/feedback.html +++ b/feedback.html @@ -7,6 +7,7 @@ +
@@ -19,11 +20,19 @@

Rate our Service

Rating: 0

- + +
+ + +
+
+ + + diff --git a/feedback.js b/feedback.js index 5c517caf..a3705ea2 100644 --- a/feedback.js +++ b/feedback.js @@ -21,4 +21,32 @@ document.addEventListener('DOMContentLoaded', () => { const updateRating = () => { ratingText.textContent = `Rating: ${currentRating}`; }; -}); \ No newline at end of file + +}); +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 = ""; + } + }); + +} \ No newline at end of file diff --git a/style_.css b/style_.css index a7bf8454..0c38fb2b 100644 --- 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%;