Develop an Age Calculator in Javascript with HTML & CSS

Develop an Age Calculator in JavaScript with HTML & CSS

by

In this tutorial, we are going to build an age calculator using JavaScript. JavaScript has an inbuilt command to get the present date which makes our task easier to calculate our present age. An age calculator always comes in handy when we need an accurate answer for “what our age is?”. Let’s get started to develop our cool application to calculate the age.

Create an HTML file first. If you are using an IDE , name the file as index.html. And copy the code given below.

Table of Contents

HTML

 <body>  
 <div class="container">  
  <form>  
   <div class="base">  
    <div class="enter">  
    <h4>Age Calculator</h4>  
   </div>  
  <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>  
  </div>  
  <div class="base">  
   <div class="enter">  
   <input type="button" name="submit" value="Submit" onclick="age()" />  
   </div>  
  </div>  
   <div id="age"></div>  
  </form>  
 </div>  
 </body>

We have given three input areas where we ask the user to provide date, month and year of their birth. Let’s add styles to our HTML now. Create a CSS file and make sure to link this file to the html that we created earlier.

Given below is the code for the CSS file. Copy paste the code and feel free to change the design and customize it in your own way.

CSS

   body{  
  font-family: Arial, Helvetica, sans-serif;  
  background-color: #2782e3;  
  font-size: 15px;  
  line-height: 1.5;  
  padding: 0;  
  margin: 0;  
 }  
 * {  
  box-sizing: border-box;  
 }  
 .container{  
  width:520px;  
  height: auto;  
  margin: 100px auto;  
  background-color: #eee;  
  border-radius: 25px;  
 }  
 .base{  
  width: 100%;  
  margin: 0;  
  overflow: hidden;  
  display: block;  
  float: none;  
 }  
 .block{  
  width: 135px;  
  padding: 5px 20px;  
  margin-left: 20px;  
  display: inline-block;  
  float: left;  
 }  
 .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;  
 }  
 .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;  
 }  
 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;  
 }  
 #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;  
 }

Once you are done with HTML and CSS, your page will look somewhat like this:

Develop Age Calculator in HTML CSS (UI)

Let’s move to JavaScript now. Create a file for this and copy the code given below.

JavaScript

<script>  
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';  
 } 
</script>

We see that first we take the user input and then we use the inbuilt JavaScript commands to get the present day’s date.

var date = new Date();
var d2 = date.getDate();
var m2 = 1 + date.getMonth();
var y2 = date.getFullYear();

Snippet

This piece of code gives us the present day’s date in (date-month-year) format.

Then we calculate the number of days between the two dates that we have and show the user their age.

Output

Develop Age Calculator in HTML CSS with JavaScript

We get our precise age using this age calculator. Hope you enjoyed this tutorial and understood how to calculate our age using JS.

Leave a Comment