akarsh.gupta/Assignment-123
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

completed assignment #1

Open
akarsh.gupta wants to merge 2 commits from dev into main
pull from: dev
merge into: akarsh.gupta:main
Conversation 0 Commits 2 Files changed 30 +120 -236
4 changed files with 120 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d37efb5c9d - Show all commits

3
README.md
View file

@ -1,2 +1 @@
# Assignment-123 Assignment - 1,2.3

121
contact.html
View file

@ -6,125 +6,8 @@
<title>Multi-Step Form</title> <title>Multi-Step Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<style> <link rel="stylesheet" href="css/contact.css">
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f7fa;
margin: 0;
}
.form-container {
max-width: 600px;
margin: auto;
margin-top: 6rem;
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.progress-container {
width: 100%;
height: 10px;
background-color: #e9ecef;
margin-bottom: 20px;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #007bff;
transition: width 0.3s ease;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.step {
display: none;
}
.step.active {
display: block;
}
input[type="text"],
input[type="email"],
input[type="number"],
select {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
transition: border-color 0.3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus {
border-color: #007bff;
outline: none;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.button-container button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
font-size: 16px;
}
.button-container button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
#successMessage {
display: none;
text-align: center;
margin-top: 20px;
padding: 20px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 5px;
}
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.step-indicator div {
width: 100%;
text-align: center;
padding: 10px;
border-radius: 5px;
background-color: #e9ecef;
color: #6c757d;
}
.step-indicator .active {
background-color: #007bff;
color: white;
}
@media (max-width: 600px) {
.button-container {
flex-direction: column;
}
.button-container button {
margin-bottom: 10px;
width: 100%;
}
}
</style>
</head> </head>
<body> <body>
<header> <header>

117
css/contact.css Normal file
View file

@ -0,0 +1,117 @@
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f7fa;
margin: 0;
}
.form-container {
max-width: 600px;
margin: auto;
margin-top: 6rem;
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.progress-container {
width: 100%;
height: 10px;
background-color: #e9ecef;
margin-bottom: 20px;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #007bff;
transition: width 0.3s ease;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.step {
display: none;
}
.step.active {
display: block;
}
input[type="text"],
input[type="email"],
input[type="number"],
select {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
transition: border-color 0.3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus {
border-color: #007bff;
outline: none;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.button-container button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
font-size: 16px;
}
.button-container button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
#successMessage {
display: none;
text-align: center;
margin-top: 20px;
padding: 20px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 5px;
}
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.step-indicator div {
width: 100%;
text-align: center;
padding: 10px;
border-radius: 5px;
background-color: #e9ecef;
color: #6c757d;
}
.step-indicator .active {
background-color: #007bff;
color: white;
}
@media (max-width: 600px) {
.button-container {
flex-direction: column;
}
.button-container button {
margin-bottom: 10px;
width: 100%;
}
}

115
js/script.js
View file

@ -4,118 +4,3 @@ function toggleMenu() {
} }
let currentStep = 0;
function showStep(step) {
const steps = document.querySelectorAll('.step');
const indicators = document.querySelectorAll('.step-indicator div');
steps.forEach(s => s.classList.remove('active'));
indicators.forEach(i => i.classList.remove('active'));
steps[step].classList.add('active');
indicators[step].classList.add('active');
}
function nextStep() {
if (validateStep(currentStep)) {
currentStep++;
if (currentStep >= document.querySelectorAll('.step').length) {
currentStep = document.querySelectorAll('.step').length - 1;
}
showStep(currentStep);
if (currentStep === 2) {
reviewData();
}
}
}
function prevStep() {
currentStep--;
if (currentStep < 0) {
currentStep = 0;
}
showStep(currentStep);
}
function validateStep(step) {
const inputs = document.querySelectorAll(`#step${step + 1} input, #step${step + 1} select`);
for (let input of inputs) {
if (!input.checkValidity()) {
input.reportValidity();
return false;
}
}
return true;
}
function reviewData() {
const fullName = document.getElementById('fullName').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const gender = document.querySelector('input[name="gender"]:checked').value;
const age = document.getElementById('age').value;
const education = document.getElementById('education').value;
const experience = document.getElementById('experience').value;
const currentRole = document.getElementById('currentRole').value;
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value).join(', ');
document.getElementById('review').innerHTML = `
<p><strong>Full Name:</strong> ${fullName}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone:</strong> ${phone}</p>
<p><strong>Gender:</strong> ${gender}</p>
<p><strong>Age:</strong> ${age}</p>
<p><strong>Education:</strong> ${education}</p>
<p><strong>Skills:</strong> ${skills}</p>
<p><strong>Experience:</strong> ${experience} years</p>
<p><strong>Current Role:</strong> ${currentRole}</p>
`;
}
function submitForm() {
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('input[name="skills"]:checked')).map(el => el.value),
experience: document.getElementById('experience').value,
currentRole: document.getElementById('currentRole').value
};
localStorage.setItem('formData', JSON.stringify(data));
document.getElementById('multiStepForm').style.display = 'none';
document.getElementById('successMessage').style.display = 'block';
}
function exportData() {
const data = localStorage.getItem('formData');
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'formData.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
function clearForm() {
document.getElementById('multiStepForm').reset();
localStorage.removeItem('formData');
currentStep = 0;
showStep(currentStep);
document.getElementById('successMessage').style.display = 'none';
}
// Initialize the form
showStep(currentStep);