Assignment2/scripts.js

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 = `
                            <h3>Personal Details</h3>
                            <pre>${JSON.stringify(formData.personalDetails, null, 2)}</pre>
                        `;
                        professionalSummary.innerHTML = `
                            <h3>Professional Details</h3>
                            <pre>${JSON.stringify(formData.professionalDetails, null, 2)}</pre>
                        `;
                        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';
    });
});