A BMI calculator with a visual gauge, category colour coding, healthy weight range display, and metric/imperial unit toggle.
BMI = weight(kg) / height(m)². The result falls into one of five categories.
function calculateBMI(weightKg, heightCm) {
const heightM = heightCm / 100;
return weightKg / (heightM * heightM);
}
function getCategory(bmi) {
if (bmi < 18.5) return { label: 'Underweight', color: '#3b82f6', advice: 'Consider increasing caloric intake.' };
if (bmi < 25) return { label: 'Normal weight', color: '#22c55e', advice: 'Great! Maintain your current lifestyle.' };
if (bmi < 30) return { label: 'Overweight', color: '#f59e0b', advice: 'Regular exercise and a balanced diet can help.' };
if (bmi < 35) return { label: 'Obese (Class I)', color: '#f97316', advice: 'Consult a healthcare provider.' };
return { label: 'Obese (Class II+)', color: '#ef4444', advice: 'Please consult a doctor.' };
}
console.log(calculateBMI(70, 175).toFixed(1)); // 22.9 — Normal weightTwo input modes — metric (kg/cm) and imperial (lbs/inches).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php require_once __DIR__ . '/../promo_banner.php'; ?>
<div class="card">
<h1>⚖️ BMI Calculator</h1>
<div class="toggle">
<button class="toggle-btn active" onclick="setUnit('metric')">Metric</button>
<button class="toggle-btn" onclick="setUnit('imperial')">Imperial</button>
</div>
<div class="inputs" id="metricInputs">
<label>Weight (kg)<input type="number" id="weightKg" placeholder="70" min="1" max="300"></label>
<label>Height (cm)<input type="number" id="heightCm" placeholder="175" min="50" max="250"></label>
</div>
<div class="inputs hidden" id="imperialInputs">
<label>Weight (lbs)<input type="number" id="weightLbs" placeholder="154" min="1"></label>
<label>Height (in)<input type="number" id="heightIn" placeholder="69" min="1"></label>
</div>
<button class="calc-btn" onclick="calculate()">Calculate BMI</button>
<div id="result" class="result hidden">
<div class="bmi-number" id="bmiNumber"></div>
<div class="bmi-label" id="bmiLabel"></div>
<div class="gauge" id="gauge"><div class="gauge-fill" id="gaugeFill"></div></div>
<div class="bmi-advice" id="bmiAdvice"></div>
<div class="healthy-range" id="healthyRange"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>Calculate BMI, display the category, and animate a colour gauge.
// app.js
let unit = 'metric';
function setUnit(u) {
unit = u;
document.getElementById('metricInputs').classList.toggle('hidden', u !== 'metric');
document.getElementById('imperialInputs').classList.toggle('hidden', u === 'metric');
document.querySelectorAll('.toggle-btn').forEach((b, i) =>
b.classList.toggle('active', i === (u === 'metric' ? 0 : 1)));
}
function calculate() {
let weightKg, heightCm;
if (unit === 'metric') {
weightKg = parseFloat(document.getElementById('weightKg').value);
heightCm = parseFloat(document.getElementById('heightCm').value);
} else {
weightKg = parseFloat(document.getElementById('weightLbs').value) * 0.453592;
heightCm = parseFloat(document.getElementById('heightIn').value) * 2.54;
}
if (!weightKg || !heightCm || weightKg <= 0 || heightCm <= 0) {
alert('Please enter valid weight and height.'); return;
}
const bmi = weightKg / ((heightCm / 100) ** 2);
const cat = getCategory(bmi);
// Healthy weight range for this height
const hm = heightCm / 100;
const minW = (18.5 * hm * hm).toFixed(1);
const maxW = (24.9 * hm * hm).toFixed(1);
document.getElementById('bmiNumber').textContent = bmi.toFixed(1);
document.getElementById('bmiLabel').textContent = cat.label;
document.getElementById('bmiLabel').style.color = cat.color;
document.getElementById('bmiAdvice').textContent = cat.advice;
document.getElementById('healthyRange').textContent =
`Healthy weight range for your height: ${minW}–${maxW} kg`;
// Gauge: BMI 10→40 maps to 0%→100%
const pct = Math.min(100, Math.max(0, (bmi - 10) / 30 * 100));
document.getElementById('gaugeFill').style.width = pct + '%';
document.getElementById('gaugeFill').style.background = cat.color;
document.getElementById('result').classList.remove('hidden');
}A clean, useful web app in under 100 lines. The toggle between metric and imperial units, the visual gauge, and the healthy weight range make it genuinely more useful than most online BMI calculators.
Spotted a bug, broken code, or something that doesn't look right? Tell us what's off and we'll fix it.