diff --git a/index.html b/index.html new file mode 100644 index 0000000..81713d7 --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + + Register + + + + +
+
+
+

Personal Details

+
+ Personal Details + + + +

Select your gender: + + + +

+

Enter your age: + +

+
+
+
+
+

Professional Details

+
+

Education

+ +
+

Select your skills

+ + + + + +
+

Experience

+ +

Current Role

+ +
+
+
+

Review & Submit

+
+ + +
+
+ + +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f486fb0 --- /dev/null +++ b/script.js @@ -0,0 +1,140 @@ +// 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("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 new file mode 100644 index 0000000..4f24c3f --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +body { + margin: 0; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + background-image: linear-gradient(#FAF6E3, #D8DBBD, #B59F78); + height: 100vh; + width: 100vw; +} +html +{ + scroll-behavior: smooth; +} + +input, select, button { + border: 1px solid #ccc; + border-radius: 8px; + padding: 10px; + margin: 10px 0; + width: 100%; + box-sizing: border-box; + font-size: 16px; +} + +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-between; + width: 100%; +} + +#prev-btn, #next-btn, #submit-btn, #refresh-btn { + background-color: rgb(57, 57, 220); + color: white; + border: none; + border-radius: 10px; + padding: 10px 20px; + cursor: pointer; + max-width: 150px; + transition: background-color 0.3s ease; + margin-right: 35px; +} + +#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; +} + +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); +}