For First code review
This commit is contained in:
Mihir-Singh-Chouhan
parent
35a4d55324
commit
b5793eb546
88
index.html
88
index.html
|
|
@ -9,60 +9,64 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="form-Container">
|
||||
<div class="step1" id="page1">
|
||||
<form action="script.js" id="personal-datail">
|
||||
<h2>Personal-Details</h2>
|
||||
<div class="form-container">
|
||||
<div class="step" id="step1">
|
||||
<form id="personal-details">
|
||||
<h2>Personal Details</h2>
|
||||
<fieldset>
|
||||
<legend>Personal-Details</legend>
|
||||
<legend>Personal Details</legend>
|
||||
<input type="text" id="fullname" pattern="[A-Za-z\s]{3,}" minlength="3" placeholder="Enter your name" required>
|
||||
<input type="email" placeholder="Enter your email" required>
|
||||
<input type="tel" placeholder="Enter mobile number" id="phone-number" pattern="[0-9]{10}" maxlength="10" required>
|
||||
<p id="gender-id">Select your gender:
|
||||
<label for="male"><input type="radio" name="gender" value="male" id="male" required>Male</label>
|
||||
<label for="female"><input type="radio" name="gender" value="female" id="female" required>Female</label>
|
||||
<label for="other"><input type="radio" name="gender" value="other" id="other" required>Other</label>
|
||||
<input type="email" id="email" placeholder="Enter your email" required>
|
||||
<input type="tel" id="phone" pattern="[0-9]{10}" maxlength="10" placeholder="Enter mobile number" required>
|
||||
<p id="gender">Select your gender:
|
||||
<label><input type="radio" name="gender" value="male" required> Male</label>
|
||||
<label><input type="radio" name="gender" value="female" required> Female</label>
|
||||
<label><input type="radio" name="gender" value="other" required> Other</label>
|
||||
</p>
|
||||
<p>Enter your age:
|
||||
<input type="tel" id="age" min="18" max="100" maxlength="2" required>
|
||||
</p>
|
||||
<p>Enter your age:
|
||||
<input type="tel" id="input-age" min="18" max="100" maxlength="2" required style="width: 80px;"></p>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="step2" id="page2">
|
||||
<div class="step" id="step2">
|
||||
<h2>Professional Details</h2>
|
||||
<p>Education</p>
|
||||
<select name="text" id="education-type" required>
|
||||
<option value="Default">Default</option>
|
||||
<option value="Master's">PG or Above</option>
|
||||
<option value="UG">UG</option>
|
||||
<option value="Higher Secondary"> 12 </option>
|
||||
<option value="High School">10</option>
|
||||
<option value="Below">Below 10</option>
|
||||
</select>
|
||||
|
||||
<div class="skills">
|
||||
<p>Select your skills</p>
|
||||
<label for="html & css"> <input type="checkbox" id="html & css">HTML ans CSS</label>
|
||||
<label for="js"> <input type="checkbox" id="js">Java Script</label>
|
||||
<label for="React"> <input type="checkbox" id="React">React</label>
|
||||
<label for="dbms"> <input type="checkbox" id="dbms">DBMS</label>
|
||||
<label for="java"> <input type="checkbox" id="java">JAVA</label>
|
||||
</div>
|
||||
<p>Experience</p>
|
||||
<input type="tel" min="0" max="50" maxlength="2" required placeholder="0-50 years">
|
||||
<p>Current - Role</p>
|
||||
<input type="text" placeholder="Current-Role" required>
|
||||
<form id="professional-details">
|
||||
<p>Education</p>
|
||||
<select id="education" required>
|
||||
<option value="">Select your education</option>
|
||||
<option value="Masters">PG or Above</option>
|
||||
<option value="UG">UG</option>
|
||||
<option value="Higher Secondary">12</option>
|
||||
<option value="High School">10</option>
|
||||
<option value="Below">Below 10</option>
|
||||
</select>
|
||||
<div class="skills">
|
||||
<p>Select your skills</p>
|
||||
<label><input type="checkbox" value="HTML & CSS"> HTML & CSS</label>
|
||||
<label><input type="checkbox" value="JavaScript"> JavaScript</label>
|
||||
<label><input type="checkbox" value="React"> React</label>
|
||||
<label><input type="checkbox" value="DBMS"> DBMS</label>
|
||||
<label><input type="checkbox" value="Java"> Java</label>
|
||||
</div>
|
||||
<p>Experience</p>
|
||||
<input type="number" id="experience" min="0" max="50" placeholder="0-50 years" required>
|
||||
<p>Current Role</p>
|
||||
<input type="text" id="current-role" placeholder="Current Role" required>
|
||||
</form>
|
||||
</div>
|
||||
<div class="Review-Submit">
|
||||
|
||||
<div class="step" id="step3">
|
||||
<h2>Review & Submit</h2>
|
||||
<div id="review"></div>
|
||||
<button id="submit-btn">Submit</button>
|
||||
<button id="refresh-btn">Reset</button>
|
||||
</div>
|
||||
<div id="btn-div">
|
||||
<button id="prv-btn" >Previous</button>
|
||||
<button id="nxt-btn">Next</button>
|
||||
<button id="review-submit">Review-Submit</button>
|
||||
<button id="prev-btn">Previous</button>
|
||||
<button id="next-btn">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
154
script.js
154
script.js
|
|
@ -1,20 +1,140 @@
|
|||
document.getElementById("nxt-btn").addEventListener('click' ,function(){
|
||||
if(document.getElementById('personal-datail').checkValidity())
|
||||
{
|
||||
document.getElementById('page1').classList.remove('active');
|
||||
document.getElementById('page2').classList.add('active');
|
||||
document.getElementById('prv-btn').style.display = 'block';
|
||||
|
||||
}
|
||||
else{
|
||||
document.getElementById('personal-detail').reportValidity();
|
||||
}
|
||||
// initial
|
||||
|
||||
let currentStep = 1;
|
||||
const totalSteps = 3;
|
||||
|
||||
document.getElementById("next-btn").addEventListener("click", function () {
|
||||
if (validateStep(currentStep)) {
|
||||
currentStep++;
|
||||
showStep(currentStep);
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("Please fill all the fields");
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('prv-btn').addEventListener('click',function()
|
||||
{
|
||||
document.getElementById('page2').classList.remove('active');
|
||||
document.getElementById('page1').classList.add('active');
|
||||
document.getElementById('prv-btn').style.display = 'none';
|
||||
});
|
||||
document.getElementById("prev-btn").addEventListener("click", function () {
|
||||
currentStep--;
|
||||
showStep(currentStep);
|
||||
});
|
||||
|
||||
document.getElementById("submit-btn").addEventListener("click", function () {
|
||||
if (validateStep(currentStep)) {
|
||||
saveData();
|
||||
alert("Form submitted successfully!");
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("refresh-btn").addEventListener("click", function () {
|
||||
localStorage.removeItem("formData");
|
||||
location.reload();
|
||||
});
|
||||
|
||||
function showStep(step) {
|
||||
for (let i = 1; i <= totalSteps; i++) {
|
||||
document.getElementById(`step${i}`).style.display = i === step ? "block" : "none";
|
||||
}
|
||||
document.getElementById("prev-btn").style.display = step === 1 ? "none" : "inline-block";
|
||||
document.getElementById("next-btn").style.display = step === totalSteps ? "none" : "inline-block";
|
||||
document.getElementById("submit-btn").style.display = step === totalSteps ? "inline-block" : "none";
|
||||
document.getElementById("refresh-btn").style.display = step === totalSteps ? "inline-block" : "none";
|
||||
updateReview();
|
||||
}
|
||||
|
||||
function validateStep(step) {
|
||||
const form = step === 1 ? document.getElementById("personal-details") : document.getElementById("professional-details");
|
||||
return form.checkValidity();
|
||||
}
|
||||
|
||||
function updateReview() {
|
||||
if (currentStep === totalSteps) {
|
||||
const review = document.getElementById("review");
|
||||
review.innerHTML = `
|
||||
<h3>Personal Details</h3>
|
||||
<p>Full Name: ${document.getElementById("fullname").value}</p>
|
||||
<p>Email: ${document.getElementById("email").value}</p>
|
||||
<p>Phone: ${document.getElementById("phone").value}</p>
|
||||
<p>Gender: ${document.querySelector('input[name="gender"]:checked').value}</p>
|
||||
<p>Age: ${document.getElementById("age").value}</p>
|
||||
<button type="button" id="edit-personal-details" onclick="editStep(1)">Edit</button>
|
||||
|
||||
<h3>Professional Details</h3>
|
||||
<p>Education: ${document.getElementById("education").value}</p>
|
||||
<p>Skills: ${Array.from(document.querySelectorAll('.skills input:checked')).map(el => el.value).join(", ")}</p>
|
||||
<p>Experience: ${document.getElementById("experience").value}</p>
|
||||
<p>Current Role: ${document.getElementById("current-role").value}</p>
|
||||
<button type="button" id="edit-professional-details" onclick="editStep(2)">Edit</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function saveData() {
|
||||
const data = {
|
||||
fullName: document.getElementById("fullname").value,
|
||||
email: document.getElementById("email").value,
|
||||
phone: document.getElementById("phone").value,
|
||||
gender: document.querySelector('input[name="gender"]:checked')?.value,
|
||||
age: document.getElementById("age").value,
|
||||
education: document.getElementById("education").value,
|
||||
skills: Array.from(document.querySelectorAll('.skills input:checked')).map(el => el.value),
|
||||
experience: document.getElementById("experience").value,
|
||||
currentRole: document.getElementById("current-role").value,
|
||||
};
|
||||
|
||||
// Save to localStorage
|
||||
localStorage.setItem("formData", JSON.stringify(data));
|
||||
|
||||
// Log saved data for debugging
|
||||
console.log("Data saved to localStorage:", data);
|
||||
}
|
||||
|
||||
|
||||
function loadSavedData() {
|
||||
const savedData = JSON.parse(localStorage.getItem("formData"));
|
||||
|
||||
// Log loaded data for debugging
|
||||
console.log("Loaded Data from localStorage:", savedData);
|
||||
|
||||
if (savedData) {
|
||||
document.getElementById("fullname").value = savedData.fullName;
|
||||
document.getElementById("email").value = savedData.email;
|
||||
document.getElementById("phone").value = savedData.phone;
|
||||
document.querySelector(`input[name="gender"][value="${savedData.gender}"]`).checked = true;
|
||||
document.getElementById("age").value = savedData.age;
|
||||
document.getElementById("education").value = savedData.education;
|
||||
|
||||
savedData.skills.forEach(skill => {
|
||||
document.querySelector(`.skills input[value="${skill}"]`).checked = true;
|
||||
});
|
||||
|
||||
document.getElementById("experience").value = savedData.experience;
|
||||
document.getElementById("current-role").value = savedData.currentRole;
|
||||
}
|
||||
}
|
||||
|
||||
function clearForm() {
|
||||
|
||||
document.getElementById("personal-details").reset();
|
||||
|
||||
|
||||
document.getElementById("professional-details").reset();
|
||||
|
||||
|
||||
const genderRadios = document.querySelectorAll('input[name="gender"]');
|
||||
genderRadios.forEach(radio => radio.checked = false);
|
||||
|
||||
const skillCheckboxes = document.querySelectorAll('.skills input');
|
||||
skillCheckboxes.forEach(checkbox => checkbox.checked = false);
|
||||
}
|
||||
|
||||
function editStep(step) {
|
||||
currentStep = step;
|
||||
showStep(currentStep);
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
clearForm();
|
||||
showStep(currentStep);
|
||||
loadSavedData();
|
||||
};
|
||||
|
|
|
|||
170
style.css
170
style.css
|
|
@ -1,76 +1,130 @@
|
|||
body{
|
||||
margin: 0;padding: 0;
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rem;
|
||||
background-image: linear-gradient(#FAF6E3,#D8DBBD,#B59F78);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: linear-gradient(#FAF6E3, #D8DBBD, #B59F78);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
input{
|
||||
border: 1px solid black;
|
||||
html
|
||||
{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
input::placeholder{
|
||||
font-size: 12px;
|
||||
color: black;
|
||||
}
|
||||
.form-Container,
|
||||
.personal-detail,
|
||||
.step2{
|
||||
margin: 0 auto;
|
||||
width: 75vw;
|
||||
}
|
||||
|
||||
|
||||
.form-Container legend{
|
||||
font-size:16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#gender-id{
|
||||
font-weight: bold;
|
||||
}
|
||||
#gender-id label{
|
||||
font-weight: normal;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#btn-div{
|
||||
input::placeholder {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
width: 75%;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#gender {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#btn-div {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
#btn-div button{
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
width: 5rem;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(97, 97, 211);
|
||||
|
||||
#prev-btn, #next-btn, #submit-btn, #refresh-btn {
|
||||
background-color: rgb(57, 57, 220);
|
||||
color: white;
|
||||
bottom: 0;
|
||||
|
||||
|
||||
}
|
||||
#btn-div button:hover{
|
||||
background-color: #fff;
|
||||
color: rgb(17, 17, 17);
|
||||
font-size: 16px;
|
||||
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
max-width: 150px;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.step2
|
||||
{
|
||||
display: none;
|
||||
#prev-btn:hover, #next-btn:hover, #submit-btn:hover, #refresh-btn:hover {
|
||||
background-color: rgb(13, 13, 242);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.step2.active
|
||||
{
|
||||
display: inline;
|
||||
|
||||
legend {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.skills label {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#review button {
|
||||
background-color: #f17e13;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
margin-top: 10px;
|
||||
max-width: 85px;
|
||||
}
|
||||
|
||||
#review button:hover {
|
||||
background-color: #ec971f;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#review button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#review button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
#prv-btn,#review-submit
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in a new issue