All files added to dev branch
This commit is contained in:
parent
ab3877b846
commit
aca4022aa1
101
index.html
Normal file
101
index.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Form Navigation</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Personal Details form -->
|
||||
|
||||
<form id="personalDetailsForm">
|
||||
<h2>Personal Details Form</h2>
|
||||
<label for="fullName">Full Name:</label>
|
||||
<input type="text" id="fullName" name="fullName" required />
|
||||
<small class="error-message" id="nameError"></small>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
<small class="error-message" id="emailError"></small>
|
||||
|
||||
<label for="phone">Phone:</label>
|
||||
<input type="number" id="phone" name="phone" required />
|
||||
<small class="error-message" id="phoneError"></small>
|
||||
|
||||
<label>Gender:</label>
|
||||
<div class="radio-group">
|
||||
<input type="radio" id="male" name="gender" value="male" required /> Male
|
||||
<input type="radio" id="female" name="gender" value="female" /> Female
|
||||
<input type="radio" id="other" name="gender" value="other" /> Other
|
||||
</div>
|
||||
<small class="error-message" id="genderError"></small>
|
||||
|
||||
<label for="age">Age:</label>
|
||||
<input type="number" id="age" name="age" required />
|
||||
<small class="error-message" id="ageError"></small>
|
||||
<div class="container">
|
||||
<button type="submit">Next</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Professional Details -->
|
||||
|
||||
<form id="professionalDetailsForm" style="display: none">
|
||||
<h2>Professional Details Form</h2>
|
||||
<label for="education">Education:</label>
|
||||
<select id="education" name="education" required>
|
||||
<option value="" disabled selected>Select your education</option>
|
||||
<option value="high_school">High School</option>
|
||||
<option value="bachelors">Bachelor's</option>
|
||||
<option value="masters">Master's</option>
|
||||
<option value="phd">Ph.D</option>
|
||||
</select>
|
||||
<small class="error-message" id="educationError"></small>
|
||||
|
||||
<label>Skills:</label>
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="skill1" name="skills" value="html" /> HTML<br />
|
||||
<input type="checkbox" id="skill2" name="skills" value="css" /> CSS<br />
|
||||
<input type="checkbox" id="skill3" name="skills" value="javascript" /> JavaScript<br />
|
||||
<input type="checkbox" id="skill4" name="skills" value="react" /> React<br />
|
||||
<input type="checkbox" id="skill5" name="skills" value="nodejs" /> Node.js
|
||||
</div>
|
||||
<small class="error-message" id="skillsError"></small>
|
||||
|
||||
<label for="experience">Experience (in years):</label>
|
||||
<input type="number" id="experience" name="experience" min="0" max="50" required />
|
||||
<small class="error-message" id="experienceError"></small>
|
||||
|
||||
<label for="currentRole">Current Role:</label>
|
||||
<input type="text" id="currentRole" name="currentRole" required />
|
||||
<small class="error-message" id="roleError"></small>
|
||||
<div class="container">
|
||||
<button type="button" id="prevButton">Prev</button>
|
||||
<button type="submit">Next</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Summary Section -->
|
||||
<div id="summary" style="display: none;">
|
||||
<h3>Summary Section</h3>
|
||||
<div id="personalSummary"></div>
|
||||
<button id="editPersonalDetails">Edit Personal Details</button>
|
||||
|
||||
<div id="professionalSummary"></div>
|
||||
<button id="editProfessionalDetails">Edit Professional Details</button>
|
||||
|
||||
<button id="finalSubmit">Submit</button>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div id="successMessage" style="display: none">
|
||||
<h2>Form Submitted Successfully!</h2>
|
||||
</div>
|
||||
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
scripts.js
Normal file
212
scripts.js
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const personalDetailsForm = document.getElementById('personalDetailsForm');
|
||||
const professionalDetailsForm = document.getElementById('professionalDetailsForm');
|
||||
const summarySection = document.getElementById('summary');
|
||||
const finalSubmitButton = document.getElementById('finalSubmit');
|
||||
const personalSummary = document.getElementById('personalSummary');
|
||||
const professionalSummary = document.getElementById('professionalSummary');
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
const formData = {}; // Store form data
|
||||
|
||||
// Real-time validation for personal details
|
||||
document.getElementById('fullName').addEventListener('input', () => {
|
||||
const fullName = document.getElementById('fullName').value.trim();
|
||||
const error = document.getElementById('nameError');
|
||||
if (!/^[a-zA-Z\s]{3,}$/.test(fullName)) {
|
||||
error.textContent = 'Full Name must be at least 3 characters and contain no numbers.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('email').addEventListener('input', () => {
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const error = document.getElementById('emailError');
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
error.textContent = 'Please enter a valid email address.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('phone').addEventListener('input', () => {
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const error = document.getElementById('phoneError');
|
||||
if (!/^\d{10}$/.test(phone)) {
|
||||
error.textContent = 'Phone number must be exactly 10 digits.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('input[name="gender"]').forEach((input) => {
|
||||
input.addEventListener('change', () => {
|
||||
const gender = document.querySelector('input[name="gender"]:checked');
|
||||
const error = document.getElementById('genderError');
|
||||
if (!gender) {
|
||||
error.textContent = 'Please select a gender.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('age').addEventListener('input', () => {
|
||||
const age = document.getElementById('age').value.trim();
|
||||
const error = document.getElementById('ageError');
|
||||
if (age < 18 || age > 100 || !age) {
|
||||
error.textContent = 'Age must be between 18 and 100.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Real-time validation for professional details
|
||||
document.getElementById('education').addEventListener('change', () => {
|
||||
const education = document.getElementById('education').value;
|
||||
const error = document.getElementById('educationError');
|
||||
if (!education) {
|
||||
error.textContent = 'Please select your education.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('input[name="skills"]').forEach((input) => {
|
||||
input.addEventListener('change', () => {
|
||||
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value);
|
||||
const error = document.getElementById('skillsError');
|
||||
if (skills.length === 0) {
|
||||
error.textContent = 'Please select at least one skill.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('experience').addEventListener('input', () => {
|
||||
const experience = document.getElementById('experience').value.trim();
|
||||
const error = document.getElementById('experienceError');
|
||||
if (experience < 0 || experience > 50 || !experience) {
|
||||
error.textContent = 'Experience must be between 0 and 50 years.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('currentRole').addEventListener('input', () => {
|
||||
const currentRole = document.getElementById('currentRole').value.trim();
|
||||
const error = document.getElementById('roleError');
|
||||
if (!currentRole) {
|
||||
error.textContent = 'Please enter your current role.';
|
||||
} else {
|
||||
error.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Handle "Previous" button click to switch between forms
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
professionalDetailsForm.style.display = 'none';
|
||||
personalDetailsForm.style.display = 'block';
|
||||
});
|
||||
|
||||
// Form submission handler
|
||||
document.querySelectorAll('form').forEach((form) => {
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
// Clear previous error messages
|
||||
document.querySelectorAll('.error-message').forEach((error) => {
|
||||
error.textContent = '';
|
||||
});
|
||||
|
||||
let isValid = true;
|
||||
|
||||
try {
|
||||
if (form.id === 'personalDetailsForm') {
|
||||
// Validate personal details on submission
|
||||
const fullName = document.getElementById('fullName').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const gender = document.querySelector('input[name="gender"]:checked');
|
||||
const age = document.getElementById('age').value.trim();
|
||||
|
||||
if (!/^[a-zA-Z\s]{3,}$/.test(fullName)) isValid = false;
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) isValid = false;
|
||||
if (!/^\d{10}$/.test(phone)) isValid = false;
|
||||
if (!gender) isValid = false;
|
||||
if (age < 18 || age > 100 || !age) isValid = false;
|
||||
|
||||
if (isValid) {
|
||||
formData.personalDetails = { fullName, email, phone, gender: gender.value, age };
|
||||
personalDetailsForm.style.display = 'none';
|
||||
professionalDetailsForm.style.display = 'block';
|
||||
}
|
||||
} else if (form.id === 'professionalDetailsForm') {
|
||||
// Validate professional details on submission
|
||||
const education = document.getElementById('education').value;
|
||||
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value);
|
||||
const experience = document.getElementById('experience').value.trim();
|
||||
const currentRole = document.getElementById('currentRole').value.trim();
|
||||
|
||||
if (!education) isValid = false;
|
||||
if (skills.length === 0) isValid = false;
|
||||
if (experience < 0 || experience > 50 || !experience) isValid = false;
|
||||
if (!currentRole) isValid = false;
|
||||
|
||||
if (isValid) {
|
||||
formData.professionalDetails = { education, skills, experience, currentRole };
|
||||
localStorage.setItem('formData', JSON.stringify(formData));
|
||||
|
||||
// Populate the summary section with the form data
|
||||
personalSummary.innerHTML = `
|
||||
<h3>Personal Details</h3>
|
||||
<pre>${JSON.stringify(formData.personalDetails, null, 2)}</pre>
|
||||
`;
|
||||
professionalSummary.innerHTML = `
|
||||
<h3>Professional Details</h3>
|
||||
<pre>${JSON.stringify(formData.professionalDetails, null, 2)}</pre>
|
||||
`;
|
||||
professionalDetailsForm.style.display = 'none';
|
||||
summarySection.style.display = 'block';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing the form:', error);
|
||||
alert('An unexpected error occurred. Please try again.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle final submit (download the form data as a JSON file)
|
||||
finalSubmitButton.addEventListener('click', () => {
|
||||
try {
|
||||
const jsonData = JSON.stringify(formData, null, 2);
|
||||
const blob = new Blob([jsonData], { type: 'application/json' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'formData.json';
|
||||
link.click();
|
||||
|
||||
summarySection.style.display = 'none';
|
||||
successMessage.style.display = 'block';
|
||||
} catch (error) {
|
||||
console.error('Error during final submission:', error);
|
||||
alert('An error occurred while submitting the form. Please try again.');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Handle "Edit Personal Details" button click
|
||||
document.getElementById('editPersonalDetails').addEventListener('click', () => {
|
||||
summarySection.style.display = 'none';
|
||||
personalDetailsForm.style.display = 'block';
|
||||
});
|
||||
|
||||
// Handle "Edit Professional Details" button click
|
||||
document.getElementById('editProfessionalDetails').addEventListener('click', () => {
|
||||
summarySection.style.display = 'none';
|
||||
professionalDetailsForm.style.display = 'block';
|
||||
});
|
||||
});
|
||||
110
styles.css
Normal file
110
styles.css
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/* Global Styles */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f4f4f9;
|
||||
color: #333;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Form Container */
|
||||
form {
|
||||
max-width: 600px; /* Increased width for a larger form */
|
||||
margin: 20px auto;
|
||||
padding: 30px; /* Increased padding for more space */
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: #4CAF50;
|
||||
margin-bottom: 20px; /* Added margin for spacing between title and form */
|
||||
}
|
||||
|
||||
/* Form Group */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px; /* Added bottom margin for spacing between inputs */
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Error Message */
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: 10px; /* Added margin for space between button and inputs */
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.radio-group input[type="radio"] {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Summary Section */
|
||||
#summary {
|
||||
padding: 25px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
width: 70%; /* Increased width for a larger summary */
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
#summary h3 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#summary button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#summary button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue