Why I Built This
I wanted a small, practical front-end project that I could complete without overengineering it.
The focus was on clarity: simple logic, readable code, and a UI that doesn’t get in the way.
I intentionally avoided frameworks to practice core HTML, CSS, and JavaScript fundamentals.
This is a learning-focused build log, not a product or showcase.
What the BMI Calculator Does
The calculator keeps things intentionally minimal:
Accepts height and weight as input
Calculates BMI instantly
Displays the result clearly
Works well on mobile devices
No extra features, no configuration, no distractions.
Tech Stack
I kept the stack as simple as possible:
HTML – structure and form inputs
CSS – clean, responsive layout
JavaScript – calculation logic and live updates
Using vanilla JavaScript made the logic easier to reason about and debug.
BMI Calculation Logic
The Formula (In Simple Terms)
BMI is calculated using:
BMI = weight (kg) / (height in meters × height in meters)
In this project:
Weight is entered in kilograms
Height is entered in centimeters, then converted to meters
The result updates automatically when inputs change
Core JavaScript Logic
Here’s the main calculation function:
function calculateBMI(weight, heightCm) {
const heightM = heightCm / 100;
if (heightM <= 0 || weight <= 0) {
return null;
}
const bmi = weight / (heightM * heightM);
return bmi.toFixed(2);
}
For real-time updates, I listen to input events instead of using a submit button:
weightInput.addEventListener("input", updateBMI);
heightInput.addEventListener("input", updateBMI);
function updateBMI() {
const weight = Number(weightInput.value);
const height = Number(heightInput.value);
const bmi = calculateBMI(weight, height);
result.textContent = bmi ? BMI: ${bmi} : "";
}
The goal here was clarity and predictability, not clever abstractions.
UI & UX Decisions
I kept the UI focused on usability:
Mobile-first layout
Clear input fields with enough spacing
Immediate feedback instead of a “Calculate” button
Minimal styling to avoid visual noise
Everything is designed to be understandable at a glance.
Edge Cases & Improvements
Things I accounted for or noticed:
Empty inputs show no result
Zero or negative values are ignored
Inputs assume kg and cm only
Possible improvements for a future iteration:
Display BMI categories (Underweight, Normal, etc.)
Add clearer validation messages
Improve accessibility (labels, focus states)
I avoided adding these to keep the scope small and focused.
Demo & Source Code
If you want to try it or explore the code:
Live demo: https://yuvronixstudio.github.io/simple-bmi-calculator/
Source code: https://github.com/yuvronixstudio/simple-bmi-calculator
Feedback
I’d appreciate feedback from other developers, especially on:
Is the calculation logic correct and clean?
Any UI or UX improvements you’d recommend?
Better ways to structure or organize the JavaScript?
This was built as a learning exercise, so constructive feedback is very welcome.
Top comments (0)