diff --git a/index.html b/index.html new file mode 100644 index 0000000..4fc4d4e --- /dev/null +++ b/index.html @@ -0,0 +1,101 @@ + + + + + + Form Navigation + + + + + + + + +
+

Personal Details Form

+ + + + + + + + + + + + + +
+ Male + Female + Other +
+ + + + + +
+ +
+
+ + + + + + + + + + + + + + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..1b46681 --- /dev/null +++ b/scripts.js @@ -0,0 +1,212 @@ +document.addEventListener('DOMContentLoaded', () => { + const personalDetailsForm = document.getElementById('personalDetailsForm'); + const professionalDetailsForm = document.getElementById('professionalDetailsForm'); + const summarySection = document.getElementById('summary'); + const finalSubmitButton = document.getElementById('finalSubmit'); + const personalSummary = document.getElementById('personalSummary'); + const professionalSummary = document.getElementById('professionalSummary'); + const successMessage = document.getElementById('successMessage'); + const formData = {}; // Store form data + + // Real-time validation for personal details + document.getElementById('fullName').addEventListener('input', () => { + const fullName = document.getElementById('fullName').value.trim(); + const error = document.getElementById('nameError'); + if (!/^[a-zA-Z\s]{3,}$/.test(fullName)) { + error.textContent = 'Full Name must be at least 3 characters and contain no numbers.'; + } else { + error.textContent = ''; + } + }); + + document.getElementById('email').addEventListener('input', () => { + const email = document.getElementById('email').value.trim(); + const error = document.getElementById('emailError'); + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + error.textContent = 'Please enter a valid email address.'; + } else { + error.textContent = ''; + } + }); + + document.getElementById('phone').addEventListener('input', () => { + const phone = document.getElementById('phone').value.trim(); + const error = document.getElementById('phoneError'); + if (!/^\d{10}$/.test(phone)) { + error.textContent = 'Phone number must be exactly 10 digits.'; + } else { + error.textContent = ''; + } + }); + + document.querySelectorAll('input[name="gender"]').forEach((input) => { + input.addEventListener('change', () => { + const gender = document.querySelector('input[name="gender"]:checked'); + const error = document.getElementById('genderError'); + if (!gender) { + error.textContent = 'Please select a gender.'; + } else { + error.textContent = ''; + } + }); + }); + + document.getElementById('age').addEventListener('input', () => { + const age = document.getElementById('age').value.trim(); + const error = document.getElementById('ageError'); + if (age < 18 || age > 100 || !age) { + error.textContent = 'Age must be between 18 and 100.'; + } else { + error.textContent = ''; + } + }); + + // Real-time validation for professional details + document.getElementById('education').addEventListener('change', () => { + const education = document.getElementById('education').value; + const error = document.getElementById('educationError'); + if (!education) { + error.textContent = 'Please select your education.'; + } else { + error.textContent = ''; + } + }); + + document.querySelectorAll('input[name="skills"]').forEach((input) => { + input.addEventListener('change', () => { + const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value); + const error = document.getElementById('skillsError'); + if (skills.length === 0) { + error.textContent = 'Please select at least one skill.'; + } else { + error.textContent = ''; + } + }); + }); + + document.getElementById('experience').addEventListener('input', () => { + const experience = document.getElementById('experience').value.trim(); + const error = document.getElementById('experienceError'); + if (experience < 0 || experience > 50 || !experience) { + error.textContent = 'Experience must be between 0 and 50 years.'; + } else { + error.textContent = ''; + } + }); + + document.getElementById('currentRole').addEventListener('input', () => { + const currentRole = document.getElementById('currentRole').value.trim(); + const error = document.getElementById('roleError'); + if (!currentRole) { + error.textContent = 'Please enter your current role.'; + } else { + error.textContent = ''; + } + }); + + // Handle "Previous" button click to switch between forms + document.getElementById('prevButton').addEventListener('click', () => { + professionalDetailsForm.style.display = 'none'; + personalDetailsForm.style.display = 'block'; + }); + + // Form submission handler + document.querySelectorAll('form').forEach((form) => { + form.addEventListener('submit', (event) => { + event.preventDefault(); + + // Clear previous error messages + document.querySelectorAll('.error-message').forEach((error) => { + error.textContent = ''; + }); + + let isValid = true; + + try { + if (form.id === 'personalDetailsForm') { + // Validate personal details on submission + const fullName = document.getElementById('fullName').value.trim(); + const email = document.getElementById('email').value.trim(); + const phone = document.getElementById('phone').value.trim(); + const gender = document.querySelector('input[name="gender"]:checked'); + const age = document.getElementById('age').value.trim(); + + if (!/^[a-zA-Z\s]{3,}$/.test(fullName)) isValid = false; + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) isValid = false; + if (!/^\d{10}$/.test(phone)) isValid = false; + if (!gender) isValid = false; + if (age < 18 || age > 100 || !age) isValid = false; + + if (isValid) { + formData.personalDetails = { fullName, email, phone, gender: gender.value, age }; + personalDetailsForm.style.display = 'none'; + professionalDetailsForm.style.display = 'block'; + } + } else if (form.id === 'professionalDetailsForm') { + // Validate professional details on submission + const education = document.getElementById('education').value; + const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value); + const experience = document.getElementById('experience').value.trim(); + const currentRole = document.getElementById('currentRole').value.trim(); + + if (!education) isValid = false; + if (skills.length === 0) isValid = false; + if (experience < 0 || experience > 50 || !experience) isValid = false; + if (!currentRole) isValid = false; + + if (isValid) { + formData.professionalDetails = { education, skills, experience, currentRole }; + localStorage.setItem('formData', JSON.stringify(formData)); + + // Populate the summary section with the form data + personalSummary.innerHTML = ` +

Personal Details

+ 
${JSON.stringify(formData.personalDetails, null, 2)}
+ `; + professionalSummary.innerHTML = ` +

Professional Details

+ 
${JSON.stringify(formData.professionalDetails, null, 2)}
+ `; + professionalDetailsForm.style.display = 'none'; + summarySection.style.display = 'block'; + } + } + } catch (error) { + console.error('Error processing the form:', error); + alert('An unexpected error occurred. Please try again.'); + } + }); + }); + + // Handle final submit (download the form data as a JSON file) + finalSubmitButton.addEventListener('click', () => { + try { + const jsonData = JSON.stringify(formData, null, 2); + const blob = new Blob([jsonData], { type: 'application/json' }); + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = 'formData.json'; + link.click(); + + summarySection.style.display = 'none'; + successMessage.style.display = 'block'; + } catch (error) { + console.error('Error during final submission:', error); + alert('An error occurred while submitting the form. Please try again.'); + } + }); + + + + // Handle "Edit Personal Details" button click + document.getElementById('editPersonalDetails').addEventListener('click', () => { + summarySection.style.display = 'none'; + personalDetailsForm.style.display = 'block'; + }); + + // Handle "Edit Professional Details" button click + document.getElementById('editProfessionalDetails').addEventListener('click', () => { + summarySection.style.display = 'none'; + professionalDetailsForm.style.display = 'block'; + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..018f3b8 --- /dev/null +++ b/styles.css @@ -0,0 +1,110 @@ +/* Global Styles */ +body { + font-family: 'Inter', sans-serif; + background-color: #f4f4f9; + color: #333; + margin: 20px; + } + + /* Form Container */ + form { + max-width: 600px; /* Increased width for a larger form */ + margin: 20px auto; + padding: 30px; /* Increased padding for more space */ + background-color: white; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + } + + h2 { + text-align: center; + font-family: 'Arial', sans-serif; + color: #4CAF50; + margin-bottom: 20px; /* Added margin for spacing between title and form */ + } + + /* Form Group */ + .form-group { + margin-bottom: 20px; + } + + label { + font-weight: 600; + display: block; + margin-bottom: 5px; + color: #333; + } + + input[type="text"], + input[type="email"], + input[type="number"], + select { + width: 100%; + padding: 12px; + border-radius: 5px; + border: 1px solid #ccc; + box-sizing: border-box; + font-size: 16px; + margin-bottom: 15px; /* Added bottom margin for spacing between inputs */ + } + + input[type="radio"] { + margin-right: 10px; + } + + /* Error Message */ + .error-message { + color: red; + font-size: 12px; + } + + /* Button Styling */ + button { + background-color: #4CAF50; + color: white; + padding: 12px 25px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 10px; /* Added margin for space between button and inputs */ + } + + button:hover { + background-color: #45a049; + } + + .radio-group input[type="radio"] { + margin-right: 2px; + } + + /* Summary Section */ + #summary { + padding: 25px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + width: 70%; /* Increased width for a larger summary */ + margin: 20px auto; + } + + #summary h3 { + color: #333; + } + + #summary button { + background-color: #4CAF50; + color: white; + padding: 12px 25px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + #summary button:hover { + background-color: #45a049; + } + \ No newline at end of file