<!-- Age Calculator Tool -->
<div id="age-calculator" style="max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif;">
<h2 style="text-align: center;">Age Calculator</h2>
<label for="dob" style="display: block; margin-bottom: 8px;">Enter your Date of Birth:</label>
<input type="date" id="dob" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 16px;" required>
<button id="calculate-age" style="width: 100%; padding: 10px; background-color: #007BFF; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Calculate Age</button>
<div id="age-result" style="margin-top: 16px; text-align: center; font-size: 18px; font-weight: bold;"></div>
</div>
<script>
document.getElementById('calculate-age').addEventListener('click', function() {
const dob = document.getElementById('dob').value;
if (!dob) {
document.getElementById('age-result').textContent = "Please select your date of birth.";
return;
}
const dobDate = new Date(dob);
const today = new Date();
let age = today.getFullYear() - dobDate.getFullYear();
const monthDiff = today.getMonth() - dobDate.getMonth();
const dayDiff = today.getDate() - dobDate.getDate();
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
document.getElementById('age-result').textContent = `You are ${age} years old.`;
});
</script>