Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Swag Shipment Form #1397

Merged
merged 12 commits into from
Dec 12, 2024
+196 −4
Merged

Added Swag Shipment Form #1397

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
89d90ca
Added infinite-scroll-emoji background to Components and assets > bac…
abhirajadhikary06 Dec 9, 2024
20ef8da
made responsive across all device and upgraded the CSS of the page
abhirajadhikary06 Dec 9, 2024
fe949b2
Merge branch 'main' into feedback-form-2
Rakesh9100 Dec 9, 2024
6077a1b
Added changes
Rakesh9100 Dec 9, 2024
9cc2c6f
added html, css and js for Swag Shipment Form
abhirajadhikary06 Dec 10, 2024
ef085e2
Made form responsive for all device
abhirajadhikary06 Dec 10, 2024
526ce86
Merge branch 'Rakesh9100:main' into address-form
abhirajadhikary06 Dec 11, 2024
f5f6d4a
added Swag Shipment Form to forms.html
abhirajadhikary06 Dec 11, 2024
330b058
Enhanced UI of the form
abhirajadhikary06 Dec 11, 2024
bdbfbfd
Added changes
Rakesh9100 Dec 12, 2024
518cec6
Changes
Rakesh9100 Dec 12, 2024
4e8b4dc
Merge branch 'main' into address-form
Rakesh9100 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 39 additions & 34 deletions Components/Forms/Feedback-Form-2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,53 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"/>
<title>Feedback Form</title>
<link rel="stylesheet" href="style.css">
<title>Feedback Form-2</title>
</head>
<body>
<div id="modal" class="modal-content">
<span class="close">&times;</span>
<h2>FEEDBACK FORM</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<form id="feedback-form">
<div class="form-group">
<div class="icon">
<i class="fas fa-user"></i>
<div class="container">
<div id="modal" class="modal-content">
<span class="close">&times;</span>
<h2>FEEDBACK FORM</h2>
<p>We value your opinion. Share your thoughts and help us improve!</p>
<form id="feedback-form">
<div class="form-group">
<div class="icon">
<i class="fas fa-user"></i>
</div>
<input type="text" placeholder="Your Name" name="name" required>
</div>
<input type="text" placeholder="Your Name" name="name" required>
</div>
<div class="form-group">
<div class="icon">
<i class="fas fa-envelope"></i>
<div class="form-group">
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<input type="email" placeholder="Email Address" name="email" required>
</div>
<input type="email" placeholder="Email Id" name="email" required>
</div>
<div class="form-group">
<textarea cols="30" rows="5" placeholder="Your Feedback" name="feedback" required></textarea>
<div class="form-group">
<div class="icon">
<i class="fas fa-comment"></i>
</div>
<textarea placeholder="Your Detailed Feedback" name="feedback" required></textarea>
</div>
<div class="rating">
<h2>Rate Our Service:</h2>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
</div>
<button type="submit" disabled>Submit Feedback</button>
</form>
<div id="thank-you-message" style="display:none;">
Thank you for your valuable feedback!
</div>
<div class="rating">
<h2>Rate us:</h2>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<i class="rating__star far fa-star"></i>
<div id="error-message" style="display:none;">
Please complete all fields and rate us!
</div>
<button type="submit" disabled>Submit</button>
</form>
<div id="thank-you-message" style="display:none; font-size:20px; color: green; margin-top: 20px;">
Thank you for your feedback!
</div>
<div id="error-message" style="display:none; color: red;font-size:20px; margin-top: 20px;">
Please fill in all fields before submitting.
</div>
</div>
<script src="script.js"></script>
</body>
</html>
16 changes: 8 additions & 8 deletions Components/Forms/Feedback-Form-2/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const feedbackForm = document.getElementById('feedback-form');
const submitButton = document.querySelector("#feedback-form button[type='submit']");
const thankYouMessage = document.getElementById('thank-you-message');
Expand All @@ -24,12 +24,12 @@ document.addEventListener('DOMContentLoaded', function() {
return false;
}

feedbackForm.addEventListener('submit', function(event) {
feedbackForm.addEventListener('submit', function (event) {
event.preventDefault();
if (allFieldsFilled() && ratingSelected()) {
thankYouMessage.style.display = 'block';
errorMessage.style.display = 'none';
setTimeout(function() {
setTimeout(function () {
thankYouMessage.style.display = 'none';
}, 3000);
feedbackForm.reset();
Expand All @@ -40,13 +40,13 @@ document.addEventListener('DOMContentLoaded', function() {
} else {
thankYouMessage.style.display = 'none';
errorMessage.style.display = 'block';
setTimeout(function() {
setTimeout(function () {
errorMessage.style.display = 'none';
}, 3000);
}
});

feedbackForm.addEventListener("input", function() {
feedbackForm.addEventListener("input", function () {
if (allFieldsFilled()) {
submitButton.removeAttribute("disabled");
} else {
Expand All @@ -68,13 +68,13 @@ document.addEventListener('DOMContentLoaded', function() {

executeRating(ratingStars);

document.querySelector('.close').addEventListener('click', function() {
document.querySelector('.close').addEventListener('click', function () {
document.getElementById('modal').style.display = 'none';
});

window.onclick = function(event) {
window.onclick = function (event) {
if (event.target == document.getElementById('modal')) {
document.getElementById('modal').style.display = 'none';
}
};
});
});
Loading
Loading