rishav_dml/Assignment02-Multi-Step-Form-Wizard
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Local storage, reviewing,

Browse source
This commit is contained in:
Rishav Jaiswal 2024-12-26 18:32:12 +05:30
parent 61d98e07d1
commit 120ea43ba2
2 changed files with 96 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
index.html
View file

@ -8,16 +8,12 @@
<script src="script.js" defer></script> <script src="script.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
<body class="h-screen bg-gray-500 flex justify-center items-center"> <body class="h-screen bg-gray-500 flex flex-col justify-center items-center">
<h1 class="text-4xl font-bold mb-6">Multi-Step Form Wizard</h1>
<div class="px-12 py-10 bg-gray-100 w-[70vw]"> <div class="px-12 py-10 bg-gray-100 w-[70vw]">
<form <form action="" id="personal-details-form" class="flex justify-center">
action="index.php"
method="post"
id="personal-details-form"
class="flex justify-center"
>
<section data-form="0" class="active none flex-col items-start"> <section data-form="0" class="active none flex-col items-start">
<h3 class="text-xl font-bold">Step 1: Personal Details</h3> <h3 class="text-2xl font-bold mb-4">Step 1: Personal Details</h3>
<label for="full_name" class="text-lg">Full Name</label> <label for="full_name" class="text-lg">Full Name</label>
<input <input
@ -29,7 +25,7 @@
pattern="^[A-Za-z]+(?: [A-Za-z]+)*$" pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
class="rounded p-1" class="rounded p-1"
/> />
<label for="" class="text-lg">Email</label> <label for="email" class="text-lg">Email</label>
<input <input
type="email" type="email"
name="email" name="email"
@ -37,15 +33,15 @@
class="rounded p-1" class="rounded p-1"
required required
/> />
<label for="" class="text-lg">Phone</label> <label for="phone" class="text-lg">Phone</label>
<input <input
type="number" type="tel"
name="phone" name="phone"
id="phone" id="phone"
class="rounded p-1" class="rounded p-1"
minlength="10" minlength="10"
maxlength="10" maxlength="10"
pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$" pattern="[0-9]{10}"
required required
/> />
<div> <div>
@ -55,17 +51,19 @@
name="gender" name="gender"
value="male" value="male"
class="rounded p-1" class="rounded p-1"
id="male"
required required
/> />
<label for="" class="text-lg">Male</label> <label for="male" class="text-lg">Male</label>
<input <input
type="radio" type="radio"
name="gender" name="gender"
value="female" value="female"
class="rounded p-1" class="rounded p-1"
id="female"
required required
/> />
<label for="" class="text-lg">Female</label> <label for="female" class="text-lg">Female</label>
<input <input
type="radio" type="radio"
name="gender" name="gender"
@ -73,15 +71,16 @@
class="rounded p-1" class="rounded p-1"
required required
/> />
<label for="" class="text-lg">Others</label> <label for="others" class="text-lg">Others</label>
</div> </div>
<label for="" class="text-lg">Age</label> <label for="age" class="text-lg">Age</label>
<input <input
type="number" type="number"
name="age" name="age"
id="age" id="age"
class="rounded p-1" class="rounded p-1"
pattern="^(1[89]|[2-9][0-9]|100)*$" min="18"
max="100"
required required
/> />
<button <button
@ -104,24 +103,26 @@
<div> <div>
<label class="text-lg">Skills:</label> <label class="text-lg">Skills:</label>
<div> <div>
<input type="checkbox" name="mean" id="mean" /> <input type="checkbox" name="skills" id="mean" />
<label for="mean">MEAN</label> <label for="mean">MEAN</label>
<input type="checkbox" name="mern" id="mern" /> <input type="checkbox" name="skills" id="mern" />
<label for="mern">MERN</label> <label for="mern">MERN</label>
<input type="checkbox" name="java" id="java" /> <input type="checkbox" name="skills" id="java" />
<label for="java">Java</label> <label for="java">Java</label>
<input type="checkbox" name="flutter" id="flutter" /> <input type="checkbox" name="skills" id="flutter" />
<label for="flutter">Flutter</label> <label for="flutter">Flutter</label>
<input type="checkbox" name="dotnet" id="dotnet" /> <input type="checkbox" name="skills" id="dotnet" />
<label for="dotnet">.Net</label> <label for="dotnet">.Net</label>
</div> </div>
</div> </div>
<label class="text-lg" for="experience">Experience</label> <label class="text-lg" for="experience">Experience (in years)</label>
<input <input
class="rounded p-1" class="rounded p-1"
type="number" type="number"
name="experience" name="experience"
id="experience" id="experience"
min="0"
max="50"
required required
/> />
<label class="text-lg" for="current-role">Current Role</label> <label class="text-lg" for="current-role">Current Role</label>
@ -130,6 +131,7 @@
type="text" type="text"
name="current-role" name="current-role"
id="current-role" id="current-role"
pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
required required
/> />
<div> <div>
@ -149,7 +151,19 @@
</button> </button>
</div> </div>
</section> </section>
<section data-form="2"> <section data-form="2" class="none flex-col items-start">
<h3 class="text-xl font-bold">Step 3: Review & Submit</h3>
<div>
<p class="text-lg">Full Name: <span id="full-name-review"></span></p>
<p class="text-lg">Email: <span id="email-review"></span></p>
<p class="text-lg">Phone: <span id="phone-review"></span></p>
<p class="text-lg">Gender: <span id="gender-review"></span></p>
<p class="text-lg">Age: <span id="age-review"></span></p>
<p class="text-lg">Education: <span id="education-review"></span></p>
<p class="text-lg">Skills: <span id="skills-review"></span></p>
<p class="text-lg">Experience: <span id="experience-review"></span></p>
<p class="text-lg">Current Role: <span id="role-review"></span></p>
</div>
<div> <div>
<button <button
type="button" type="button"

88
script.js
View file

@ -1,36 +1,12 @@
// const form = document.getElementById("personal-details-form"); // Main form element
// const inputs = form.getElementsByTagName("input"); // All the input elements in the form
// var currentForm = form.querySelectorAll("[data-form]") // Get the current form selected
// var currentStep = parseInt(currentForm[0].getAttribute("data-form")); // Get the current step
// console.log(currentForm[0].getAttribute("data-form"));
// function incrementStep() {
// // Check if current form is filled
// console.log(currentForm);
// currentForm[currentStep].classList.remove("active");
// currentStep++;
// currentForm[currentStep].classList.add("active");
// console.log(currentForm[currentStep].getAttribute("data-form"));
// }
// function decrementStep() {
// currentForm[currentStep].classList.remove("active");
// currentStep--;
// currentForm[currentStep].classList.add("active");
// console.log(currentForm[currentStep].getAttribute("data-form"));
// }
const forms = document.querySelectorAll("[data-form]"); const forms = document.querySelectorAll("[data-form]");
var currentStep = 0; var currentStep = 0;
var currentForm = forms[currentStep]; var currentForm = forms[currentStep];
function incrementStep() { var data = {};
// Check if current form is filled
function incrementStep() {
// Check if current form is filled
let inputs = currentForm.getElementsByTagName("input"); let inputs = currentForm.getElementsByTagName("input");
for (const input of inputs) { for (const input of inputs) {
if (!input.checkValidity()) { if (!input.checkValidity()) {
@ -39,9 +15,51 @@ function incrementStep() {
} }
} }
try {
let skills = [];
data["fullName"] = document.getElementById("full_name").value;
document.getElementById("full-name-review").innerText = data["fullName"];
data["email"] = document.getElementById("email").value;
document.getElementById("email-review").innerText = data["email"];
data["phone"] = document.getElementById("phone").value;
document.getElementById("phone-review").innerText = data["phone"];
data["gender"] = document.querySelector(
'input[name="gender"]:checked'
).value;
document.getElementById("gender-review").innerText = data["gender"];
data["age"] = document.getElementById("age").value;
document.getElementById("age-review").innerText = data["age"];
data["education"] = document.getElementById("education").value;
document.getElementById("education-review").innerText = data["education"];
data["skills"] = document.querySelectorAll('input[name="skills"]:checked');
// Iterating over the NodeList and extracting the id to store it in skills array
data["skills"].forEach((skill) => {
skills.push(skill.getAttribute("id"));
});
data["skills"] = skills;
// To clear previous innerText rendered
document.getElementById("skills-review").innerText = "";
document.getElementById("skills-review").innerText = data["skills"];
data["experience"] = document.getElementById("experience").value;
document.getElementById("experience-review").innerText = data["experience"];
data["currentRole"] = document.getElementById("current-role").value;
document.getElementById("role-review").innerText = data["currentRole"];
} catch (error) {
// Do nothing
}
// Changing the visiblity of the form // Changing the visiblity of the form
currentForm.classList.remove("active"); currentForm.classList.remove("active");
currentStep++; currentStep = Math.min(currentStep + 1, forms.length - 1);
currentForm = forms[currentStep]; currentForm = forms[currentStep];
currentForm.classList.add("active"); currentForm.classList.add("active");
} }
@ -50,7 +68,17 @@ function decrementStep() {
// Changing the visiblity of the form // Changing the visiblity of the form
currentForm.classList.remove("active"); currentForm.classList.remove("active");
currentStep--; currentStep = Math.max(currentStep - 1, 0);;
currentForm = forms[currentStep]; currentForm = forms[currentStep];
currentForm.classList.add("active"); currentForm.classList.add("active");
} }
document
.querySelector('button[type="submit"]')
.addEventListener("click", function (event) {
event.preventDefault();
window.localStorage.clear();
window.localStorage.setItem("formData", JSON.stringify(data));
window.alert("Form submitted successfully");
window.location.href = "/";
});