<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<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" />
<span class="age-value"></span>
</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>
const ageRange = document.getElementById('age-range');
const emailGroup = document.getElementById('email-group');
const websiteGroup = document.getElementById('website-group');
ageRange.style.display = emailGroup.style.display = websiteGroup.style.display = 'none';
document.getElementById('dob').addEventListener('change', function () {
const age = calculateAge(this.value);
ageRange.style.display = emailGroup.style.display = websiteGroup.style.display = age < 18 ? 'none' : age <= 25 ? 'block' : 'block';
ageRange.querySelector('.age-value').textContent = age;
ageRange.querySelector('input').value = age;
});
document.querySelectorAll('input[required]').forEach((input) => {
input.addEventListener('invalid', function () {
this.setCustomValidity('Please fill out this field.');
});
input.addEventListener('input', function () {
this.setCustomValidity('');
});
});
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;
}
document.getElementById('age').addEventListener('input', function () {
document.querySelector('.age-value').textContent = this.value;
});
</script>
</body>
</html>