codemediaweb.com

Code Media

hire me

Javascript Age Calculator from Date of Birth (Free Code)

by

In this article, you will learn how to make JavaScript Age Calculator. This project will help to calculate age from the date of birth. Many projects have a user’s age limit. 

This type of age calculator will help a lot in that case. If the user inputs his date of birth, the age of the user will be calculated automatically. 

Not just age calculators, you can use this project to calculate the distance of the current time from a specific day.

Javascript Age Calculator
Demo
Download

This Javascript Age Calculator will calculate the current distance from your date of birth. Then it will show on the webpage with the help of innerhtml. With the help of the new date () method, this project will receive the information on the current date from your device.

 Here I have used the input of HTML to select your date of birth. One of the most important types of input we get in HTML is type = “date”. You can create a date picker with type = “date” input. Where you can easily select any date.

Let me tell you how this Javascript Age Calculator works. This project will store it in a constant when you input your date of birth in an HTML date picker. 
Will then receive the information of today’s date using the new Date () method. Will then subtract the current date from your input data. The result of that subtraction will be converted into years, months, and days.

Step 1:

HTML Code of Javascript Age Calculator

The following codes have added all the basic information for this project (Javascript Age Calculator from Date of Birth). First created an area with a heading. Then there is the HTML date picker and there is a button at the end.

Then there is another element that will act as the result box. This means that when you click on the Calculate button, your age can be seen in this area.

<div class=”age-calculate”>
  <h1>Age Calculator</h1>
  <input type=”date” id=”birth_date” name=””>
  <button id=”calculate”>Calculate</button>
  <div id=”calculateAge”></div>
</div>

Step 2:

Design the Age Calculator with CSS

You need some CSS to design an age calculator app. Nothing special is designed here. So the amount of CSS used is less.

First, the green color was used in the background of the webpage. Max-width: 500px of this Javascript Age Calculator has been used here.

/*Design the webpage*/
*,*:after,*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  font-family: arial;
  font-size: 16px;
  margin: 0;
  background: #09928b;
  color: #000;
  display: flex;
  min-height: 100vh;
  align-items: center;
}
/*Basic structure of age calculator*/
.age-calculate{
  max-width: 500px;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  border-radius: 10px;
  background: rgb(50, 46, 46);
}
/* heading */
h1{
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 30px;
}
/* date input place */
.age-calculate input[type=”date”]{
  width: 60%;
  display: block;
  margin: 0 auto 50px;
  margin-top: 30px;
  font-size: 20px;
  padding: 10px;
  border-radius: 3px;
  border:0;
}
/* calculate button */
.age-calculate button{
  width: 60%;
  display: block;
  margin: 0 auto 10px;
  font-size: 16px;
  padding: 13px;
  border-radius: 5px;
  border: 0;
  background: #00a1ed;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
/* result display*/
#calculateAge{
  font-size: 24px;
  margin-top: 20px;
}

Step 3:

Activate Age Calculator using JavaScript

Now the simple age calculator needs to be activated by JavaScript. The JavaScript code used here may seem a bit overwhelming to you. But no need to worry. This JavaScript code is very simple so you will not have difficulty understanding it.

  var calculate = document.getElementById(‘calculate’),
  calculateAge = document.getElementById(‘calculateAge’);
  calculate.addEventListener(‘click’,function(){
//The value of the date input box has been collected
    var birthDate = document.getElementById(‘birth_date’).value;
//Use new Date() to get a Date for the current time or Date
    birthDate = new Date(birthDate);
    todayDate = new Date()
//Your input time has been deducted from the current time
    totalAge = Date.now() – birthDate.getTime();
    ageYear = new Date(totalAge);
    ageYear = Math.abs(ageYear.getUTCFullYear() – 1970 );
    //First the information of the month has been calculated
    function ageMonth() {
      if(todayDate.getMonth() >= birthDate.getMonth()) {
//If the current month is greater than or equal to your input month, then your input month will be subtracted from the current month.
          if(todayDate.getDate() >= birthDate.getDate()) {
              return todayDate.getMonth() – birthDate.getMonth();
          }
          else {
              if((todayDate.getMonth() – 1) >= birthDate.getMonth()) {
                  return (todayDate.getMonth() – 1) – birthDate.getMonth();
              }
              else {
                  return ((todayDate.getMonth() – 1) + 12) – birthDate.getMonth();
              }
          }
      }
        
    };
    function ageDay() {
        if(todayDate.getDate() > birthDate.getDate()) {
            return todayDate.getDate() – birthDate.getDate();
        }
        else if(todayDate.getDate() == birthDate.getDate()) {
            return todayDate.getDate() – birthDate.getDate();
        }
        else {
            let calDate = new Date(birthDate.getFullYear(), birthDate.getMonth(), 0);
            return (todayDate.getDate() + calDate.getDate()) – birthDate.getDate();
        }
    };
//Now the information of age is shown in the display with the help of innerHTML
//innerHTML property is part of the Document Object Model
    calculateAge.innerHTML = “Your Age “+ageYear+” Years “+ageMonth()+ ” Months “+ageDay()+” Days”
  });

I have already created another age Calculator using JavaScript. However, in that case, the date picker was not used so you have to input your date of birth manually. However, in that case, there will be no lip year count so your age will not be completely correct.

The most surprising thing is that in this case, you will be able to account for time in the future. This means that even if you select a date after 5 years from today, this Javascript Age Calculator will work.

Leave a comment