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..2cca712 --- /dev/null +++ b/index.html @@ -0,0 +1,110 @@ + + + + + + + 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..cb0169c --- /dev/null +++ b/script.js @@ -0,0 +1,102 @@ + +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 progress= document.getElementById("progress"); +var clearFormBtn = document.getElementById('clearForm'); +const form = document.getElementsByClassName("multi-step-form"); + +var formData = { + personalDetails:{}, + professionalDetails:{}, +} + +//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 = ` +//

Personal Details

+//

Full Name: ${personalDetails.fullName}

+//

Email: ${personalDetails.email}

+//

Mobile No.: ${personalDetails.phone}

+//

Age: ${personalDetails.age}

+//

Gender: ${personalDetails.gender}

+ +// ` +// }; + +Next1.onclick = function() { + 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() { + form2.style.transform = "translateX(-450px)"; + form3.style.transform = "translateX(0px)"; + progress.style.width = "360px"; + savePersonalDetails(); + displayReviewSection(); +}; + +Back2.onclick = function() { + form2.style.transform = "translateX(0px)"; + form3.style.transform = "translateX(450px)"; + progress.style.width = "240px"; +}; + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..85897ce --- /dev/null +++ b/style.css @@ -0,0 +1,143 @@ +*{ + 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: 500px; + 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 ; + +} +.checkbox-group input{ + + margin-right: 5px; +}