script.js

@@ -1,3 +1,4 @@
+
 var form1= document.getElementById("form1");
 var form2= document.getElementById("form2");
 var form3= document.getElementById("form3");
@@ -8,34 +9,94 @@ var Back2= document.getElementById("Back2");
 
 var progress= document.getElementById("progress");
 var clearFormBtn = document.getElementById('clearForm');
+const form = document.getElementsByClassName("multi-step-form");
 
 var formData = {
     personalDetails:{},
     professionalDetails:{},
 }
-//Display Review Section
 
-Next1.onclick=function(){
-    form1.style.left = "-450px";
-    form2.style.left = "40px";
+//For Validation
+// const fields= {
+//     fullName: document.getElementById("fullName"),
+//     email: document.getElementById("email"),
+//     phone: document.getElementById("phone"),
+//     age: document.getElementById('age'),
+//     gender: form.querySelector('[name="gender"]'),
+//     education: document.getElementById("education"),
+//     skills: form.querySelectorAll("[name='skills']"),
+//     experience: document.getElementById("experience"),
+//     currentRole: document.getElementById("currentRole")
+  
+// };
+
+
+// const reviewSection = document.getElementById('reviewSection');
+// //save Personal Details
+// const saveToLocalStorage =()=>{
+//  const formData = getFormData();
+//  localStorage.setItem("formData",JSON.stringify(formData));
+// };
+// const getFormData= () =>{
+//     const formData ={
+//         personal:{
+//             fullName: fields.fullName.value,
+//             email: fields.email.value,
+//             phone: fields.phone.value,
+//             age: fields.age.value,
+//             gender: fields.gender.value
+
+//         },
+//         professional:{
+//             education: fields.education.value,
+//             skills: Array.from(fields.skills).filter(skills => skills.checked).map(skills => skills.value),
+//             experience: fields.experience.value,
+//             currentRole: fields.currentRole.value
+//         }
+//     }
+// };
+// //Display Review Section
+// function displayReviewSection(){
+    
+
+//     reviewSection.innerHTML = `
+//     <h4>Personal Details</h4>
+//     <p><strong>Full Name: </strong>${personalDetails.fullName}</p>
+//     <p><strong>Email: </strong> ${personalDetails.email}</p>
+//     <p><strong>Mobile No.: </strong> ${personalDetails.phone}</p>
+//     <p><strong>Age: </strong> ${personalDetails.age}</p>
+//     <p><strong>Gender: </strong> ${personalDetails.gender}</p>
+
+//     `
+// };
+
+Next1.onclick = function() {
+    form1.style.transform = "translateX(-450px)";  
+    form2.style.transform = "translateX(0px)";  
     progress.style.width = "240px";
-}
-Back1.onclick=function(){
-    form1.style.left = "40px";
-    form2.style.left = "450px";
+    savePersonalDetails();
+};
+
+Back1.onclick = function() {
+    form1.style.transform = "translateX(0px)";  
+    form2.style.transform = "translateX(450px)";  
     progress.style.width = "120px";
-}
+};
 
-Next2.onclick=function(){
-    form2.style.left = "-450px";
-    form3.style.left = "40px";
+Next2.onclick = function() {
+    form2.style.transform = "translateX(-450px)";  
+    form3.style.transform = "translateX(0px)";  
     progress.style.width = "360px";
-}
+    savePersonalDetails();
+    displayReviewSection();
+};
 
-Back2.onclick=function(){
-    form2.style.left = "40px";
-    form3.style.left = "450px";
+Back2.onclick = function() {
+    form2.style.transform = "translateX(0px)";  
+    form3.style.transform = "translateX(450px)";  
     progress.style.width = "240px";
-}
+};
+
+