Kalkulator BMI sederhana

Membuat Kalkulator BMI sederhana

—

by

Webbiz.ID
in , ,

Berikut ini adalah contoh kode untuk membuat kalkulator BMI (Body Mass Index) menggunakan JavaScript, HTML, dan CSS. Kode ini akan menghitung BMI berdasarkan berat badan dan tinggi badan yang dimasukkan oleh pengguna melalui form HTML.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Kalkulator BMI</title>
  <style>
    /* CSS untuk tampilan kalkulator */
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    
    .container {
      width: default;
	background: white;
	margin: 30px auto;
	padding: 30px 20px;
    }
    

    
    label {
      display: block;
      margin-bottom: 10px;
    }
    
    input[type="number"] {
      box-sizing : border-box;
	width: 100%;
	padding: 10px;
	font-size: 11pt;
	margin-bottom: 20px;
    }
    
    button {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .result {
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Kalkulator BMI</h1>
    <form id="bmiForm">
      <label for="weight">Berat Badan (kg):</label>
      <input type="number" id="weight" required>
      
      <label for="height">Tinggi Badan (cm):</label>
      <input type="number" id="height" required>
      
      <button type="submit">Hitung BMI</button>
    </form>
    
    <div class="result" id="result"></div>
  </div>

  <script>
    // JavaScript untuk menghitung BMI
    document.getElementById('bmiForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      var weight = parseFloat(document.getElementById('weight').value);
      var height = parseFloat(document.getElementById('height').value) / 100;
      
      var bmi = weight / (height * height);
      var result = document.getElementById('result');
      
      if (isNaN(bmi)) {
        result.textContent = 'Mohon masukkan berat badan dan tinggi badan yang valid.';
      } else {
        result.textContent = 'BMI Anda: ' + bmi.toFixed(2);
      }
    });
  </script>
</body>
</html>
HTML

Output:

Kalkulator BMI

Kalkulator BMI

BMI (Body Mass Index) atau Indeks Massa Tubuh adalah pengukuran standar yang digunakan untuk menilai apakah berat badan seseorang termasuk dalam kategori sehat berdasarkan tinggi badan mereka. Kalkulator BMI sederhana dapat membantu Anda mengetahui apakah berat badan Anda tergolong kurang, ideal, atau berlebih.

Berikut adalah langkah-langkah dasar untuk menghitung BMI:

  1. Rumus BMI:
bmi

Klasifikasi BMI (menurut WHO):

  • Kurus: BMI < 18,5
  • Normal: BMI 18,5–24,9
  • Overweight (kelebihan berat badan): BMI 25–29,9
  • Obesitas: BMI ≥ 30

Catatan: BMI hanya indikator umum dan tidak selalu mencerminkan komposisi tubuh, seperti otot atau lemak tubuh.

Anda dapat menyalin kode di atas dan menjalankannya di browser untuk melihat kalkulator BMI dalam tampilan yang lengkap.

Artikel Terbaru ⭐