age calculator in javascript

Age Calculator in JavaScript: Calculate Age from Date of Birth

by

How to create to create an age calculator in JavaScript that calculates Age from Date of Birth?

Read on, because we will hand you a step-by-step tutorial on developing a simple age calculator in JavaScript.

Let’s dive in!

How to calculate age from date of birth in JavaScript?

// Function to calculate age
function calculateAge(birthDate, otherDate) {
    birthDate = new Date(birthDate);
    otherDate = new Date(otherDate);

    let years = (otherDate.getFullYear() - birthDate.getFullYear());

    if (otherDate.getMonth() < birthDate.getMonth() ||
        otherDate.getMonth() == birthDate.getMonth() && otherDate.getDate() < birthDate.getDate()) {
        years--;
    }

    return years;
}

// Usage
let birthDate = "08/13/1993"; // Format: MM/DD/YYYY
let otherDate = new Date(); // Current date

let age = calculateAge(birthDate, otherDate);

console.log("The calculated age is: " + age);

The code above will calculate the age based on the provided birth date and the current date.

Then, it will logs the calculated age to the console. You can replace new Date() with any other date you want to calculate the age at that specific date.

Remember to use the same date format as the birth date.

Output:

30

How to create a simple age calculator in JavaScript?

Here’s a step-by-step guide to creating a simple age calculator using JavaScript and HTML:

Step 1: Create the HTML structure

We need to create the HTML structure first for our age calculator. This will include an input field for the date of birth and a button to calculate the age. 

<!DOCTYPE html>
<html>
<head>
    <title>Age Calculator</title>
</head>
<body>
  <h1>How to create age calculator in JavaScript</h1>
    <label for="dob">Enter your Date of Birth:</label><br>
    <input type="date" id="dob" name="dob">
    <button onclick="calculateAge()">Calculate Age</button><br>
    <p id="result"></p>
</body>
</html>

Step 2: Write the JavaScript function

After we had created the HTML structure, we needed to write a JavaScript function that calculates the age based on the date of birth. 

function calculateAge() {
    var dob = new Date(document.getElementById('dob').value);
    var diff_ms = Date.now() - dob.getTime();
    var age_dt = new Date(diff_ms); 

    var age = Math.abs(age_dt.getUTCFullYear() - 1970);

    document.getElementById('result').textContent = 'Age is ' + age;
}

This function gets the value from the date input field, calculates the age, and then displays the result in the paragraph element with id result.

Here’s the complete code:

<!DOCTYPE html>
<html>
<head>
    <title>Age Calculator</title>
</head>
<body>
    <h1>How to create age calculator in JavaScript</h1>
    <label for="dob">Enter your Date of Birth:</label><br> <br>
    <input type="date" id="dob" name="dob">
    

    <button onclick="calculateAge()">Calculate Age</button><br>
    <p id="result"></p>

    <script type="text/javascript">
        function calculateAge() {
            var dob = new Date(document.getElementById('dob').value);
            var diff_ms = Date.now() - dob.getTime();
            var age_dt = new Date(diff_ms); 

            var age = Math.abs(age_dt.getUTCFullYear() - 1970);

            document.getElementById('result').textContent = 'Age is ' + age;
        }
    </script>

</body>
</html>

Output:

Conclusion

In conclusion, we’ve provided two examples for creating an age calculator in JavaScript.

The first one involves a JavaScript function calculateAge() that calculates the age based on a provided birth date and the current date.

The second example demonstrates how to create a simple age calculator with an HTML structure, an input field for the date of birth, and a button to trigger the age calculation using JavaScript.

Both examples are effective ways to calculate and display a person’s age based on their date of birth.

We hope this article has provided you with enough information on how to create the age calculator in JavaScript.

If you want to explore more JavaScript topics, check out the following articles:

Thank you for reading Itsourcecoders 😊.

Leave a Comment