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.
➼ Download Files and Images Link: https://www.websitemakers.xyz/2021/05/age-calculator-javascript-project-with.html
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
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #ff6666;
}
.container{
width: 40%;
min-width: 450px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
padding: 50px 30px;
}
.container *{
font-family: "Poppins",sans-serif;
border: none;
outline: none;
}
.inputs-wrapper{
background-color: #080808;
padding: 30px 25px;
border-radius: 8px;
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
margin-bottom: 50px;
}
input,
button{
height: 50px;
background-color: #ffffff;
color: #080808;
font-weight: 500;
border-radius: 5px;
}
input{
width: 60%;
padding: 0 20px;
font-size: 14px;
}
button{
width: 30%;
float: right;
}
.outputs-wrapper{
width: 100%;
display: flex;
justify-content: space-between;
}
.outputs-wrapper div{
height: 100px;
width: 100px;
background-color: #080808;
border-radius: 5px;
color: #ffffff;
display: grid;
place-items: center;
padding: 20px 0;
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
}
span{
font-size: 30px;
font-weight: 500;
}
p{
font-size: 14px;
color: #707070;
font-weight: 400;
}
Javascript
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;
}
}
Note:- visit my youtube channel for frontend tutorials
subscribe to my youtube channel :- https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg
Resent post :-
Top comments (0)