Beginner•Web Development

BMI Calculator

Build a fully functional BMI Calculator from scratch using pure HTML, CSS, and JavaScript. This project covers core web fundamentals like DOM manipulation, unit conversion, and dynamic styling — wrapped in a sleek dark UI with gradient text, animated inputs, a color-coded scale bar, and smooth category-based background transitions.

📚Scroll down to see free videos & courses ↓

View on GitHub

What You Will Build

A sleek BMI Calculator with Metric and Imperial unit toggle, a real-time result display showing your BMI value and category badge, a color-coded gradient scale bar with a sliding marker, and a dynamic health message. The page background subtly shifts color based on your BMI category (blue for underweight, green for normal, amber for overweight, red for obese). Built using the Inter font with a dark glassmorphism card UI.

Concepts You'll Learn

DOM manipulation with getElementById and style toggling
Metric and Imperial unit conversion in JavaScript
BMI formula: weight(kg) / height(m)²
CSS custom properties (variables) for dynamic theming
Gradient text using background-clip and -webkit-text-fill-color
Dynamic background tint transitions using CSS radial-gradient and custom properties
Building a color-coded scale bar with a JS-controlled sliding marker
Input validation with isNaN and null-guard patterns
Shimmer button animation using CSS pseudo-elements
Responsive design with media queries and clamp() for fluid typography