AGE CALCULATOR

<!-- 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>