Create JavaScript Age Calculator

JavaScript offers some built-in date and time functions, which helps to calculate the age from the date (Date of Birth). Using these JavaScript methods, you can easily find the age of anyone. For this, we require a date input from the user and the current system date. We will show you different outputs for different date input values. You will see the response will be returned in the form of year, month, and days.

HTML Code:

<div class="container">
  <div class="inputs-wrapper">
    <input type="date" id="date-input">
    <button onclick="ageCalculate()">Calculate</button>
  </div>
  <div class="outputs-wrapper">
    <div>
      <span id="years">-</span>
      <p>Years</p>
    </div>
    <div>
      <span id="months">-</span>
      <p>Months</p>
    </div>
    <div>
      <span id="days">-</span>
      <p>Days</p>
    </div>
  </div>
</div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins",sans-serif;
}
body{
  background-color: #1e293b;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}
.container{
  width: 40%;
  min-width: 450px;
  padding: 50px 30px;
}
.container *{
  font-family: "Poppins",sans-serif;
}
.inputs-wrapper{
  background-color: #f5f7fb;
  padding: 30px 25px;
  border-radius: 1rwm;
  margin-bottom: 50px;
}
input,
button{
  height: 50px;
  background-color: #e8eaec;
  color: #080808;
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1)
}
input{
  width: 60%;
  padding: 0 20px;
  font-size: 14px;
}
button{
  width: 30%;
  float: right;
  box-shadow: 4px 4px 8px rgb(189 200 213), -4px -4px 8px rgb(255 255 255);
  cursor: pointer;
}
.outputs-wrapper{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.outputs-wrapper div{
  height: 100px;
  width: 100px;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  display: grid;
  place-items: center;
  padding: 20px 0;
}
span{
  font-size: 30px;
  font-weight: 500;
}
p{
  font-size: 14px;
  color: #707070;
  font-weight: 400;
}

JavaScript Code:

const months = [31,28,31,30,31,30,31,31,30,31,30,31];

function ageCalculate(){
  let today = new Date();
  let inputDate = new Date(document.getElementById("date-input").value);
  let birthMonth,birthDate,birthYear;
  let birthDetails = {
    date:inputDate.getDate(),
    month:inputDate.getMonth()+1,
    year:inputDate.getFullYear()
  }
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth()+1;
  let currentDate = today.getDate();

  leapChecker(currentYear);

  if(
    birthDetails.year > currentYear ||
    ( birthDetails.month > currentMonth && birthDetails.year == currentYear) || 
    (birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
  ){
    alert("Not Born Yet");
    displayResult("-","-","-");
    return;
  }

  birthYear = currentYear - birthDetails.year;

  if(currentMonth >= birthDetails.month){
    birthMonth = currentMonth - birthDetails.month;
  }
  else{
    birthYear--;
    birthMonth = 12 + currentMonth - birthDetails.month;
  }

  if(currentDate >= birthDetails.date){
    birthDate = currentDate - birthDetails.date;
  }
  else{
    birthMonth--;
    let days = months[currentMonth - 2];
    birthDate = days + currentDate - birthDetails.date;
    if(birthMonth < 0){
      birthMonth = 11;
      birthYear--;
    }
  }
  displayResult(birthDate,birthMonth,birthYear);
}

function displayResult(bDate,bMonth,bYear){
  document.getElementById("years").textContent = bYear;
  document.getElementById("months").textContent = bMonth;
  document.getElementById("days").textContent = bDate;
}

function leapChecker(year){
  if(year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)){
    months[1] = 29;
  }
  else{
    months[1] = 28;
  }
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply