Best matchRelated: input valuesIntermediate
Number Counter
Read form values and use them in the project logic.
Build a number counter →Age Calculator
Build an age calculator with HTML, CSS, and JavaScript while practicing click events and DOM selection.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
Click EventsDOM SelectionDOM Content Updates
01 — What you’ll build
Age Calculator
This project shows you how HTML, CSS, and JavaScript work together in an age calculator. You’ll take user input, perform a calculation, and display a clear result, then practice click events, DOM selection, and DOM content updates as you build the complete project from scratch.
02 — Included
- Click-based interactions
- Age Calculator interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Handle user clicks
- Select HTML elements from the DOM
- Update content on the page
- Read and update form values
- Work with dates and time
- Control behavior with conditions
Recommended knowledge: Basic HTML and CSS, The JavaScript Date object, JavaScript variables and number operations, DOM selection and form events.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep all project files together in the same folder.
Project structure
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>Age Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Age Calculator</h1>
<div class="form">
<label for="birthday">Enter you date of birth</label>
<input type="date" id="birthday" name="birthday">
<button id="btn">Calculate Age</button>
<p id="result">Your age is 21 years old</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice input values, javaScript calculations, and conditional logic with these related projects.
Best match
Related: JavaScript calculations
Basic Calculator
Turn JavaScript calculations into clear visual results.
Build a basic calculator →
Related: conditional logicBeginner
BMI Calculator
Use conditions to control how the interface behaves.
Build a bmi calculator →Related: input valuesBest match
Number Counter
Read form values and use them in the project logic.
Build a number counterRelated: JavaScript calculations
Basic Calculator
Turn JavaScript calculations into clear visual results.
Easier practice
Build a basic calculatorRelated: conditional logic
BMI Calculator
Use conditions to control how the interface behaves.
Easier practice
Build a bmi calculator