What is Age Calculator?
An age calculator is a program or software which can calculate the age using the date of birth. Using an age calculator a user can easily calculate his/her age at a specific date. The age calculation program is a popular project for beginner programmers. If you are new to programming then you should definitely try this project. After finishing this project you will learn how to take input from the user and then process it and sow the final result to the user.
Age Calculator Demo
Here is the demo of the project we are going to build. You don't need any server to build this project. Because this will do all calculations inside the browser. You can host this project on Google Blogger, Github pages, or any free code-based project hosting platforms like Heroku and Netlify.
Now we are going to show you the code for this project. At the end of this post, you will find the Github repository link of this project. At first start with the HTML code.
HTML Code For Age Calculator
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><form autocomplete="off" id="form"><div><h4>Enter Date Of Birth</h4><table id="CustomTable" style="width: 100%;"><tbody><tr><th>Day</th><th>Month</th><th>Year</th></tr><tr><td> <input class="form-control" id="date" max="31" maxlength="2" required="" size="2" type="number" /></td><td> <input class="form-control" id="month" max="12" required="" type="number" /></td><td> <input class="form-control" id="year" max="9999" maxlength="4" required="" size="4" type="number" /></td></tr></tbody></table></div><div> <br /><h4>Age at the Date</h4><table id="CustomTable" style="width: 100%;"><tbody><tr><th>Day</th><th>Month</th><th>Year</th></tr><tr><td> <input class="form-control" id="date2" max="31" maxlength="2" size="2" type="number" /></td><td> <input class="form-control" id="month2" max="12" maxlength="2" size="2" type="number" /></td><td> <input class="form-control" id="year2" max="9999" maxlength="4" size="4" type="number" /></td></tr></tbody></table></div><div style="margin-top: 10px; text-align: center;"> <button class="button button1" id="calbtn">Calculate Age</button></div><p style="font-size: 18px;"><span id="age"></span> <span id="months"></span> <span id="days"></span></p></form></div></body></html>CSS Code For Age Calculator
<style>
#CustomTable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#CustomTable td,
#CustomTable th {
border: 1px solid #ddd;
padding: 8px;
}
#CustomTable tr:nth-child(even) {
background-color: #f2f2f2;
}
#CustomTable tr:hover {
background-color: #ddd;
}
#CustomTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
input[type=number] {
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
outline: none;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #f44336;
color: white;
border-radius: 20px;
margin-bottom: 25px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button1:hover {
background-color: #008CBA;
color: white;
}
</style>JavaScript Code For Age Calculator
<script>
var form = document.getElementById("form"),
bdate = document.getElementById("date"),
bmonth = document.getElementById("month"),
byear = document.getElementById("year"),
date = document.getElementById("date2"),
month = document.getElementById("month2"),
year = document.getElementById("year2"),
age = document.getElementById("age"),
days = document.getElementById("days"),
months = document.getElementById("months"),
today = new Date();
year.value = today.getFullYear();
month.value = today.getMonth() + 1;
date.value = today.getDate();
form.addEventListener('submit', function (event) {
event.preventDefault();
var birthyear = Number.parseFloat(byear.value),
birthmonth = Number.parseFloat(bmonth.value),
birthday = Number.parseFloat(bdate.value),
todayyear = Number.parseFloat(year.value),
todaymonth = Number.parseFloat(month.value),
todays = Number.parseFloat(date.value);
if (todays < birthday) {
days.innerHTML = (todays - birthday + 30) + ' Day';
todaymonth = todaymonth - 1;
} else {
days.innerHTML = (todays - birthday) + ' Day'
}
if (todaymonth < birthmonth) {
months.innerHTML = (todaymonth - birthmonth + 12) + ' Month';
todayyear = todayyear - 1;
} else {
months.innerHTML = (todaymonth - birthmonth) + ' Month'
}
age.innerHTML = (todayyear - birthyear) + ' Year';
});
</script>Full Code
Here is the full code for the age calculator. Using this code you can make a single-page webpage very easily. Create an HTML file and put this code on this file. Here is the code below (Github):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Age Calculator</title></head><style>#CustomTable{font-family:Arial,Helvetica,sans-serif;border-collapse:collapse;width:100%}#CustomTable td, #CustomTable th{border:1px solid #ddd;padding:8px}#CustomTable tr:nth-child(even){background-color:#f2f2f2}#CustomTable tr:hover{background-color:#ddd}#CustomTable th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#04AA6D;color:white}input[type=number]{padding:12px;border:1px solid #ccc;border-radius:4px;resize:vertical;outline:none}.button{background-color:#4CAF50;border:none;color:white;padding:16px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;transition-duration:0.4s;cursor:pointer}.button1{background-color:#f44336;color:white;border-radius:20px;margin-bottom:25px;box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0,0,0,0.19)}.button1:hover{background-color:#008CBA;color:white}</style><body><div><form autocomplete="off" id="form"><div><h4>Enter Date Of Birth</h4><table id="CustomTable" style="width: 100%;"><tbody><tr><th>Day</th><th>Month</th><th>Year</th></tr><tr><td> <input class="form-control" id="date" max="31" maxlength="2" required="" size="2" type="number" /></td><td> <input class="form-control" id="month" max="12" required="" type="number" /></td><td> <input class="form-control" id="year" max="9999" maxlength="4" required="" size="4" type="number" /></td></tr></tbody></table></div><div> <br /><h4>Age at the Date</h4><table id="CustomTable" style="width: 100%;"><tbody><tr><th>Day</th><th>Month</th><th>Year</th></tr><tr><td> <input class="form-control" id="date2" max="31" maxlength="2" size="2" type="number" /></td><td> <input class="form-control" id="month2" max="12" maxlength="2" size="2" type="number" /></td><td> <input class="form-control" id="year2" max="9999" maxlength="4" size="4" type="number" /></td></tr></tbody></table></div><div style="margin-top: 10px; text-align: center;"> <button class="button button1" id="calbtn">Calculate Age</button></div><p style="font-size: 18px;"><span id="age"></span> <span id="months"></span> <span id="days"></span></p></form></div> <a href="https://tech.pathgriho.com/">Age Calculator By Techkib (Pathgriho Network)</a></body> <script>var form=document.getElementById("form"),bdate=document.getElementById("date"),bmonth=document.getElementById("month"),byear=document.getElementById("year"),date=document.getElementById("date2"),month=document.getElementById("month2"),year=document.getElementById("year2"),age=document.getElementById("age"),days=document.getElementById("days"),months=document.getElementById("months"),today=new Date();year.value=today.getFullYear();month.value=today.getMonth()+1;date.value=today.getDate();form.addEventListener('submit',function(event){event.preventDefault();var birthyear=Number.parseFloat(byear.value),birthmonth=Number.parseFloat(bmonth.value),birthday=Number.parseFloat(bdate.value),todayyear=Number.parseFloat(year.value),todaymonth=Number.parseFloat(month.value),todays=Number.parseFloat(date.value);if(todays<birthday){days.innerHTML=(todays-birthday+30)+' Day';todaymonth=todaymonth-1;}else{days.innerHTML=(todays-birthday)+' Day'} if(todaymonth<birthmonth){months.innerHTML=(todaymonth-birthmonth+12)+' Month';todayyear=todayyear-1;}else{months.innerHTML=(todaymonth-birthmonth)+' Month'} age.innerHTML=(todayyear-birthyear)+' Year';});</script> </html>Explore more JavaScript projects on our website. We publish the Source Code of different projects.