diff --git a/README.md b/README.md index 3c4f281..ac31ee4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ -# Assignment-123 - +Assignment - 1,2.3 \ No newline at end of file diff --git a/contact.html b/contact.html index 3c28543..b7d75d8 100644 --- a/contact.html +++ b/contact.html @@ -6,125 +6,8 @@ Multi-Step Form - + +
diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..80323cd --- /dev/null +++ b/css/contact.css @@ -0,0 +1,117 @@ +body { + font-family: 'Roboto', sans-serif; + background-color: #f4f7fa; + margin: 0; +} +.form-container { + max-width: 600px; + margin: auto; + margin-top: 6rem; + background-color: #ffffff; + padding: 30px; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} +.progress-container { + width: 100%; + height: 10px; + background-color: #e9ecef; + margin-bottom: 20px; + border-radius: 5px; + overflow: hidden; +} +.progress-bar { + height: 100%; + width: 0; + background-color: #007bff; + transition: width 0.3s ease; +} +h2 { + text-align: center; + color: #333; + margin-bottom: 20px; +} +.step { + display: none; +} +.step.active { + display: block; +} +input[type="text"], +input[type="email"], +input[type="number"], +select { + width: 100%; + padding: 12px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; + transition: border-color 0.3s; +} +input[type="text"]:focus, +input[type="email"]:focus, +input[type="number"]:focus, +select:focus { + border-color: #007bff; + outline: none; +} +input[type="radio"], +input[type="checkbox"] { + margin-right: 5px; +} +.button-container { + display: flex; + justify-content: space-between; + margin-top: 20px; +} +.button-container button { + background-color: #007bff; + color: white; + border: none; + padding: 12px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s, transform 0.2s; + font-size: 16px; +} +.button-container button:hover { + background-color: #0056b3; + transform: translateY(-1px); +} +#successMessage { + display: none; + text-align: center; + margin-top: 20px; + padding: 20px; + background-color: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; + border-radius: 5px; +} +.step-indicator { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} +.step-indicator div { + width: 100%; + text-align: center; + padding: 10px; + border-radius: 5px; + background-color: #e9ecef; + color: #6c757d; +} +.step-indicator .active { + background-color: #007bff; + color: white; +} +@media (max-width: 600px) { + .button-container { + flex-direction: column; + } + .button-container button { + margin-bottom: 10px; + width: 100%; + } +} \ No newline at end of file diff --git a/js/script.js b/js/script.js index 5a837bd..bf80a59 100644 --- a/js/script.js +++ b/js/script.js @@ -4,118 +4,3 @@ function toggleMenu() { } - -let currentStep = 0; - -function showStep(step) { - const steps = document.querySelectorAll('.step'); - const indicators = document.querySelectorAll('.step-indicator div'); - steps.forEach(s => s.classList.remove('active')); - indicators.forEach(i => i.classList.remove('active')); - steps[step].classList.add('active'); - indicators[step].classList.add('active'); -} - -function nextStep() { - if (validateStep(currentStep)) { - currentStep++; - if (currentStep >= document.querySelectorAll('.step').length) { - currentStep = document.querySelectorAll('.step').length - 1; - } - showStep(currentStep); - if (currentStep === 2) { - reviewData(); - } - } -} - -function prevStep() { - currentStep--; - if (currentStep < 0) { - currentStep = 0; - } - showStep(currentStep); -} - - function validateStep(step) { - const inputs = document.querySelectorAll(`#step${step + 1} input, #step${step + 1} select`); - for (let input of inputs) { - if (!input.checkValidity()) { - input.reportValidity(); - return false; - } - } - return true; - } - - function reviewData() { - const fullName = document.getElementById('fullName').value; - const email = document.getElementById('email').value; - const phone = document.getElementById('phone').value; - const gender = document.querySelector('input[name="gender"]:checked').value; - const age = document.getElementById('age').value; - const education = document.getElementById('education').value; - const experience = document.getElementById('experience').value; - const currentRole = document.getElementById('currentRole').value; - - const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value).join(', '); - - document.getElementById('review').innerHTML = ` -

Full Name: ${fullName}

-

Email: ${email}

-

Phone: ${phone}

-

Gender: ${gender}

-

Age: ${age}

-

Education: ${education}

-

Skills: ${skills}

-

Experience: ${experience} years

-

Current Role: ${currentRole}

- `; - } - - function submitForm() { - const data = { - fullName: document.getElementById('fullName').value, - email: document.getElementById('email').value, - phone: document.getElementById('phone').value, - gender: document.querySelector('input[name="gender"]:checked').value, - age: document.getElementById('age').value, - education: document.getElementById('education').value, - skills: Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value), - experience: document.getElementById('experience').value, - currentRole: document.getElementById('currentRole').value - }; - - localStorage.setItem('formData', JSON.stringify(data)); - document.getElementById('multiStepForm').style.display = 'none'; - document.getElementById('successMessage').style.display = 'block'; - } - -function exportData() { - const data = localStorage.getItem('formData'); - const blob = new Blob([data], { type: 'application/json' }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'formData.json'; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); -} - - function clearForm() { - document.getElementById('multiStepForm').reset(); - localStorage.removeItem('formData'); - currentStep = 0; - showStep(currentStep); - document.getElementById('successMessage').style.display = 'none'; - } - - // Initialize the form - showStep(currentStep); - - - - - -