diff --git a/Css-files/feedback.css b/Css-files/feedback.css new file mode 100644 index 00000000..67b8fca8 --- /dev/null +++ b/Css-files/feedback.css @@ -0,0 +1,44 @@ +body { + background: #f6c7c3; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + + .feedback-form { + background: #fff; + font-family:Georgia, 'Times New Roman', Times, serif; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 400px; + } + + .rating { + display: flex; + gap: 5px; + cursor: pointer; + } + + .rating i { + font-size: 1.5rem; + color: #ccc; + } + + .rating i.active { + color: #f39c12; + } + + .submit-btn { + background-color: rgb(138, 37, 37); + color: white; + border: none; + } + + .submit-btn:hover { + background-color:rgb(125, 23, 23); + color: white; + } + + \ No newline at end of file diff --git a/Html-files/feedback.html b/Html-files/feedback.html new file mode 100644 index 00000000..a1847ad4 --- /dev/null +++ b/Html-files/feedback.html @@ -0,0 +1,85 @@ + + +
+ + +Exclusive Offers
diff --git a/script/feedback.js b/script/feedback.js new file mode 100644 index 00000000..1cfa0f2d --- /dev/null +++ b/script/feedback.js @@ -0,0 +1,42 @@ +const stars = document.querySelectorAll('#rating i'); + const submitButton = document.getElementById('submitFeedback'); + + let selectedRating = 0; + + // Handle star rating click + stars.forEach((star, index) => { + star.addEventListener('click', () => { + selectedRating = index + 1; + updateStars(selectedRating); + }); + }); + + function updateStars(rating) { + stars.forEach((star, index) => { + if (index < rating) { + star.classList.add('active'); + } else { + star.classList.remove('active'); + } + }); + } + + // Handle submit button click + submitButton.addEventListener('click', () => { + const feedbackType = document.getElementById('feedbackType').value; + const comments = document.getElementById('comments').value; + const fileUpload = document.getElementById('fileUpload').files[0]; + + if (!feedbackType || !selectedRating || !comments) { + alert('Please fill in all required fields.'); + return; + } + + alert('Feedback submitted successfully!'); + console.log({ + feedbackType, + selectedRating, + comments, + file: fileUpload ? fileUpload.name : 'No file uploaded' + }); + }); \ No newline at end of file