+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f46f28b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,75 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const form = document.getElementById('multi-step-form');
+ const steps = document.querySelectorAll('.form-step');
+ const nextBtns = document.querySelectorAll('.next-step');
+ const prevBtns = document.querySelectorAll('.prev-step');
+ const summary = document.getElementById('summary');
+ let currentStep = 0;
+
+ nextBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ if (validateStep()) {
+ steps[currentStep].classList.remove('active');
+ currentStep++;
+ if (currentStep < steps.length) {
+ steps[currentStep].classList.add('active');
+ }
+ if (currentStep === steps.length - 1) {
+ displaySummary();
+ }
+ }
+ });
+ });
+
+ prevBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ steps[currentStep].classList.remove('active');
+ currentStep--;
+ steps[currentStep].classList.add('active');
+ });
+ });
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ alert('Form successfully submitted!');
+ form.reset();
+ steps[currentStep].classList.remove('active');
+ currentStep = 0;
+ steps[currentStep].classList.add('active');
+ });
+
+ function validateStep() {
+ let stepIsValid = true;
+ const currentInputs = steps[currentStep].querySelectorAll('input, textarea');
+ currentInputs.forEach(input => {
+ if (!input.checkValidity()) {
+ input.reportValidity();
+ stepIsValid = false;
+ }
+ });
+ return stepIsValid;
+ }
+
+ function displaySummary() {
+ const name = document.getElementById('name').value || 'N/A';
+ const email = document.getElementById('email').value || 'N/A';
+ const prefs = Array.from(document.querySelectorAll('input[name="pref"]:checked')).map(el => el.value).join(', ') || 'None';
+ const comments = document.getElementById('comments').value || 'None';
+
+ summary.innerHTML = `
+ Name: ${name}
+Email: ${email}
+Preferences: ${prefs}
+Comments: ${comments}
+ `; + } + + // Initialize steps + steps.forEach((step, index) => { + if (index !== currentStep) { + step.classList.remove('active'); + } else { + step.classList.add('active'); + } + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..460b156 --- /dev/null +++ b/style.css @@ -0,0 +1,169 @@ +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #1abc9c, #16a085); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + overflow: hidden; +} + +form { + width: 90%; + max-width: 600px; + background: rgba(255, 255, 255, 0.95); + padding: 3em; + border-radius: 20px; + box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.form-step { + position: absolute; + width: 100%; + opacity: 0; + transform: scale(0.8) translateY(50px); + transition: all 0.5s ease; +} + +.form-step.active { + opacity: 1; + transform: scale(1) translateY(0); + position: relative; +} + +.step-header { + position: absolute; + top: -30px; + right: 30px; + background: #16a085; + color: #fff; + padding: 0.5em 1em; + border-radius: 30px; + font-weight: 600; + animation: slideIn 0.5s forwards; +} + +h2 { + margin-bottom: 1em; + color: #333; + font-weight: 600; + text-align: center; + animation: fadeInDown 0.5s ease-in-out; +} + +label { + display: block; + margin-top: 1em; + color: #555; + font-weight: 500; + animation: fadeInUp 0.5s ease-in-out; +} + +input[type="text"], +input[type="email"], +input[type="file"], +textarea { + width: 100%; + padding: 0.75em 1em; + margin-top: 0.5em; + border: 2px solid #ddd; + border-radius: 10px; + font-size: 1em; + outline: none; + transition: border-color 0.3s; + animation: fadeInUp 0.5s ease-in-out; +} + +input:focus, +textarea:focus { + border-color: #1abc9c; +} + +input[type="checkbox"] { + margin-right: 0.5em; +} + +.buttons { + display: flex; + justify-content: space-between; + margin-top: 2em; + animation: fadeInUp 0.5s ease-in-out; +} + +button { + padding: 0.75em 2em; + border: none; + border-radius: 30px; + cursor: pointer; + font-size: 1em; + font-weight: 600; + transition: background 0.3s, transform 0.3s, box-shadow 0.3s; +} + +.next-step, +.prev-step { + background: #1abc9c; + color: #fff; +} + +.next-step:hover, +.prev-step:hover { + background: #16a085; + transform: translateY(-3px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +button[type="submit"] { + background: #e74c3c; + color: #fff; + margin-left: auto; +} + +button[type="submit"]:hover { + background: #c0392b; + transform: translateY(-3px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); +} + +#summary p { + margin: 1em 0; + color: #333; + font-weight: 500; + animation: fadeInUp 0.5s ease-in-out; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +}