One of the best ways to learn JavaScript is by building small practical projects.
In this tutorial, we'll build a simple BMI (Body Mass Index) calculator using HTML, CSS, and vanilla JavaScript.
This beginner-friendly project will help you understand how to work with user inputs, perform calculations, and update the page dynamically.
What We Will Build
Our calculator will:
• Take height and weight as inputs
• Calculate BMI instantly
• Display the result on the page
• Work without any frameworks
Live Demo
Live Demo:
https://yuvronixstudio.github.io/simple-bmi-calculator/
Project Structure
bmi-calculator
|
├── index.html
├── style.css
└── script.js
Step 1: HTML Structure
We first create input fields for height and weight.
Step 2: JavaScript Logic
BMI is calculated using the formula:
BMI = weight / (height × height)
Now let's implement this in JavaScript.
This function:
Reads the input values
Calculates BMI
Displays the result on the page
Result
After entering your height and weight, the calculator instantly displays your BMI.
Source Code
GitHub Repository:
(https://github.com/YuvronixStudio/simple-bmi-calculator/)
Small Resource
I've also bundled this calculator together with other small JavaScript tools like an EMI calculator and an Interest calculator.
If you'd like the full source code bundle, you can find it here:
Top comments (0)