Age Calculator using JavaScript

by Abdul Rawoof A R Updated: Dec 22, 2022

Guide Kit

To create an age calculator using JavaScript, you can use the Date object to determine the current date and subtract the user's birth date from the current date to calculate their age in years. JavaScript is a programming language commonly used to add interactivity and other dynamic features to websites. In conjunction with HTML and CSS, it is frequently used to develop web pages and applications that can respond to user input, regulate the behavior of page elements, and interact with other web services.

We need the user's input of a date (date of birth), and the output will be the time elapsed between the user's input and the current date. Years, months, and days will use to indicate the determined age. We will develop an HTML form to collect the user's input for the birth date and utilize JavaScript to determine the age. It will accept dynamic user input.

Here is an example of how to create an age calculator using JavaScript:

Fig 1: Preview of the output that you will get on running this code from your IDE.

Code

Birthday Calculator (with months and days) using javascript

JavaScriptLines of Code : 68License : Strong Copyleft (CC BY-SA 4.0)

<script>
function calculateDiff(){
  var FromYear = parseInt(document.getElementById("FromYear").value);
  var FromMonth = parseInt(document.getElementById("FromMonth").value);
  var FromDay = parseInt(document.getElementById("FromDay").value);


  //current date
  var today = new Date();
  var ToYear = today.getFullYear();
  var ToMonth = today.getMonth() + 1;
  var ToDay = today.getDay()
  var years, months, days;

  //months
  months = ToMonth - FromMonth;
  if(ToDay < FromDay) {
    months = months -1;
  }


  //years
  years = ToYear - FromYear;
  if(ToMonth < FromMonth) {
    years = years - 1;
    months = months + 12;
  }

  //days
  days = Math.floor(31 - (FromYear + years, FromMonth + months - 1, FromDay));

  //answer order
  var answer = years + " years, " + months + " months, and " + days + " days.";

  //post answer
  document.getElementById("result").textContent =  answer;
  return {years: years, months: months, days: days};
}
</script>



   <table>
        <tbody>
        <tr class="header">
          <th>&nbsp;</th>
          <th>Year</th>
          <th>Month</th>
          <th>Day</th>
        </tr>
        <tr>
       <th>Birth Date</th>
          <td><input  id="FromYear"  placeholder="YYYY" value=""></td>
          <td><input  id="FromMonth" placeholder="MM" value=""></td>
          <td><input  id="FromDay"   placeholder="DD" value=""></td>
        </tr>

        <tr>
          <th colspan="4">
            <button id="calculateDiff" onclick="calculateDiff()">Calculate</button>
          </th>
        </tr>
        <tr colspan="4">
          <th>You are <div id="result"></div></th>
      </tr>
      </tbody>
    </table>

Instructions

Follow the steps carefully to get the output easily.

Create html file in your IDE.
Copy the code snippet using 'copy' button and paste it in that HTML file.
Run your html file directly from your file location.

Note: Use style tag to customize your table as like you want.

I found this code snippet by searching for 'age calculator using javascript', you can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in Visual Studio Code 1.73.1.
The solution is tested on node v18.12.1 and npm v8.19.2.

Using this solution, we are able to create age caculator simply using javascript with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to calculate the age of a particular person using javascript.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page.

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Age Calculator using JavaScript

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow