Today, we’re going to make something simple but super handy – an Age Calculator built with HTML, CSS, and JavaScript. All you’ll need to do is pop in your date of birth, and it’s instantly tell you your exact age – down to the years, months, and days.
explaining the code in plain language so you can follow along even if you’ve never done a project like this before. By the time we’re done, you’ll have a working Age Calculator you can actually use
step-by-step and explain every part of the code so even if you’re a beginner, you’ll understand it completely.
You all have your own Age Calculator ready to use.
Hey, welcome to our blog, CodeWithRandom!
What is an Age Calculator?
An age calculator is a small web app that takes your date of birth as input and then calculates:
- The number of years you’ve lived
- The number of months
- The number of days
This is done by comparing your date of birth with the current date using JavaScript.
Project Overview
We will use:
- HTML → For structure
- CSS → For styling and layout
- JavaScript → For calculating the age
Step 1: HTML Structure
We start with a simple HTML structure containing:
- A title
- A display area for years, months, and days
- An input field for selecting a date
- A button to trigger the calculation
HTML code:
<!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 — codewithrandom</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Watermark -->
<a class="watermark" href="https://www.codewithrandom.in" target="_blank">
© codewithrandom
</a>
<h1>Age Calculator</h1>
<div class="container">
<div class="upper-part">
<div class="bubble">
<span class="years">0</span>
<p>Years</p>
</div>
<div class="bubble">
<span class="months">0</span>
<p>Months</p>
</div>
<div class="bubble">
<span class="days">0</span>
<p>Days</p>
</div>
</div>
<div class="lower-part">
<input type="date" class="input" max="">
<button>Calculate Age</button>
</div>
</div>
<footer class="footer-note">
Built by <strong>codewithrandom</strong>
</footer>
<script src="index.js"></script>
<script>
// Set max date = today
const input = document.querySelector(".input");
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, "0");
const dd = String(today.getDate()).padStart(2, "0");
input.max = `${yyyy}-${mm}-${dd}`;
</script>
</body>
</html>
HTML Preview:
CSS Styling:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&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;
background: linear-gradient(135deg, #7c5cff, #00d4ff);
}
/* Heading */
h1 {
font-size: 32px;
margin-bottom: 15px;
color: white;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
/* Main container */
.container {
width: 500px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
padding: 30px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Upper part (bubbles) */
.upper-part {
width: 100%;
display: flex;
gap: 40px;
justify-content: center;
}
.upper-part div {
height: 120px;
width: 120px;
color: white;
background: linear-gradient(145deg, #000000, #1a1a1a);
border-radius: 50%;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.upper-part div:hover {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
span {
font-size: 30px;
font-weight: 600;
}
p {
font-size: 15px;
color: #ccc;
font-weight: 400;
}
/* Lower part */
.lower-part {
display: flex;
justify-content: space-between;
padding: 20px;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
margin-top: 40px;
background-color: rgba(0, 0, 0, 0.7);
}
input {
width: 60%;
height: 50px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
border-radius: 6px;
background-color: white;
color: black;
transition: box-shadow 0.2s ease;
}
input:focus {
box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.4);
}
button {
width: 35%;
height: 50px;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
background: linear-gradient(135deg, #7c5cff, #00d4ff);
color: white;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.3s ease;
}
button:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
button:active {
transform: scale(0.96);
}
/* Watermark */
.watermark {
position: fixed;
bottom: 10px;
right: 15px;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
background: rgba(255, 255, 255, 0.1);
padding: 5px 10px;
border-radius: 6px;
backdrop-filter: blur(5px);
transition: background 0.2s ease;
}
.watermark:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Footer note */
.footer-note {
margin-top: 15px;
font-size: 14px;
color: white;
opacity: 0.8;
}With CSS Preview:
JavaScript Functionality
Now comes the main part — JavaScript for calculating the age.
We will:
- Get the user’s date of birth from the input
- Compare it with the current date
- Calculate the difference in years, months, and days
- Display the result on the screen
JavaScript code:
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");
const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
buttonEl.addEventListener("click", calculateAge);
function calculateAge() {
if (!inputEl.value) {
alert("Please select your birth date");
return;
}
let today = new Date();
let birthDate = new Date(inputEl.value);
let inputYear = birthDate.getFullYear();
let inputMonth = birthDate.getMonth() + 1;
let inputDay = birthDate.getDate();
let currentYear = today.getFullYear();
let currentMonth = today.getMonth() + 1;
let currentDay = today.getDate();
leapYearCheck(currentYear);
// Future date check
if (
inputYear > currentYear ||
(inputMonth > currentMonth && inputYear === currentYear) ||
(inputDay > currentDay && inputMonth === currentMonth && inputYear === currentYear)
) {
alert("You are not born yet");
displayResult(0, 0, 0);
return;
}
let resultYear = currentYear - inputYear;
let resultMonth, resultDate;
if (currentMonth >= inputMonth) {
resultMonth = currentMonth - inputMonth;
} else {
resultYear--;
resultMonth = 12 + currentMonth - inputMonth;
}
if (currentDay >= inputDay) {
resultDate = currentDay - inputDay;
} else {
resultMonth--;
let daysInPrevMonth = months[currentMonth - 2 < 0 ? 11 : currentMonth - 2];
resultDate = daysInPrevMonth + currentDay - inputDay;
if (resultMonth < 0) {
resultMonth = 11;
resultYear--;
}
}
displayResult(resultYear, resultMonth, resultDate);
}
function displayResult(year, month, day) {
yearEl.textContent = year;
monthEl.textContent = month;
dayEl.textContent = day;
}
function leapYearCheck(year) {
if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
months[1] = 29;
} else {
months[1] = 28;
}
}JavaScript Preview:
How It Works
- User Inputs DOB – When you select your date of birth in the input field.
- Button Click Event – JavaScript listens for the button click.
- Date Calculation – It compares your DOB with today’s date.
- Leap Year Handling – The script adjusts for February in leap years.
- Result Display – The difference in years, months, and days is shown.
Video Preview:
Complete Source Code : Github
We are successfully created a fully working Age Calculator using HTML, CSS, and JavaScript.
This project is simple yet teaches important concepts like DOM manipulation, date handling, and event listeners.
Check Out Our New Article
Thank you for reading our blog CodeWithRandom!
If you liked this tutorial, do share it with your friends and check out our other web development projects.
3 thoughts on “Age Calculator Using HTML, CSS & JavaScript”