How to Create an Accurate Age Calculator Using HTML, CSS & JavaScript
Do you want to build a simple yet accurate Age Calculator using HTML CSS JavaScript? Whether you're a beginner or an aspiring front-end developer, this step-by-step tutorial will help you create a clean and fully functional age calculator. It calculates a user’s exact age based on their birthdate, including years, months, and days.
Why Build an Age Calculator?
An age calculator is one of the most practical and beginner-friendly JavaScript projects. It’s ideal for:
- Practicing date and time functions
- Understanding form validation
- Improving frontend development skills
- Creating a useful tool for your portfolio or personal website
Technologies Used
- HTML – for the structure
- CSS – for styling and layout
- JavaScript – for logic and age calculation
Key Features
- User-friendly input interface
- Accurate calculation of age in years, months, and days
- Instant result on form submission
- Responsive and mobile-friendly design
Final Output Preview
The user enters their date of birth, clicks the "Calculate Age" button, and instantly sees their current age displayed in years, months, and days.
Step-by-Step Code for Age Calculator using HTML CSS JavaScript
1. HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Age Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Age Calculator</h1>
<form id="age-form">
<label for="dob">Enter your Date of Birth:</label>
<input type="date" id="dob" required>
<button type="submit">Calculate Age</button>
</form>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS Code (style.css)
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4f7f9;
font-family: 'Segoe UI', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
width: 350px;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
input[type="date"] {
padding: 10px;
font-size: 16px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
padding: 10px;
background-color: #007bff;
border: none;
color: white;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
3. JavaScript Code (script.js)
// script.js
document.getElementById('age-form').addEventListener('submit', function (e) {
e.preventDefault();
const dobInput = document.getElementById('dob').value;
const result = document.getElementById('result');
if (!dobInput) {
result.textContent = "Please enter your date of birth.";
return;
}
const dob = new Date(dobInput);
const today = new Date();
let years = today.getFullYear() - dob.getFullYear();
let months = today.getMonth() - dob.getMonth();
let days = today.getDate() - dob.getDate();
if (days < 0) {
months--;
const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0);
days += prevMonth.getDate();
}
if (months < 0) {
years--;
months += 12;
}
result.textContent = `You are ${years} year(s), ${months} month(s), and ${days} day(s) old.`;
});
SEO Tip: Why Use "Age Calculator using HTML CSS JavaScript"?
Using the keyword "Age Calculator using HTML CSS JavaScript" strategically in your blog helps it rank better in search engine results. It targets readers looking for JavaScript-based calculators or beginner development projects, improving both visibility and engagement.
Conclusion
Building an Age Calculator using HTML CSS JavaScript is a simple yet effective way to practice core web development concepts. It enhances your JavaScript skills, strengthens your understanding of the DOM, and results in a practical project that can be showcased in your portfolio.
Bonus: Use Cases
- Student and coding practice projects
- Personal or freelance portfolios
- Web tools for HR, health, or forms
- Educational websites
Explore More JavaScript Projects
- BMI Calculator using JavaScript
- To-Do List App with LocalStorage
- Digital Clock using HTML, CSS, and JavaScript
If you found this tutorial useful, consider sharing it with others or bookmarking it for later reference.
0 Comments