diff --git a/index.html b/index.html index 9dfdf77..81713d7 100644 --- a/index.html +++ b/index.html @@ -9,60 +9,64 @@ -
-
-
-

Personal-Details

+
+
+ +

Personal Details

- Personal-Details + Personal Details - - -

Select your gender: - - - + + +

Select your gender: + + + +

+

Enter your age: +

-

Enter your age: -

-
+

Professional Details

-

Education

- - -
-

Select your skills

- - - - - -
-

Experience

- -

Current - Role

- +
+

Education

+ +
+

Select your skills

+ + + + + +
+

Experience

+ +

Current Role

+ +
-
- +
+

Review & Submit

+
+ +
- - - + +
- \ No newline at end of file + diff --git a/script.js b/script.js index c2a0ed3..f486fb0 100644 --- a/script.js +++ b/script.js @@ -1,20 +1,140 @@ -document.getElementById("nxt-btn").addEventListener('click' ,function(){ - if(document.getElementById('personal-datail').checkValidity()) - { - document.getElementById('page1').classList.remove('active'); - document.getElementById('page2').classList.add('active'); - document.getElementById('prv-btn').style.display = 'block'; - - } - else{ - document.getElementById('personal-detail').reportValidity(); - } +// initial +let currentStep = 1; +const totalSteps = 3; + +document.getElementById("next-btn").addEventListener("click", function () { + if (validateStep(currentStep)) { + currentStep++; + showStep(currentStep); + } + else + { + alert("Please fill all the fields"); + } }); -document.getElementById('prv-btn').addEventListener('click',function() -{ - document.getElementById('page2').classList.remove('active'); - document.getElementById('page1').classList.add('active'); - document.getElementById('prv-btn').style.display = 'none'; -}); \ No newline at end of file +document.getElementById("prev-btn").addEventListener("click", function () { + currentStep--; + showStep(currentStep); +}); + +document.getElementById("submit-btn").addEventListener("click", function () { + if (validateStep(currentStep)) { + saveData(); + alert("Form submitted successfully!"); + } +}); + +document.getElementById("refresh-btn").addEventListener("click", function () { + localStorage.removeItem("formData"); + location.reload(); +}); + +function showStep(step) { + for (let i = 1; i <= totalSteps; i++) { + document.getElementById(`step${i}`).style.display = i === step ? "block" : "none"; + } + document.getElementById("prev-btn").style.display = step === 1 ? "none" : "inline-block"; + document.getElementById("next-btn").style.display = step === totalSteps ? "none" : "inline-block"; + document.getElementById("submit-btn").style.display = step === totalSteps ? "inline-block" : "none"; + document.getElementById("refresh-btn").style.display = step === totalSteps ? "inline-block" : "none"; + updateReview(); +} + +function validateStep(step) { + const form = step === 1 ? document.getElementById("personal-details") : document.getElementById("professional-details"); + return form.checkValidity(); +} + +function updateReview() { + if (currentStep === totalSteps) { + const review = document.getElementById("review"); + review.innerHTML = ` +

Personal Details

+

Full Name: ${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}

+ + +

Professional Details

+

Education: ${document.getElementById("education").value}

+

Skills: ${Array.from(document.querySelectorAll('.skills input:checked')).map(el => el.value).join(", ")}

+

Experience: ${document.getElementById("experience").value}

+

Current Role: ${document.getElementById("current-role").value}

+ + `; + } +} + +function saveData() { + 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('.skills input:checked')).map(el => el.value), + experience: document.getElementById("experience").value, + currentRole: document.getElementById("current-role").value, + }; + + // Save to localStorage + localStorage.setItem("formData", JSON.stringify(data)); + + // Log saved data for debugging + console.log("Data saved to localStorage:", data); +} + + +function loadSavedData() { + const savedData = JSON.parse(localStorage.getItem("formData")); + + // Log loaded data for debugging + console.log("Loaded Data from localStorage:", savedData); + + if (savedData) { + document.getElementById("fullname").value = savedData.fullName; + document.getElementById("email").value = savedData.email; + document.getElementById("phone").value = savedData.phone; + document.querySelector(`input[name="gender"][value="${savedData.gender}"]`).checked = true; + document.getElementById("age").value = savedData.age; + document.getElementById("education").value = savedData.education; + + savedData.skills.forEach(skill => { + document.querySelector(`.skills input[value="${skill}"]`).checked = true; + }); + + document.getElementById("experience").value = savedData.experience; + document.getElementById("current-role").value = savedData.currentRole; + } +} + +function clearForm() { + + document.getElementById("personal-details").reset(); + + + document.getElementById("professional-details").reset(); + + + const genderRadios = document.querySelectorAll('input[name="gender"]'); + genderRadios.forEach(radio => radio.checked = false); + + const skillCheckboxes = document.querySelectorAll('.skills input'); + skillCheckboxes.forEach(checkbox => checkbox.checked = false); +} + +function editStep(step) { + currentStep = step; + showStep(currentStep); +} + +window.onload = function () { + clearForm(); + showStep(currentStep); + loadSavedData(); +}; diff --git a/style.css b/style.css index c1a7779..4f24c3f 100644 --- a/style.css +++ b/style.css @@ -1,76 +1,130 @@ -body{ - margin: 0;padding: 0; +body { + margin: 0; + padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; display: flex; - flex-direction: column; - gap: 10rem; - background-image: linear-gradient(#FAF6E3,#D8DBBD,#B59F78); + justify-content: center; + align-items: center; + background-image: linear-gradient(#FAF6E3, #D8DBBD, #B59F78); height: 100vh; width: 100vw; } -input{ - border: 1px solid black; +html +{ + scroll-behavior: smooth; +} + +input, select, button { + border: 1px solid #ccc; border-radius: 8px; - padding: 6px; -} -input::placeholder{ - font-size: 12px; - color: black; -} -.form-Container, -.personal-detail, -.step2{ - margin: 0 auto; - width: 75vw; -} - - -.form-Container legend{ - font-size:16px; - font-weight: bold; -} -#gender-id{ - font-weight: bold; -} -#gender-id label{ - font-weight: normal; + padding: 10px; + margin: 10px 0; + width: 100%; + box-sizing: border-box; + font-size: 16px; } -#btn-div{ +input::placeholder { + font-size: 14px; + color: #888; +} + +.form-container { + background: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + width: 75%; + max-width: 600px; + display: flex; + flex-direction: column; +} + +#gender { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + gap: 20px; +} + +.step { + display: none; +} + +.step.active { + display: block; +} + +#btn-div { padding: 20px; display: flex; - justify-content: space-evenly; + justify-content: space-between; + width: 100%; } -#btn-div button{ - cursor: pointer; - border: none; - padding: 8px; - width: 5rem; - border-radius: 10px; - background-color: rgb(97, 97, 211); + +#prev-btn, #next-btn, #submit-btn, #refresh-btn { + background-color: rgb(57, 57, 220); color: white; - bottom: 0; - - -} -#btn-div button:hover{ - background-color: #fff; - color: rgb(17, 17, 17); - font-size: 16px; - + border: none; + border-radius: 10px; + padding: 10px 20px; + cursor: pointer; + max-width: 150px; + transition: background-color 0.3s ease; + margin-right: 35px; } -.step2 -{ - display: none; +#prev-btn:hover, #next-btn:hover, #submit-btn:hover, #refresh-btn:hover { + background-color: rgb(13, 13, 242); + transform: translateY(2px); +} +fieldset { + border: 1px solid #ccc; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; } -.step2.active -{ - display: inline; + +legend { + font-size: 18px; + font-weight: bold; +} + +h2 { + text-align: center; + margin-bottom: 20px; +} + +.skills label { + display: inline-block; + margin-bottom: 10px; +} + +#review button { + background-color: #f17e13; + color: white; + border: none; + border-radius: 5px; + padding: 8px 15px; + font-size: 14px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; + margin-top: 10px; + max-width: 85px; +} + +#review button:hover { + background-color: #ec971f; + transform: translateY(-2px); +} + +#review button:focus { + outline: none; +} + +#review button:active { + transform: translateY(2px); } -#prv-btn,#review-submit -{ - display: none; -} \ No newline at end of file