JavaScript Age Calculator

This lightweight JavaScript code helps you to create a simple age calculator. It calculates the age of a person based on the birth date entered in a form. When a user enters his/her birthday, the calculator retrieves the current date and time, calculates the difference in days between the two dates, calculates the age of the person in years, and displays the result in an HTML element.

Additionally, the code uses built-in JavaScript Date object and Math methods to perform the calculations and updates the HTML element with the age value using the innerHTML property.

How to Create JavaScript Age Calculator

First of all, load the Bootstrap CSS (optional) into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

Now, create the HTML structure for age calculator as follows:

<div class="container">
  <h1>Age Checker</h1>
  <div class="col-md-3">
    <div class="form-group">
      <label for="">Your BirthDate</label>
      <input type="date" class="form-control" id="yourbirth">
    </div>
    <div class="form-group">
      <button class="btn btn-danger" id="buttonAge">Check Age</button>
    </div>
    <div class="form-group">
      <div class="well">
        Your age : <b><span id="yourAge"></span>
      </div>
    </div>
  </div>
</div>

Finally, add the following JavaScript function to activate the calculator:

document.getElementById("buttonAge").addEventListener("click", function(){
    var tgl1=new Date(document.getElementById("yourbirth").value);
    var tgl2=new Date(); 
    var timeDiff = Math.abs(tgl2.getTime() - tgl1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
    document.getElementById("yourAge").innerHTML = Math.round(diffDays/365) + " Tahun";
});

Code Explanation

Here is a breakdown of the code:

1. document.getElementById("buttonAge"): This selects the button with the ID “buttonAge”.
2. .addEventListener("click", function(){...}): It adds a click event listener to the button, so that when it is clicked, the function inside the curly braces will be executed.
3. var tgl1=new Date(document.getElementById("yourbirth").value);: creates a new Date object using the value of the input field with the ID “yourbirth”. This will contain the birthdate of the person.
4. var tgl2=new Date();: This creates a new Date object for the current date and time.
5. var timeDiff = Math.abs(tgl2.getTime() - tgl1.getTime());: This calculates the difference between the current date and the birthdate of the person in milliseconds.
6. var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));: This calculates the number of days between the two dates and rounds up to the nearest whole number using Math.ceil().
7. document.getElementById("yourAge").innerHTML = Math.round(diffDays/365) + " Tahun";: This sets the text content of an HTML element with the ID “yourAge” to the person’s age in years. The age is calculated by dividing diffDays by 365 and rounding it to the nearest whole number using Math.round(). The string “Tahun” is appended to the end of the age value for display purposes.

That’s all! hopefully, you have successfully created an Age Calculator using JavaScript. If you have any questions or suggestions, feel free to comment below.