Complete Web Designing Course for Beginners

Lesson 7.2 – Age Calculator Project

🚀 Building a Complete Age Calculator Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build an Age Calculator

✅ Use Date Input Fields

✅ Use JavaScript Date Object

✅ Calculate Age Automatically

✅ Use DOM Manipulation

✅ Create Professional User Interfaces

✅ Build Real-World JavaScript Applications

📖 Introduction

Many websites ask users to enter their:

Date of Birth

and automatically calculate:

Age

Examples:

✅ College Admission Forms

✅ Government Registration Portals

✅ Job Applications

✅ Online Exams

✅ Social Media Platforms

Today we will create:

🎂 Age Calculator Project

🌟 Project Preview

------------------------

AGE CALCULATOR

Date of Birth

[ 15-08-2005 ]

[ Calculate Age ]

Your Age is:

20 Years

------------------------

🎯 Concepts Used

Concept	Used
Variables	✅
Functions	✅
Events	✅
DOM Manipulation	✅
Date Object	✅
Conditional Statements	✅

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>Age Calculator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

Age Calculator

</h1>

<input type="date"

id="dob">

<br><br>

<button onclick="calculateAge()">

Calculate Age

</button>

<h2 id="result">

Your Age Will Appear Here

</h2>

</div>

<script src="script.js"></script>

</body>

</html>

🌟 Understanding HTML

Date Input:

<input type="date" id="dob">

Allows users to select date of birth.

Button:

<button onclick="calculateAge()">

Runs JavaScript function.

Result Area:

<h2 id="result">

Displays calculated age.

🎯 Step 2 – Design the Project

style.css

body{

font-family:Arial;

background:#f0f0f0;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 0 15px lightgray;

text-align:center;

}

input{

padding:10px;

font-size:16px;

}

button{

padding:10px 20px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

}

button:hover{

background:#084298;

}

h1{

color:#0d6efd;

}

🎯 Step 3 – Create JavaScript Function

script.js

function calculateAge()
{

}

Function runs when button is clicked.

🌟 Step 4 – Get Date of Birth

let dob =

document.getElementById("dob").value;

Example:

2005-08-15

User selected date.

🎯 Step 5 – Get Current Date

let today = new Date();

Example:

2026-06-04

Current date is stored.

🎯 Step 6 – Convert DOB to Date Object

let birthDate = new Date(dob);

Example:

2005-08-15

becomes a JavaScript Date object.

🌟 Step 7 – Calculate Age

let age =

today.getFullYear() -

birthDate.getFullYear();

Example:

2026 - 2005 = 21

🎯 Step 8 – Display Age

document.getElementById("result").innerHTML =

"Your Age is " + age + " Years";

Output:

Your Age is 21 Years

🌟 Complete JavaScript Code

script.js

function calculateAge()
{

let dob =
document.getElementById("dob").value;

let birthDate =
new Date(dob);

let today =
new Date();

let age =

today.getFullYear() -

birthDate.getFullYear();

document.getElementById("result").innerHTML =

"Your Age is " + age + " Years";

}

🎯 Problem

What if user clicks button without selecting date?

Need validation.

🌟 Input Validation

if(dob == "")
{

document.getElementById("result").innerHTML =

"Please Select Date of Birth";

return;

}

Output:

Please Select Date of Birth

🎯 Professional Age Calculation

Suppose:

Today's Date

04-06-2026

DOB:

15-08-2005

Birthday not reached yet.

Actual age:

not

Need advanced calculation.

🌟 Improved Age Logic

let monthDifference =

today.getMonth() -

birthDate.getMonth();

if(

monthDifference < 0 ||

(monthDifference === 0 &&

today.getDate() < birthDate.getDate())

)

{

age--;

}

This gives accurate age.

🎯 Professional JavaScript Code

script.js

function calculateAge()
{

let dob =
document.getElementById("dob").value;

if(dob == "")
{

document.getElementById("result").innerHTML =

"Please Select Date of Birth";

return;

}

let birthDate = new Date(dob);

let today = new Date();

let age =

today.getFullYear() -

birthDate.getFullYear();

let monthDifference =

today.getMonth() -

birthDate.getMonth();

if(

monthDifference < 0 ||

(monthDifference === 0 &&

today.getDate() < birthDate.getDate())

)

{

age--;

}

document.getElementById("result").innerHTML =

"Your Age is " + age + " Years";

}

💻 Complete Project Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>Age Calculator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>Age Calculator</h1>

<input type="date" id="dob">

<br><br>

<button onclick="calculateAge()">

Calculate Age

</button>

<h2 id="result">

Your Age Will Appear Here

</h2>

</div>

<script src="script.js"></script>

</body>

</html>

style.css

body{

font-family:Arial;

background:#f0f0f0;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 0 15px lightgray;

text-align:center;

}

input{

padding:10px;

font-size:16px;

}

button{

padding:10px 20px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

}

button:hover{

background:#084298;

}

h1{

color:#0d6efd;

}

script.js

function calculateAge()
{

let dob =
document.getElementById("dob").value;

if(dob == "")
{

document.getElementById("result").innerHTML =

"Please Select Date of Birth";

return;

}

let birthDate = new Date(dob);

let today = new Date();

let age =

today.getFullYear() -

birthDate.getFullYear();

let monthDifference =

today.getMonth() -

birthDate.getMonth();

if(

monthDifference < 0 ||

(monthDifference === 0 &&

today.getDate() < birthDate.getDate())

)

{

age--;

}

document.getElementById("result").innerHTML =

"Your Age is " + age + " Years";

}

🎯 Expected Output

User Selects:

15-08-2005

Clicks:

Calculate Age

Output:

Your Age is 20 Years

🌟 Project Improvements

You can add:

✅ Current Date Display

✅ Age in Months

✅ Age in Days

✅ Age in Hours

✅ Birthday Countdown

🏫 Real World Applications

Age Calculators are used in:

✅ College Admission Systems

✅ Government Portals

✅ Passport Applications

✅ Job Portals

✅ Banking Applications

✅ Social Media Websites

⚠️ Common Beginner Mistakes

Mistake 1

Wrong Input ID

getElementById("dob")

must match HTML.

Mistake 2

Forgetting Validation

User may not select date.

Mistake 3

Using Only Year Difference

Can produce wrong age.

Always check month and day.

🌟 Best Practices

✅ Validate Input

✅ Use Date Object

✅ Handle Empty Values

✅ Keep UI Simple

✅ Use Meaningful Variable Names

🏆 Project Challenge

Modify the project and add:

✅ User Name Input

✅ Current Date Display

✅ Age in Months

✅ Age in Days

✅ Birthday Countdown Timer

📝 Practical Activity

Create:

Student Age Verification System

Features:

Student Name
Date of Birth
Calculate Age
Display Eligibility

Rules:

18+ = Eligible

Below 18 = Not Eligible

📋 Assignment

Assignment 7.2

What is an Age Calculator?
What is the Date Object?
Why is validation important?
What does getFullYear() do?
Create an Age Calculator project.
Add age verification logic.
Add age in months calculation.

🧠 Quiz

Q1. Which object provides current date?

A. Time

B. Date

C. Clock

D. Timer

✅ Answer: B

Q2. Which method returns the year?

A. getYear()

B. getDate()

C. getFullYear()

D. getMonth()

✅ Answer: C

Q3. Which property gets date input value?

A. innerHTML

B. style

C. value

D. src

✅ Answer: C

Q4. Age Calculator uses?

A. Date Object

B. DOM Manipulation

C. Functions

D. All of These

✅ Answer: D

Q5. Validation helps prevent?

A. Errors

B. Empty Input

C. Wrong Results

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Built a complete Age Calculator project.

✅ Used Date Object and DOM Manipulation.

✅ Learned accurate age calculation.

✅ Added input validation.

✅ Created a real-world JavaScript application.