diff --git a/form.html b/form.html new file mode 100644 index 0000000..32dfe43 --- /dev/null +++ b/form.html @@ -0,0 +1,150 @@ + + + + + + Multi-Step Form + + + + +
+
+ 1 + 2 + 3 +
+
+ +
+

Personal Details

+ + + + + + + + + + + + + +
+ Male + Female + Other +
+ + + + + + +
+ +
+
+ + + + + +
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..10162cd --- /dev/null +++ b/script.js @@ -0,0 +1,216 @@ +let currentStep = 1; + +function nextStep(step) { + + if (!validateStep(currentStep)) { + return; + } + + document.getElementById(`step${currentStep}`).classList.add('hidden'); + document.getElementById(`indicator-step${currentStep}`).classList.remove('active'); + + currentStep = step; + document.getElementById(`step${currentStep}`).classList.remove('hidden'); + document.getElementById(`indicator-step${currentStep}`).classList.add('active'); + if(step === 3){ + populateReview(); + } + +} + + +function validateStep(step) { + let isValid = true; + + if (step === 1) { + isValid = validatePersonalDetails(); + } + + if (step === 2) { + isValid = validateProfessionalDetails(); + } + + + return isValid; +} + + +function validatePersonalDetails() { + let isValid = true; + + const fullname = document.getElementById("Fullname").value; + if (!fullname.match(/[a-zA-Z ]{3,}/)) { + document.getElementById("error-fullname").innerText = "Full name must be at least 3 letters"; + isValid = false; + } else { + document.getElementById("error-fullname").innerText = ""; + } + + const email = document.getElementById("email").value; + if (!email.includes('@')) { + document.getElementById("error-email").innerText = "Please enter a valid email address"; + isValid = false; + } else { + document.getElementById("error-email").innerText = ""; + } + + const phone = document.getElementById("phone").value; + if (!/^\d{10}$/.test(phone)) { + document.getElementById("error-phone").innerText = "Phone number must be exactly 10 digits"; + isValid = false; + alert("Phone number invalid. It must be exactly 10 digits."); + } else { + document.getElementById("error-phone").innerText = ""; + } + + const gender = document.querySelector('input[name="gender"]:checked'); + if (!gender) { + document.getElementById("error-gender").innerText = "Please select your gender"; + isValid = false; + } else { + document.getElementById("error-gender").innerText = ""; + } + + const age = document.getElementById("age").value; + if (age < 18 || age > 100) { + document.getElementById("error-age").innerText = "Age must be between 18 and 100"; + isValid = false; + } else { + document.getElementById("error-age").innerText = ""; + } + + return isValid; +} + + + +function validateProfessionalDetails() { + let isValid = true; + const education = document.getElementById("education").value; + if (!education) { + document.getElementById("error-education").innerText = "Please select your education"; + isValid = false; + } else { + document.getElementById("error-education").innerText = ""; + } + + + const skills = document.querySelectorAll('input[name="skills"]:checked'); + if (skills.length === 0) { + document.getElementById("error-skills").innerText = "Please select at least one skill"; + isValid = false; + } else { + document.getElementById("error-skills").innerText = ""; + } + + const experience = document.getElementById("experience").value; + if (experience < 0 || experience > 50) { + document.getElementById("error-experience").innerText = "Experience must be between 0 and 50 years"; + isValid = false; + } else { + document.getElementById("error-experience").innerText = ""; + } + + + const currentRole = document.getElementById("currentrole").value; + if (!currentRole) { + document.getElementById("error-currentrole").innerText = "Please enter your current role"; + isValid = false; + } else { + document.getElementById("error-currentrole").innerText = ""; + } + + return isValid; +} + +document.getElementById('multistepForm').addEventListener('submit', + +function (event) { + event.preventDefault(); + + const formData = new FormData(this); + const data = Object.fromEntries(formData.entries()); + + const skills = formData.getAll('skills'); + data.skills = skills; + + localStorage.setItem('formData', JSON.stringify(data)); + + const jsonData = JSON.stringify(data, null, 2); + const blob = new Blob([jsonData], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.download = 'formData.json'; + link.click(); + + alert('Form submitted successfully!'); +}); + +function loadFormData() { + const savedData = JSON.parse(localStorage.getItem('formData')); + + if (savedData) { + document.getElementById('Fullname').value = savedData.Fullname || ''; + document.getElementById('email').value = savedData.email || ''; + document.getElementById('phone').value = savedData.phone || ''; + document.getElementById('age').value = savedData.age || ''; + document.getElementById('education').value = savedData.education || ''; + document.getElementById('experience').value = savedData.experience || ''; + document.getElementById('currentrole').value = savedData.currentrole || ''; + + savedData.skills.forEach(skill => { + document.querySelector(`input[name="skills"][value="${skill}"]`).checked = true; + }); + } +} +function editStep(step){ + document.getElementById(`step${currentStep}`).classList.add('hidden'); + document.getElementById(`indicator-step${currentStep}`).classList.remove('active'); + currentStep = parseInt(step.replace('step','')); + document.getElementById(`step${currentStep}`).classList.remove('hidden'); + document.getElementById(`indicator-step${currentStep}`).classList.add('active'); +} +function populateReview() { + + const form = document.getElementById('multistepForm'); + + document.getElementById('reviewFullName').innerText = form.querySelector('#Fullname').value; + document.getElementById('reviewEmail').innerText = form.querySelector('#email').value; + document.getElementById('reviewPhone').innerText = form.querySelector('#phone').value; + document.getElementById('reviewGender').innerText = form.querySelector('input[name="gender"]:checked')?.value || 'Not specified'; + document.getElementById('reviewAge').innerText = form.querySelector('#age').value; + document.getElementById('reviewEducation').innerText = form.querySelector('#education').value; + document.getElementById('reviewExperience').innerText = form.querySelector('#experience').value; + + const skills = Array.from(form.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value); + document.getElementById('reviewSkills').innerText = skills.length > 0 ? skills.join(', ') : 'None selected'; + + document.getElementById('reviewCurrentRole').innerText = form.querySelector('#currentrole').value; +} +function clearform() { + const form = document.getElementById('multistepForm'); + form.reset(); + localStorage.removeItem('formData'); + document.getElementById('reviewFullName').innerText = ""; + document.getElementById('reviewEmail').innerText = ""; + document.getElementById('reviewPhone').innerText = ""; + document.getElementById('reviewGender').innerText = ""; + document.getElementById('reviewAge').innerText = ""; + document.getElementById('reviewEducation').innerText = ""; + document.getElementById('reviewExperience').innerText = ""; + document.getElementById('reviewSkills').innerText = ""; + document.getElementById('reviewCurrentRole').innerText = ""; + + document.getElementById('step1').classList.remove('hidden'); + document.getElementById('indicator-step1').classList.add('active'); + + for (let i = 2; i <= 3; i++) { + document.getElementById(`step${i}`).classList.add('hidden'); + document.getElementById(`indicator-step${i}`).classList.remove('active'); + } + currentStep = 1; +} + +window.onload = loadFormData; + diff --git a/style.css b/style.css new file mode 100644 index 0000000..4bb0fb6 --- /dev/null +++ b/style.css @@ -0,0 +1,155 @@ + +body { + background-image: url('https://images.pexels.com/photos/4951280/pexels-photo-4951280.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); + background-repeat: no-repeat; + background-size: cover; + font-family: Arial, Helvetica, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.formContainer { + background: #49a1bc; + padding: 20px; + border-radius: 9px; + width: 100%; + max-width: 450px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + margin-bottom: 20px; + color: white; +} + +label { + display: block; + margin-top: 10px; + color: white; +} + +input, select { + width: 100%; + padding: 8px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 3px; + box-sizing: border-box; +} + +input[type="radio"], input[type="checkbox"] { + width: auto; + margin-right: 5px; +} + +input:invalid { + border-color: red; +} + +.error { + color: red; + font-size: 12px; + margin-top: 5px; +} + +.gender { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 10px; +} +.skill { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} +.skill label{ + display: flex; + align-items: center; + gap: 5px; +} +.skill input[type="checkbox"] { + width: auto; +} + +.form-navigation { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +button { + background: #0E3949; + color: white; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + border: none; +} + +button:hover { + background-color: #17A1B4; +} + +button:disabled { + background-color: #ccc; + cursor: not-allowed; +} + +.step-indicator { + text-align: center; + margin-bottom: 20px; +} + +.step-indicator span { + display: inline-block; + width: 20px; + height: 20px; + margin: 0 5px; + border-radius: 50%; + background: white; + line-height: 20px; + color: black; +} + +.step-indicator .active { + background: #21B2DC; +} + +.hidden { + display: none; +} + + +button[type="button"]:disabled { + background-color: #ccc; +} + + +#review { + margin-top: 20px; + background: #fff; + padding: 15px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} +@media (max-width: 500px) { + .formContainer { + width: 100%; + padding: 15px; + } + + h1 { + font-size: 20px; + } + + .step-indicator span { + width: 15px; + height: 15px; + line-height: 15px; + } +}