diff --git a/README.md b/README.md index 06d7405..e69de29 100644 Binary files a/README.md and b/README.md differ diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..b3ba830 Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..98868e6 --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + + + Multi Step Form + + + +
+
+

PERSONAL DETAILS

+ + + + + + + + + + + + + + + +
+ +
+ +
+ +
+

Professional Details

+ +
+ + + +
+ +
+ + + + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+
+ + +
+

Review & Submit

+ + +
+
+ + + + +
+ + 

+ 
+   
+  

+  
+  

+    

+    
Step 1

+    
Step 2

+    
Step 3

+  

+
+  

+  
+  
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3fc17a1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,271 @@
+document.addEventListener('DOMContentLoaded',function(){
+var form1= document.getElementById("form1");
+var form2= document.getElementById("form2");
+var form3= document.getElementById("form3");
+var Next1= document.getElementById("Next1");
+var Next2= document.getElementById("Next2");
+var Back1= document.getElementById("Back1");
+var Back2= document.getElementById("Back2");
+var submitBtn = document.getElementById("Submit");
+var successMessage= document.getElementById("successMessage");
+var clearFormBtn = document.getElementById("clearForm");
+var jsonPreview = document.getElementById('jsonPreview');
+var progress= document.getElementById("progress");
+
+var formData = {
+    personalDetails:{},
+    professionalDetails:{},
+};
+
+//Validations
+function validateFullName(){
+    var fullName = document.getElementById('fullName');
+    var errorMsg = document.getElementById('fullName-error');
+    if( fullName.value.trim() === ''){
+        errorMsg.textContent = 'Full Name is required.';
+        return false;
+    }
+    if(fullName.value.length < 3){
+        errorMsg.textContent = "Full Name must be at least 3 characters long.";
+        return false;
+    }
+    var regex = /^[A-Za-z\s]+$/;
+    if(!regex.test(fullName.value)){
+        errorMsg.textContent = "Full Name must contain letters only.";
+        return false;
+    }
+
+    errorMsg.textContent = '';
+    return true;
+}
+
+function validateEmail(){
+    var email = document.getElementById('email');
+    var errorMsg = document.getElementById('email-error');
+    var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+    if(email.value.trim()=== ''){
+        errorMsg.textContent= 'Email is required.';
+        return false;
+    }else if(!regex.test(email.value)){
+        errorMsg.textContent = 'Please enter valid email address';
+        return false;
+    }
+    errorMsg.textContent ='';
+    return true;
+    
+}
+
+function validatePhone(){
+    var phone = document.getElementById('phone');
+    var errorMsg = document.getElementById('phone-error');
+    var regex = /^\d{10}$/;
+    if(phone.value.trim() === ''){
+        errorMsg.textContent = 'Phone number is required.';
+        return false;
+    }else if(!regex.test(phone.value)){
+        errorMsg.textContent = 'Please enter a valid 10-digit phone number.';
+        return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+
+}
+
+function validateAge(){
+    var age = document.getElementById('age');
+    var errorMsg = document.getElementById('age-error');
+    if(age.value.trim() === ''){
+        errorMsg.textContent = 'Age is required.';
+        return false;
+    }else if( age.value < 18 || age.value > 100){
+        errorMsg.textContent = 'Age must be between 18 and 100.';
+        return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+}
+
+function validateGender() {
+    var gender = document.querySelector('input[name="gender"]:checked');
+    var errorMsg = document.getElementById('gender-error');
+    if (!gender) {
+      errorMsg.textContent = 'Please select a gender.';
+      return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+  }
+
+ 
+  function validateEducation() {
+    var education = document.getElementById('education');
+    var errorMsg = document.getElementById('education-error');
+    if (education.value === '') {
+      errorMsg.textContent = 'Education is required.';
+      return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+  }
+
+    
+  function validateSkills() {
+    var errorMsg = document.getElementById('skills-error');
+    var checkedSkills = document.querySelectorAll('input[name="skills"]:checked');
+    if (checkedSkills.length === 0) {
+      errorMsg.textContent = 'Please select at least one skill.';
+      return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+  }
+
+  function validateExperience() {
+    var experience = document.getElementById('experience');
+    var errorMsg = document.getElementById('experience-error');
+    if (experience.value.trim() === '') {
+      errorMsg.textContent = 'Experience is required.';
+      return false;
+    } else if (experience.value < 0 || experience.value > 50) {
+      errorMsg.textContent = 'Experience must be between 0 and 50 years.';
+      return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+  }
+
+  function validateRole() {
+    var role = document.getElementById('currentRole');
+    var errorMsg = document.getElementById('currentRole-error');
+    if (role.value.trim() === '') {
+      errorMsg.textContent = 'Current role is required.';
+      return false;
+    }
+    errorMsg.textContent = '';
+    return true;
+  }
+
+Next1.onclick = function() {
+    if(validateFullName() && validateEmail() && validatePhone() && validateAge() && validateGender()){
+    form1.style.transform = "translateX(-450px)";  
+    form2.style.transform = "translateX(0px)";  
+    progress.style.width = "240px";
+    savePersonalDetails();
+    }
+};
+
+Back1.onclick = function() {
+    form1.style.transform = "translateX(0px)";  
+    form2.style.transform = "translateX(450px)";  
+    progress.style.width = "120px";
+};
+
+Next2.onclick = function() {
+    if(validateEducation() && validateSkills() && validateExperience() && validateRole()){
+    form2.style.transform = "translateX(-450px)";  
+    form3.style.transform = "translateX(0px)";  
+    progress.style.width = "360px";
+    saveProfessionalDetails();
+        displayReviewSection();
+    }
+};
+
+Back2.onclick = function() {
+    form2.style.transform = "translateX(0px)";  
+    form3.style.transform = "translateX(450px)";  
+    progress.style.width = "240px";
+};
+
+//Saving data
+function savePersonalDetails(){
+    formData.personalDetails.fullName = document.getElementById('fullName').value;
+    formData.personalDetails.email = document.getElementById('email').value;
+    formData.personalDetails.phone = document.getElementById('phone').value;
+    formData.personalDetails.age = document.getElementById('age').value;
+    formData.personalDetails.gender = document.querySelector('input[name="gender"]:checked').value;
+    localStorage.setItem('personalDetails',JSON.stringify(formData.personalDetails));
+}
+
+function saveProfessionalDetails() {
+    formData.professionalDetails.education = document.getElementById('education').value;
+    formData.professionalDetails.skills = [];
+    document.querySelectorAll('input[name="skills"]:checked').forEach(function (checkbox) {
+      formData.professionalDetails.skills.push(checkbox.value);
+    });
+    formData.professionalDetails.experience = document.getElementById('experience').value;
+    formData.professionalDetails.currentRole = document.getElementById('currentRole').value;  
+    localStorage.setItem('professionalDetails', JSON.stringify(formData.professionalDetails));
+}
+
+
+
+// Display Review Section 
+function displayReviewSection() {
+    var personalDetails = JSON.parse(localStorage.getItem('personalDetails'));
+    var professionalDetails = JSON.parse(localStorage.getItem('professionalDetails'));
+
+    console.log('Personal Details:', personalDetails);
+    console.log('Professional Details:', professionalDetails);
+
+    var reviewSection = document.getElementById('reviewSection');
+    reviewSection.innerHTML = `
+    

+    

+      
Personal Details

+      
Full Name: ${personalDetails.fullName}

+      
Email: ${personalDetails.email}

+      
Phone: ${personalDetails.phone}

+      
Age: ${personalDetails.age}

+      
Gender: ${personalDetails.gender}

+ 
+      
Professional Details

+      
Education: ${professionalDetails.education}

+      
Skills: ${professionalDetails.skills.join(', ')}

+      
Experience: ${professionalDetails.experience} years

+     
Current Role: ${professionalDetails.currentRole}

+     

+     

+    `;
+    
+    jsonPreview.textContent = JSON.stringify({ personalDetails, professionalDetails }, null, 2);
+    submitBtn.disabled = false;
+}
+
+//Submit form success-message
+submitBtn.onclick = function (event){
+    event.preventDefault();
+    successMessage.style.display= 'block';
+    setTimeout(function(){
+        successMessage.style.display ='none';
+    },3000);
+
+    setTimeout(function() {
+        form1.reset();
+        form2.reset();
+        form3.reset();
+        localStorage.clear();
+    }, 3000);  
+}
+
+
+//Export JSOn function
+document.getElementById("exportData").onclick = function() {
+    var jsonData = jsonPreview.textContent;  
+  
+    var blob = new Blob([jsonData], { type: "application/json" });
+    var link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "formData.json";  
+    link.click();
+};
+
+//Clear Form
+clearFormBtn.onclick = function () {
+    localStorage.removeItem('personalDetails');
+    localStorage.removeItem('professionalDetails');
+    window.location.reload(); 
+  };
+
+});
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..aaaee9a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,192 @@
+*{
+  margin:0;
+  padding:0;
+  font-family: sans-serif;
+}
+
+body {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0,0,0,0.8)),url(bg.jpg);
+  background-position: center;
+  background-size: cover;
+
+}
+
+.container{
+  width: 360px;
+  height: 650px;
+  margin: 8% auto;
+  background: #fff;
+  border-radius: 5px;
+  position:relative;
+  transition: 0.5s;
+  overflow: hidden;
+}
+
+h3{
+  text-align: center;
+  margin-bottom: 40px;
+  color: #777;
+}
+
+.container form{
+   width: 280px;
+   position:absolute;
+   top:100px;
+   left: 40px;
+  
+}
+
+form input{
+  width:100%;
+  padding: 10px 5px;
+  margin: 5px 0;
+  border:0;
+  border-bottom: 1px solid #999;
+  outline: none;
+  background: transparent;
+  transition: all 0.3s ease;
+}
+label{
+  display:inline-flex;
+  margin-left: 10px;
+  font-size: 14px;
+  cursor: pointer;
+  position: relative;
+  align-items: center;
+  color: #777;
+  margin-top: 10px;
+}
+.radio-inline input{
+  display:inline-flex;
+  margin-right: 2px; 
+}
+
+::placeholder{
+  color: #777;
+}
+.btn-box{
+   width:100%;
+   margin: 30px auto;
+   text-align: center;
+}
+
+form button{
+  width: 110px;
+  height:35px;
+  margin:0 10px;
+  background: linear-gradient(to right, #9b06d6,#f905dc);
+  border-radius: 30px;
+  border:0;
+  outline:none;
+  color:#fff;
+  cursor:pointer;
+}
+#form2, #form3 {
+  position: absolute; 
+  transform: translateX(450px);
+  transition: transform 0.3s ease;
+}
+
+
+.step-row{
+  width:360px;
+  height:40px;
+  margin:0 auto;
+  display:flex;
+  align-items: center;
+  box-shadow: 0 -1px 5px -1px #000;
+  position: relative;
+}
+.step-col{
+  width: 120px;
+  text-align: center;
+  color:#333;
+  position: relative;
+
+}
+#progress{
+    position:absolute;
+    height:100%;
+    width: 120px;
+    background: linear-gradient(to right, #9b06d6,#f905dc);
+    transition: 1s;
+}
+#progress::after{
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  top: 0;
+  right: -20px;
+  border-left: 20px solid #f11de7;
+ 
+}
+
+.dropdown select{
+  position:relative;
+  min-width: 180px;
+  padding: 5px 5px;
+  display: inline-block;
+  color:#333
+}
+
+.checkbox-group{
+    display:inline-flex;
+    position:relative ;
+    
+}
+
+
+input[type="checkbox"] {
+  margin-right: 8px;
+}
+
+.checkbox-group label {
+  display: inline-block;
+  margin-right: 15px;
+  font-size: 14px;
+}
+
+/* Error messages */
+.error-message {
+  color: red;
+  font-size: 12px;
+  display: block;
+  margin-top: 5px;
+}
+
+
+.review-section {
+  font-family: Arial, sans-serif;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  padding: 20px;
+  border-radius: 8px;
+  margin: 20px 0;
+}
+
+.review-section h4 {
+  color: #333;
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
+.detail-group {
+  margin-bottom: 15px;
+}
+
+.detail-group p {
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+}
+
+.detail-group p strong {
+  color: #333;
+}
+
+
+
+