Scribd
Upload
32 views3 pages

Labsheet3 With Javascript

Uploaded by

sowmiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views3 pages

Labsheet3 With Javascript

Uploaded by

sowmiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like