Skip to content

Exam-Form-page #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Adityakumarchaurasiya wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Exam-Form-page #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@
# login-page
# login-page

I have created a login page that incorporates real-time validation, providing an interactive and dynamic user experience. The form is built using HTML, CSS, and JavaScript, with a focus on responsive design and usability. Additionally, I have implemented smooth animations that enhance the visual appeal of the page and contribute to a seamless user experience. These animations make the form more engaging while ensuring users can easily navigate the login process.

# Extra points:

Real-Time Validation: Instant feedback is provided to the user as they fill out the form, ensuring that data is correct before submission. This feature helps prevent errors and enhances the overall user experience.
Responsive Design: The form is fully responsive, ensuring it works well across various devices, including desktops, tablets, and smartphones.
Smooth Animations: The use of animations improves the visual flow, making the form feel more polished and modern.
User-Friendly Interface: With its intuitive layout and clear instructions, the form is easy to navigate, even for first-time users.
Security Focus: Although not detailed in the original description, real-time validation can help catch common input errors, contributing to a more secure login process.

# Technologies used

html,
css,
javascript
142 changes: 39 additions & 103 deletions project.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<style>
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f7fc;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background-color: #a4e1cd;
padding: 30px;
border-radius: 89087989px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
}

h1 {
font-size: 2em;
margin-bottom: 203523px;
}

.registration-form {
display: flex;
flex-direction: column;
gap: 15px;
}

label {
text-align: left;
font-size: 1em;
font-weight: bold;
}

input, select {
padding: 10px;
font-size: 1em;
border: 1px solid #e3f38a;
border-radius: 5px;
}

input[type="date"], select {
cursor: pointer;
}

button {
padding: 1000px;
font-size: 1.1em;
background-color: #3e32e1;
color: white;
border: none;
border-radius: 55576px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #3975bd;
}

.checkbox-group {
display: flex;
align-items: center;
gap: 5px;
}

.checkbox-group input {
transform: scale(1.2);
}


</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exam Registration</title>
<link rel="stylesheet" href="styles.css">
<link href="style.css" rel="stylesheet">
</head>
<body>

<body>
<div class="container">
<h1>Exam Registration Form</h1>

<form action="#" method="POST" class="registration-form">
<label for="full-name">Full Name</label>

<h1>Exam Registration</h1>
<form action="#" method="POST" class="registration-form" id="registrationForm">
<div class="form-group">
<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full-name" required>
<span class="error-message" id="nameError"></span>
</div>

<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<span class="error-message" id="emailError"></span>
</div>

<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
<div class="form-group">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
<span class="error-message" id="dobError"></span>
</div>

<label for="exam">Select Exam</label>
<select id="exam" name="exam" required>
<option value="">--Select an exam--</option>
<option value="math">Mathematics</option>
<option value="science">Science</option>
<option value="english">English</option>
</select>
<div class="form-group">
<label for="exam">Select Exam</label>
<select id="exam" name="exam" required>
<option value="">-- Select an exam --</option>
<option value="math">Mathematics</option>
<option value="science">Science</option>
<option value="english">English</option>
</select>
<span class="error-message" id="examError"></span>
</div>

<label for="exam-date">Preferred Exam Date</label>
<input type="date" id="exam-date" name="exam-date" required>
<div class="form-group">
<label for="exam-date">Preferred Exam Date</label>
<input type="date" id="exam-date" name="exam-date" required>
<span class="error-message" id="examDateError"></span>
</div>

<div class="checkbox-group">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms and conditions</label>
<span class="error-message" id="termsError"></span>
</div>

<button type="submit">Register</button>
<button type="submit">Register Now</button>
<div class="success-message" id="successMessage"></div>
</form>
</div>

<script src="script.js"></script>
</body>
</html>
</html>
126 changes: 126 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@

const form = document.getElementById('registrationForm');
const successMessage = document.getElementById('successMessage');

// Error elements
const errorElements = {
name: document.getElementById('nameError'),
email: document.getElementById('emailError'),
dob: document.getElementById('dobError'),
exam: document.getElementById('examError'),
examDate: document.getElementById('examDateError'),
terms: document.getElementById('termsError')
};

// Validation functions
const validators = {
name: (value) => value.trim().length >= 3,
email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
dob: (value) => {
const dob = new Date(value);
const today = new Date();
return dob < today;
},
exam: (value) => value !== '',
examDate: (value) => {
const selectedDate = new Date(value);
const today = new Date();
today.setHours(0, 0, 0, 0);
return selectedDate >= today;
},
terms: (checked) => checked
};

// Error messages
const errorMessages = {
name: 'Please enter a valid name (at least 3 characters)',
email: 'Please enter a valid email address',
dob: 'Please enter a valid date of birth',
exam: 'Please select an exam',
examDate: 'Exam date must be in the future',
terms: 'You must agree to the terms and conditions'
};

// Show error message
function showError(field, message) {
errorElements[field].textContent = message;
errorElements[field].style.display = 'block';
}

// Clear error message
function clearError(field) {
errorElements[field].textContent = '';
errorElements[field].style.display = 'none';
}

// Validate field
function validateField(field, value) {
let isValid = true;

if (field === 'terms') {
isValid = validators[field](document.getElementById(field).checked);
} else {
isValid = validators[field](value);
}

if (!isValid) {
showError(field, errorMessages[field]);
} else {
clearError(field);
}
return isValid;
}

// Form submission handler
form.addEventListener('submit', (e) => {
e.preventDefault();
let isFormValid = true;

// Validate all fields
const fields = ['name', 'email', 'dob', 'exam', 'examDate', 'terms'];
fields.forEach(field => {
const value = field === 'terms' ?
document.getElementById(field).checked :
document.getElementById(field).value;

if (!validateField(field, value)) {
isFormValid = false;
}
});

if (isFormValid) {
successMessage.textContent = 'Registration successful! Redirecting...';
successMessage.style.display = 'block';
form.reset();

// Simulate API call
setTimeout(() => {
successMessage.textContent = 'Registration completed successfully!';
}, 2000);
}
});

// Real-time validation
document.getElementById('full-name').addEventListener('input', (e) => {
validateField('name', e.target.value);
});

document.getElementById('email').addEventListener('input', (e) => {
validateField('email', e.target.value);
});

document.getElementById('dob').addEventListener('change', (e) => {
validateField('dob', e.target.value);
});

document.getElementById('exam').addEventListener('change', (e) => {
validateField('exam', e.target.value);
});

document.getElementById('exam-date').addEventListener('change', (e) => {
validateField('examDate', e.target.value);
});

document.getElementById('terms').addEventListener('change', (e) => {
validateField('terms', e.target.checked);
});
Loading