Course Code: CSE3150
Course Title: Front End Full Stack Development
Lab sheet 3 - Module 1
Problem Statement:
Design a web form for signing up with the following fields:
Name: a required text input field for the user's name
Date of Birth: a required date input field for the user's date of birth
Age: a range input field for the user's age, with a minimum value of 18 and a maximum value of
100
Email: a required email input field for the user's email address
Website: an optional URL input field for the user's website
Sign Up button: a submit button for submitting the form
The form also can include some JavaScript code that adds some functionality to the form:
Conditional logic to show or hide fields based on the user's age. If the user is under 18, the age range
input field, email input field, and website input field will be hidden. If the user is between 18 and 25, the
age range input field and email input field will be shown, but the website input field will be hidden. If the
user is over 25, all fields will be shown.
Inline validation for required fields. If a required field is left blank, a message will be displayed asking the
user to fill out the field.
A helper function to calculate the user's age based on their date of birth.
Code:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<div id="age-range">
<label for="age">Age:</label>
<input type="range" id="age" name="age" min="18" max="100">
</div>
<div id="email-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div id="website-group">
<label for="website">Website:</label>
<input type="url" id="website" name="website">
</div>
<button type="submit">Sign Up</button>
</form>
<script>
// conditional logic to show or hide fields based on user input
const ageRange = document.getElementById("age-range");
const emailGroup = document.getElementById("email-group");
const websiteGroup = document.getElementById("website-group");
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
document.getElementById("dob").addEventListener("change", function() {
const age = calculateAge(this.value);
if (age < 18) {
ageRange.style.display = "none";
emailGroup.style.display = "none";
websiteGroup.style.display = "none";
} else if (age >= 18 && age <= 25) {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "none";
} else {
ageRange.style.display = "block";
emailGroup.style.display = "block";
websiteGroup.style.display = "block";
}
});
// inline validation
document.querySelectorAll("input[required]").forEach(input => {
input.addEventListener("invalid", function() {
this.setCustomValidity("Please fill out this field.");
});
input.addEventListener("input", function() {
this.setCustomValidity("");
});
});
// helper function to calculate age from date of birth
function calculateAge(birthday) {
const today = new Date();
const birthDate = new Date(birthday);
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
</script>
Output:
Diff b/w Event handler and Event listener:
https://medium.com/geekculture/event-handlers-vs-event-listeners-in-javascript-b4086b8040b0
