Merge pull request 'review assignment2' (#3) from develop into main
Reviewed-on: #3
This commit is contained in:
commit
34c7dc488b
111
index.html
Normal file
111
index.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Multi Step Form</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<form id="form1" class="multi-step-form">
|
||||
<h3>PERSONAL DETAILS</h3>
|
||||
<input type="text" id="fullName" placeholder="Full Name" minlength="3">
|
||||
<span class="error-message" id="fullName-error"></span>
|
||||
<input type="email" id="email" placeholder="Email" required>
|
||||
<span class="error-message" id="email-error"></span>
|
||||
<input type="tel" id="phone" placeholder="Phone No" required pattern="\d{10}">
|
||||
<span class="error-message" id="phone-error"></span>
|
||||
<input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required>
|
||||
<span class="error-message" id="age-error"></span>
|
||||
|
||||
<label >Gender</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="gender" value="male" required> Male
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="gender" value="Female" required> Female
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="gender" value="Other">Other
|
||||
</label>
|
||||
<span class="error-message" id="gender-error"></span>
|
||||
|
||||
<div class="btn-box">
|
||||
<button type="button" id="Next1">Next</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<form id="form2">
|
||||
<h3>Professional Details</h3>
|
||||
|
||||
<div class="dropdown">
|
||||
<label for="education">Education</label>
|
||||
<select id="education" name="education" required>
|
||||
<option value="" disabled selected>Select Education</option>
|
||||
<option value="High School">High School</option>
|
||||
<option value="Bachelor's Degree">Bachelor's Degree</option>
|
||||
<option value="Master's Degree">Master's Degree</option>
|
||||
<option value="PhD">PhD</option>
|
||||
</select>
|
||||
<span class="error-message" id="education-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<label>Skills</label>
|
||||
<label><input type="checkbox" name="skills" value="programming"> Programming</label>
|
||||
<label><input type="checkbox" name="skills" value="marketing"> Marketing</label>
|
||||
<label><input type="checkbox" name="skills" value="design"> Design</label>
|
||||
<span class="error-message" id="skills-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="experience">Experience</label>
|
||||
<input type="number" id="experience" name="experience" min="0" max="50" placeholder="Enter years..." required>
|
||||
<span class="error-message" id="experience-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="currentRole">Current Role</label>
|
||||
<input type="text" id="currentRole" name="currentRole" placeholder="Your current role" required>
|
||||
<span class="error-message" id="currentRole-error"></span>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<button type="button" id="Back1">Previous</button>
|
||||
<button type="button" id="Next2">Next</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!--Review-->
|
||||
<form id="form3">
|
||||
<h3>Review & Submit</h3>
|
||||
<button type="button" id="exportData">Export as JSON</button>
|
||||
<button type="button" id="clearForm">Clear Form</button>
|
||||
<div id="reviewSection"></div>
|
||||
<div class="btn-box">
|
||||
|
||||
<button type="button" id="Back2">Edit</button>
|
||||
<button type="submit" id="Submit" >Submit</button>
|
||||
<p class="success-message" id="successMessage" style="display:none;color:rgb(2, 65, 2);">Form submitted successfully!</p>
|
||||
</div>
|
||||
|
||||
<pre id="jsonPreview"></pre>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<div class="step-row">
|
||||
<div id="progress"></div>
|
||||
<div class="step-col"><small>Step 1</small></div>
|
||||
<div class="step-col"><small>Step 2</small></div>
|
||||
<div class="step-col"><small>Step 3</small></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
271
script.js
Normal file
271
script.js
Normal file
|
|
@ -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 = `
|
||||
<div class = "review-section">
|
||||
<div class="detail-group">
|
||||
<h4>Personal Details</h4>
|
||||
<p><strong>Full Name:</strong> ${personalDetails.fullName}</p>
|
||||
<p><strong>Email:</strong> ${personalDetails.email}</p>
|
||||
<p><strong>Phone:</strong> ${personalDetails.phone}</p>
|
||||
<p><strong>Age:</strong> ${personalDetails.age}</p>
|
||||
<p><strong>Gender:</strong> ${personalDetails.gender}</p>
|
||||
|
||||
<h4>Professional Details</h4>
|
||||
<p><strong>Education:</strong> ${professionalDetails.education}</p>
|
||||
<p><strong>Skills:</strong> ${professionalDetails.skills.join(', ')}</p>
|
||||
<p><strong>Experience:</strong> ${professionalDetails.experience} years</p>
|
||||
<p><strong>Current Role:</strong> ${professionalDetails.currentRole}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
||||
192
style.css
Normal file
192
style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in a new issue