Membuat Kalkulator BMI Body Mass Index dengan JavaScript

Dipublikasikan: Juli 2026

BMI Calculator adalah web app kesehatan yang paling banyak dicari. Tutorial ini memandu Anda membuat kalkulator BMI dengan visual indikator warna dan kategori berat badan.

Fitur

Input berat (kg) dan tinggi (cm)
Hasil BMI dengan warna indikator
Kategori: Kurus, Normal, Overweight, Obesitas
Desain modern responsif

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator BMI</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f4f8; min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .container { background:#fff; border-radius:20px; padding:35px; box-shadow:0 20px 60px rgba(0,0,0,0.1); width:100%; max-width:450px; text-align:center; }
    h1 { color:#2d3436; margin-bottom:8px; }
    .subtitle { color:#636e72; margin-bottom:25px; font-size:14px; }
    .input-group { margin-bottom:18px; text-align:left; }
    .input-group label { display:block; margin-bottom:6px; color:#2d3436; font-weight:600; font-size:14px; }
    .input-group input { width:100%; padding:14px; border:2px solid #dfe6e9; border-radius:10px; font-size:16px; }
    .input-group input:focus { outline:none; border-color:#6c5ce7; }
    .btn { width:100%; padding:16px; background:#6c5ce7; color:#fff; border:none; border-radius:12px; font-size:17px; cursor:pointer; margin-top:5px; }
    .btn:hover { background:#5b4bd6; }
    .result { margin-top:25px; padding:20px; border-radius:14px; display:none; }
    .result.show { display:block; }
    .bmi-value { font-size:48px; font-weight:700; }
    .bmi-category { font-size:20px; font-weight:600; margin-top:5px; }
    .bmi-desc { font-size:14px; margin-top:8px; }
    .bar-container { width:100%; height:12px; background:#dfe6e9; border-radius:6px; margin-top:18px; overflow:hidden; }
    .bar-fill { height:100%; border-radius:6px; transition:all 0.5s; }
    .info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; font-size:11px; }
    .info-item { padding:8px; border-radius:6px; color:#fff; }
  </style>
</head>
<body>
  <div class="container">
    <h1>âš–ï¸ Kalkulator BMI</h1>
    <div class="subtitle">Hitung Indeks Massa Tubuh Anda</div>
    <div class="input-group"><label>Berat Badan (kg)</label><input id="weight" type="number" placeholder="Contoh: 65" /></div>
    <div class="input-group"><label>Tinggi Badan (cm)</label><input id="height" type="number" placeholder="Contoh: 170" /></div>
    <button class="btn" onclick="calculate()">Hitung BMI</button>
    <div class="result" id="result">
      <div class="bmi-value" id="bmiValue">0</div>
      <div class="bmi-category" id="bmiCategory"></div>
      <div class="bmi-desc" id="bmiDesc"></div>
      <div class="bar-container"><div class="bar-fill" id="barFill" style="width:0%"></div></div>
      <div class="info-grid">
        <div class="info-item" style="background:#0984e3">Kurus <18.5</div>
        <div class="info-item" style="background:#00b894">Normal 18.5-25</div>
        <div class="info-item" style="background:#fdcb6e">Gemuk 25-30</div>
        <div class="info-item" style="background:#d63031">Obesitas >30</div>
      </div>
    </div>
  </div>
  <script>
    function calculate() {
      const w = parseFloat(document.getElementById('weight').value);
      const h = parseFloat(document.getElementById('height').value) / 100;
      if (!w || !h || w < 1 || h < 0.3) return alert('Masukkan berat dan tinggi yang valid');
      const bmi = w / (h * h);
      const rounded = Math.round(bmi * 10) / 10;
      let category, color, desc;
      if (bmi < 18.5) { category = 'Kurus'; color = '#0984e3'; desc = 'Anda berada dalam kategori kurus. Disarankan untuk meningkatkan asupan nutrisi.'; }
      else if (bmi < 25) { category = 'Normal'; color = '#00b894'; desc = 'Anda memiliki berat badan ideal! Pertahankan pola makan dan olahraga teratur.'; }
      else if (bmi < 30) { category = 'Gemuk'; color = '#fdcb6e'; desc = 'Anda berada dalam kategori kelebihan berat badan. Mulai pola hidup sehat.'; }
      else { category = 'Obesitas'; color = '#d63031'; desc = 'Anda berada dalam kategori obesitas. Konsultasikan dengan dokter.'; }
      document.getElementById('bmiValue').textContent = rounded;
      document.getElementById('bmiValue').style.color = color;
      document.getElementById('bmiCategory').textContent = category;
      document.getElementById('bmiCategory').style.color = color;
      document.getElementById('bmiDesc').textContent = desc;
      document.getElementById('barFill').style.width = Math.min((bmi / 40) * 100, 100) + '%';
      document.getElementById('barFill').style.background = color;
      document.getElementById('result').classList.add('show');
    }
  </script>
</body>
</html>