bk04ch08/example12.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Determining a person’s age</title>
        <style>
            body {
                margin: 1em;
                font-size: 1.5em;
            }
            div {
                margin-top: .5em;
            }
        </style>
    </head>
    <body>
        <label for="date-picker">Select your birth date:</label>
        <input type="date" id="date-picker" value="2000-01-01">

        <div id="output">
        </div>

        <script>            
            // Add a `change` event listener to the date picker
            const datePicker = document.querySelector('#date-picker');
            datePicker.addEventListener('change', calculateAge);
            
            // Run this function when the date changes
            function calculateAge() {
                
                // Create a new Date object from the date picker value
                const birthDate = new Date(datePicker.value);
                
                // Store the user's birth year
                const birthYear = birthDate.getFullYear();
                
                // Make a Date object and set it
                // to the user's birthday this year
                const birthdayDate = new Date();
                birthdayDate.setMonth(birthDate.getMonth());
                birthdayDate.setDate(birthDate.getDate());
                
                // Store the current date and current year
                const currentDate = new Date();
                const currentYear = currentDate.getFullYear();
                
                // Calculate the user's age
                let userAge = currentYear - birthYear;
            
                // Has the birthday occurred yet this year?
                if (currentDate < birthdayDate) {
                    // If not, adjust the age down by one year
                    userAge -= 1;
                }
                // Output the result
                document.getElementById("output").innerHTML = `You are ${userAge} years old.`;
            }
        </script>
    </body>
</html>