BMI Calculator

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let weightUnit = 'kg', heightUnit = 'cm';

  function setupToggle(id, cb) {
    document.getElementById(id).querySelectorAll('button').forEach(b => {
      b.addEventListener('click', e => {
        e.preventDefault();
        document.getElementById(id).querySelectorAll('button').forEach(x => x.classList.remove('active'));
        b.classList.add('active');
        cb(b.dataset.u);
      });
    });
  }

  setupToggle('weight-unit', u => { weightUnit = u; calc(); });
  setupToggle('height-unit', u => {
    heightUnit = u;
    document.getElementById('height-cm').classList.toggle('hidden', u !== 'cm');
    document.getElementById('height-ft').classList.toggle('hidden', u !== 'ft');
    calc();
  });

  document.querySelectorAll('input[type="number"]').forEach(i => i.addEventListener('input', calc));

  function calc() {
    let weightKg = parseFloat(document.getElementById('inp-weight').value) || 0;
    if (weightUnit === 'lbs') weightKg *= 0.453592;

    let heightM;
    if (heightUnit === 'cm') {
      heightM = (parseFloat(document.getElementById('inp-cm').value) || 0) / 100;
    } else {
      const ft = parseFloat(document.getElementById('inp-ft').value) || 0;
      const inc = parseFloat(document.getElementById('inp-in').value) || 0;
      heightM = (ft * 12 + inc) * 0.0254;
    }

    if (weightKg <= 0 || heightM <= 0) return;

    const bmi = weightKg / (heightM * heightM);
    let cat, color;
    if (bmi < 18.5) { cat = 'Underweight'; color = '#3b82f6'; }
    else if (bmi < 25) { cat = 'Normal'; color = 'var(--success)'; }
    else if (bmi < 30) { cat = 'Overweight'; color = 'var(--warning)'; }
    else { cat = 'Obese'; color = 'var(--error)'; }

    document.getElementById('val-bmi').textContent = bmi.toFixed(1);
    document.getElementById('val-bmi').style.color = color;
    document.getElementById('val-cat').textContent = cat;
    document.getElementById('val-cat').style.color = color;

    const pct = Math.min(100, Math.max(0, (bmi - 15) / 25 * 100));
    document.getElementById('bmi-marker').style.left = pct + '%';

    const lowKg = 18.5 * heightM * heightM;
    const highKg = 24.9 * heightM * heightM;
    const u = weightUnit === 'lbs' ? ' lbs' : ' kg';
    const conv = weightUnit === 'lbs' ? 2.20462 : 1;
    document.getElementById('val-healthy-low').textContent = (lowKg * conv).toFixed(1) + u;
    document.getElementById('val-healthy-high').textContent = (highKg * conv).toFixed(1) + u;
  }
  calc();