Foolish Developer

Posted on Aug 8, 2021 Edited on Sep 11, 2024

Javascript Age Calculator | Calculate Age from Date of Birth

#css #javascript #webdev #html

JavaScript Age Calculator helps to determine user's current age from date of birth. This is a very easy and simple design. I have shared many more designswith you before. This is the first time I've made a simple JavaScript age calculator and shared it with you.

You can watch the live demo to see how this design works. First of all, I made a small box in a web page. Then below is a small submit button.

Here you can input dates, months and years in the Input field. After inputting your date of birth, click on the submit button and you will see your current age here.

Below is the complete information on how I made it, step-by-step.

Step 1: Create the basic structure

First of all I designed that web page using HTML and CSS code. Then I made a small box on it.



<div class="container">

</div>



* {
 box-sizing: border-box;
}

body{
 font-family: Arial, Helvetica, sans-serif;
 background-color: #c83deb;
 font-size: 15px;
 line-height: 1.5;
 padding: 0;
 margin: 0;
}

.container{
 width:520px;
 height: auto;
 min-height:100px;
 margin: 100px auto;
 background-color: #eee;
 border-radius: 5px;
}

Step 2: Add title or heading

Then here I created a title. I used the following HTML and CSS code to create this heading.



 <div class="base">
   <h4>Age Calculator</h4>
 </div>



.base{
 width: 100%;
 margin: 0;
 overflow: hidden;
 display: block;
 float: none;
}

.base h4{
 font-size: 26px;
 text-align: center;
 font-family: sans-serif;
 font-weight: normal;
 margin-top: 0px;
 box-shadow: 0px 2px #bababa;
 background: white;
 font-size: 34px;
 color: navy;
}

Step 3: Create a place to input the date of birth

There are three input boxes to input as you saw in the demo. To input the first date, second month and third year. The following HTML and CSS codes have been used to create it.



 <div class="block">
    <p class="title">Date</p>
    <input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
    <p class="title">Month</p>
    <input type="text" name="month" id="month" placeholder="mm" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
    <p class="title">Year</p>
    <input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4" maxlength="4" />
  </div>



.block{
 width: 135px;
 padding: 5px 20px;
 margin-left: 20px;
 display: inline-block;
 float: left;
}

.title{
 font-size: 20px;
 text-align: left;
 font-family: sans-serif;
 font-weight: normal;
 line-height: 0.5;
 letter-spacing: 0.5px;
 word-spacing: 2.7px;
 color: #1073d0;
}

input[type=text] {
 width: 140px;
 margin: auto;
 outline: none;
 min-height: 50px;
 border: 2px solid #1073d0;
 padding: 12px;
 background-color: #f7f7f7;
 border-radius: 2px;
 color: #1073d0;
 font-size: 17px;
}

input[type=text]:focus{
 background-color: #ffffff;
 border: 2px solid orange;
 outline: none;
}

Step 4: Create a button to submit

Now I have made a submit button which if clicked the user will see his current age. The following HTML and CSS code helped to create and design it.



<div class="base">
 <input type="button" name="submit" value="Submit" onclick="age()" />
</div>



input[type=button]{
 width: 150px;
 margin-left: 35%;
 margin-top: 40px;
 outline: none;
 border: none;
 border-radius: 2px;
 background-color: #0761b6;
 color: #ffffff;
 padding: 14px 16px;
 text-align: center;
 font-size: 16px;
}

input[type=button]:hover{
 background-color: #003669;
}

Step 5: Create a display to see the age

This box has a small display at the bottom to see your current age. Now it is in hidden state. This can only be seen when it is executed by JavaScript.



<div id="age"></div>



#age{
 display: block;
 margin: 10px;
 margin-top: 35px;
 padding: 10px;
 padding-bottom: 20px;
 overflow: hidden;
 font-family: verdana;
 font-size: 23px;
 font-weight: normal;
 line-height: 1.5;
 word-spacing: 2.7px;
 color: navy;
}

Step 6: Activate the age calculator using JavaScript

Now I have implemented it with JavaScript code. I have used very simple code here and made it in general. If you know basic JavaScript, you must understand this structure.

Everyone's first date, month, year has been determined by a variable.



  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

Then I received the current date from the device using the new Date () function. Here we have taken d2, m2, y2 solids in which we have stored the current date. Here I have given the number of days in a month using var month.



  var date = new Date();
  var d2 = date.getDate();
  var m2 = 1 + date.getMonth();
  var y2 = date.getFullYear();
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];




  if(d1 > d2){
    d2 = d2 + month[m2 - 1];
    m2 = m2 - 1;
  }
  if(m1 > m2){
    m2 = m2 + 12;
    y2 = y2 - 1;
  }

Subtract the user's date of birth from the current time and store it at d, m, y constant.



  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

After all, I have arranged all this information in the HTML page using innerHTML. Below you will see that I have used one line of HTML code which indicates how this date, month and year can be seen in that page.



  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';

Final Javascript Code



  function age() {
  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

  var date = new Date();
  var d2 = date.getDate();
  var m2 = 1 + date.getMonth();
  var y2 = date.getFullYear();
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  if(d1 > d2){
    d2 = d2 + month[m2 - 1];
    m2 = m2 - 1;
  }
  if(m1 > m2){
    m2 = m2 + 12;
    y2 = y2 - 1;
  }
  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';
}

This is a very simple JavaScript age calculator design. Hope this tutorial helped you to know how I made this design.

Related Post:

Please comment on how you like it. If there is any mistake in my design, please let me know in the comments.

Top comments (7)

GrahamTheDev • Aug 9 '21 • Edited

What happens in a leap year? (Hint hint) 😉

Tremendus Apps • Nov 25 '22 • Edited

This is inefficient and prone to issues like leap year, as mentioned.

Try this:

function getAge (year, month, day) {
    const birth = new Date(year, month - 1, day)
    const now = new Date()
    const diff = new Date(now.valueOf() - birth.valueOf())
    return Math.abs(diff.getFullYear() - 1970)
}

It handles all issues like leap years, and you don't have to worry about whether the current month is > or < birth month since we're only concerned with total YEARS elapsed.