Best matchRelated: input valuesBeginner
Basic Calculator
Read form values and use them in the project logic.
Build a basic calculator →BMI Calculator
Build a bmi calculator with HTML, CSS, and JavaScript while practicing click events and DOM selection.
Beginner20–30 minutesHTML5CSS3JavaScript
You’ll practice
Click EventsDOM SelectionDOM Content Updates
01 — What you’ll build
BMI Calculator
Build a bmi calculator using HTML, CSS, and JavaScript, then connect the interface to the logic that makes it work. You’ll learn how to take user input, perform a calculation, and display a clear result while getting hands-on practice with click events, DOM selection, and DOM content updates.
02 — Included
- Click-based interactions
- BMI 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
- Control behavior with conditions
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, JavaScript variables and number operations, DOM selection and form events, DOM selection and click 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
bmi-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>BMI Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="heading">Body Mass Index (BMI) Calculator</h1>
Your Height (cm):
<input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
Your Weight (kg):
<input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
<button class="btn" id="btn">Compute BMI</button>
<input disabled type="text" class="input" id="bmi-result">
<h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
</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
Age Calculator
Turn JavaScript calculations into clear visual results.
Build an age calculator →
Related: conditional logic
Number Counter
Use conditions to control how the interface behaves.
Build a number counter →Related: input valuesBest match
Basic Calculator
Read form values and use them in the project logic.
Build a basic calculatorRelated: JavaScript calculations
Age Calculator
Turn JavaScript calculations into clear visual results.
More challenging
Build an age calculatorRelated: conditional logic
Number Counter
Use conditions to control how the interface behaves.
More challenging
Build a number counter