Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Age Calculator" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Age Calculator" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Age Calculator [Source Code]
To get the following HTML, CSS & JS code for the Age Calculator project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Age Calculator</h1>
<div class="container">
<div class="upper-part">
<div>
<span class="years">0</span>
<p>Years</p>
</div>
<div>
<span class="months">0</span>
<p>Months</p>
</div>
<div>
<span class="days">0</span>
<p>days</p>
</div>
</div>
<div class="lower-part">
<input type="date" class="input">
<button>Calculate Age</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
h1 {
font-size: 18px;
margin-bottom: 15px;
font-size: 32px;
}
.container {
width: 500px;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
padding: 30px;
border-radius: 10px;
}
.upper-part {
width: 100%;
display: flex;
gap: 40px;
justify-content: center;
}
.upper-part div {
height: 120px;
width: 120px;
color: white;
background-color: black;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
span {
font-size: 30px;
font-weight: 500;
}
p {
font-size: 15px;
color: gray;
font-weight: 400;
}
.lower-part {
display: flex;
justify-content: space-between;
padding: 25px;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
margin-top: 40px;
background-color: black;
}
input {
width: 60%;
height: 50px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
background-color: white;
color: black;
}
button {
width: 35%;
height: 50px;
font-size: 16px;
font-weight: 500;
border-radius: 5px;
background-color: white;
color: black;
cursor: pointer;
}
button:active {
transform: scale(0.95);
}
JavaScript
const inputEl = document.querySelector(".input");
const yearEl = document.querySelector(".years");
const monthEl = document.querySelector(".months");
const dayEl = document.querySelector(".days");
const buttonEl = document.querySelector("button");
buttonEl.addEventListener("click",calculateAge)
const months = [31,28,31,30,31,30,31,31,30,31,30,31];
function calculateAge(){
let today = new Date();
let inputDateEl = new Date(inputEl.value);
let resultMonth,resultDate,resultYear;
let inputYear = inputDateEl.getFullYear();
let inputMonth = inputDateEl.getMonth()+1;
let inputDate = inputDateEl.getDate();
let currentYear = today.getFullYear();
let currentMonth = today.getMonth()+1;
let currentDate = today.getDate();
leapYearCheck(currentYear);
if(
(inputYear > currentYear) ||
( inputMonth > currentMonth && inputYear == currentYear) ||
(inputDate > currentDate && inputMonth == currentMonth && inputYear == currentYear))
{
alert("You are not born yet");
displayResult("0","0","0");
return;
}
resultYear = currentYear - inputYear;
if(currentMonth >= inputMonth){
resultMonth = currentMonth - inputMonth;
}
else{
resultYear--;
resultMonth = 12 + currentMonth - inputMonth;
}
if(currentDate >= inputDate){
resultDate = currentDate - inputDate;
}
else{
resultMonth--;
let days = months[currentMonth];
console.log(days);
resultDate = days + currentDate - inputDate;
console.log(resultDate);
if(resultMonth < 0){
resultMonth = 11;
resultYear--;
}
}
displayResult(resultDate,resultMonth,resultYear);
}
function displayResult(resultDate,resultMonth,resultYear){
yearEl.innerHTML = resultYear;
monthEl.innerHTML = resultMonth;
dayEl.innerHTML = resultDate;
}
function leapYearCheck(year){
if(year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)){
months[1] = 29;
}
else{
months[1] = 28;
}
}
Generating Download Link...