How to create age calculator App Using HTML CSS and JavaScript

We used the JavaScript Date function here to build the age calculator. Here we have created separate functions for Years Months and Day. These functions will work when you click the Calculate button. The value that minus the current date from the birth date is whether we have show the year months and days value with conditions.

Video tutorial of age calculator App Using HTML CSS and JavaScript

This tutorial video can help you to create age calculator App Using HTML CSS and JavaScript

age calculator App Using HTML CSS and JavaScript [Source Codes]

This source code can help you to create age calculator App Using HTML CSS and JavaScript

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<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>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*: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: #072e4c;
	color: #000;
	
	display: flex;
	min-height: 100vh;
	align-items: center;
}

.age-calculate{
	max-width: 600px;
	width: 100%;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	padding: 30px;
	border-radius: 30px;
	background: linear-gradient(to bottom, #007193 50%, #06024e);
}
h1{
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 36px;
}
.age-calculate input[type="date"]{
	width: 60%;
	display: block;
	margin: 0 auto 20px;
	font-size: 20px;
	padding: 10px;
	border-radius: 10px;
	border:0;
}
.age-calculate button{
	width: 60%;
  display: block;
  margin: 0 auto 10px;
  font-size: 16px;
  padding: 13px;
  border-radius: 10px;
  border: 0;
  background: #00a1ed;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
#calculateAge{
	font-size: 24px;
}

JavaScript Code

Copy

var calculate = document.getElementById('calculate'),
  calculateAge = document.getElementById('calculateAge');

  calculate.addEventListener('click',function(){
    var birthDate = document.getElementById('birth_date').value;
    birthDate = new Date(birthDate);
    todayDate = new Date()
    totalAge = Date.now() - birthDate.getTime();
    ageYear = new Date(totalAge);
    ageYear = Math.abs(ageYear.getUTCFullYear() - 1970 );
    
    function ageMonth() {
      if(todayDate.getMonth() >= birthDate.getMonth()) {
          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();
        }
    };
    calculateAge.innerHTML = "Your Age "+ageYear+" Years "+ageMonth()+ " Months "+ageDay()+" Days"

  });