Cara Membuat Kalkulator BMI (Indeks Massa Tubuh) Sederhana dengan Logika JavaScript

Dalam dunia pengembangan web dan blogging, konten statis berupa teks saja terkadang membosankan. Salah satu cara terbaik untuk meningkatkan nilai (value) website Anda di mata Google AdSense adalah dengan menyisipkan Konten Interaktif.

Salah satu tool yang paling banyak dicari dan berguna adalah Kalkulator BMI (Body Mass Index). Tool ini membantu pengguna mengetahui apakah berat badan mereka ideal, kurang, atau berlebih berdasarkan tinggi badan.

Pada tutorial ini, kita tidak hanya akan copy-paste kode. Kita akan membedah logika JavaScript di balik perhitungan matematika BMI, memvalidasi input agar tidak error, dan membungkusnya dengan desain CSS yang responsif.

Mengapa Membuat Tools Sendiri?

Sebelum masuk ke koding, pahami mengapa artikel teknis semacam ini dianggap “High Value”:

1. Interaksi User: Pengunjung melakukan klik dan input data, bukan hanya membaca.
2. Solusi Langsung: Pengunjung mendapatkan jawaban (angka BMI) secara instan.
3. Ringan: Script ini berjalan di browser (Client Side), tidak membebani server hosting Anda.

---

Rumus Matematika BMI

Sebelum menulis kode, kita harus paham logikanya. Rumus BMI standar (Metrik) adalah:

$BMI=\frac{BeratBadan(kg)}{TinggiBadan(m{)}^2}$BMI=TinggiBadan(m)2BeratBadan(kg)​

Catatan penting untuk logika pemrograman nanti:

• User biasanya memasukkan tinggi dalam Sentimeter (cm).
• Kita harus mengubahnya ke Meter (m) terlebih dahulu (dibagi 100).

---

Tahap 1: Struktur HTML (Kerangka)

Buatlah antarmuka yang bersih. Kita membutuhkan dua input (Berat & Tinggi), satu tombol hitung, dan satu area untuk menampilkan hasil.

Salin kode ini ke editor HTML Anda:

HTML
<div class="bmi-card">
    <h2>Cek Kesehatan Anda</h2>
    <p>Kalkulator Indeks Massa Tubuh (BMI)</p>

    <!-- Input Area -->
    <div class="input-group">
        <label for="weight">Berat Badan (kg)</label>
        <input type="number" id="weight" placeholder="Contoh: 65">
    </div>

    <div class="input-group">
        <label for="height">Tinggi Badan (cm)</label>
        <input type="number" id="height" placeholder="Contoh: 170">
    </div>

    <!-- Tombol Aksi -->
    <button onclick="calculateBMI()">Hitung BMI Sekarang</button>

    <!-- Hasil akan muncul di sini -->
    <div id="result" class="result-area">
        <span id="bmi-value">0.00</span>
        <span id="bmi-status">Menunggu Input...</span>
    </div>
</div>

---

Tahap 2: Desain CSS (Tampilan Modern)

Jangan biarkan tool Anda terlihat kaku. Gunakan CSS Flexbox dan bayangan (box-shadow) agar terlihat profesional dan terpercaya.

Tambahkan kode ini ke file style.css:

CSS
/* Styling Container Kartu */
.bmi-card {
    background: #ffffff;
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Efek bayangan lembut */
    font-family: 'Segoe UI', sans-serif;
    text-align: center;
}

.bmi-card h2 {
    color: #2c3e50;
    margin-bottom: 5px;
}

/* Styling Input */
.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box; /* Agar padding tidak merusak lebar */
    outline: none;
    transition: border 0.3s;
}

.input-group input:focus {
    border-color: #3498db;
}

/* Styling Tombol */
button {
    width: 100%;
    padding: 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background-color: #2980b9;
}

/* Area Hasil */
.result-area {
    margin-top: 25px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: none; /* Sembunyikan dulu sebelum dihitung */
}

#bmi-value {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
}

#bmi-status {
    font-size: 14px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

---

Tahap 3: Logika JavaScript (Otak Program)

Inilah bagian terpenting agar konten ini memiliki “Value”. Kita akan membuat fungsi yang:

1. Mengambil nilai input.
2. Memvalidasi agar tidak kosong.
3. Menghitung rumus.
4. Menentukan kategori (Kurus, Normal, Gemuk) menggunakan logika if-else.

Tambahkan kode ini ke file script Anda atau di dalam tag <script> sebelum </body>:

JavaScript
function calculateBMI() {
    // 1. Ambil nilai dari input HTML
    // parseFloat digunakan untuk mengubah teks menjadi angka desimal
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);
    const resultArea = document.getElementById('result');
    const bmiValueElement = document.getElementById('bmi-value');
    const bmiStatusElement = document.getElementById('bmi-status');

    // 2. Validasi Input (Error Handling)
    // Jika input kosong atau bukan angka (NaN), hentikan proses
    if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {
        alert("Mohon masukkan berat dan tinggi badan yang valid!");
        return;
    }

    // 3. Konversi cm ke meter
    const heightInMeters = height / 100;

    // 4. Hitung Rumus BMI
    // Rumus: Berat / (Tinggi * Tinggi)
    let bmi = weight / (heightInMeters * heightInMeters);
    
    // Membulatkan hasil menjadi 2 angka di belakang koma (misal: 24.56)
    bmi = bmi.toFixed(2);

    // 5. Logika Penentuan Kategori (If-Else)
    let status = '';
    let color = '';

    if (bmi < 18.5) {
        status = 'Kekurangan Berat Badan';
        color = '#e74c3c'; // Merah
    } else if (bmi >= 18.5 && bmi <= 24.9) {
        status = 'Berat Badan Normal (Ideal)';
        color = '#27ae60'; // Hijau
    } else if (bmi >= 25 && bmi <= 29.9) {
        status = 'Kelebihan Berat Badan';
        color = '#f39c12'; // Oranye
    } else {
        status = 'Obesitas (Kegemukan)';
        color = '#c0392b'; // Merah Gelap
    }

    // 6. Tampilkan Hasil ke User
    bmiValueElement.innerText = bmi;
    bmiStatusElement.innerText = status;
    bmiStatusElement.style.color = color; // Ubah warna teks sesuai status
    
    // Munculkan kotak hasil dengan efek halus
    resultArea.style.display = 'block';
}

---

Analisis Kode: Apa yang Kita Pelajari?

Untuk menghindari Low Value Content, Anda harus memahami apa yang Anda tulis. Berikut penjelasannya:

• parseFloat(): Sangat penting. Input HTML secara default dianggap sebagai teks (string). Fungsi ini mengubahnya menjadi angka agar bisa dihitung secara matematika.
• isNaN(): Singkatan dari Is Not a Number. Ini adalah fitur keamanan agar kalkulator tidak error jika user mengosongkan kolom atau memasukkan huruf.
• toFixed(2): Menghindari angka hasil yang terlalu panjang (misal: 23.44444449). Kita memotongnya menjadi 2 desimal agar rapi.
• DOM Manipulation: Perintah document.getElementById adalah jembatan antara JavaScript (logika) dan HTML (tampilan). Kita mengubah teks di layar tanpa perlu reload halaman.

Kesimpulan

Membuat Kalkulator BMI Sederhana dengan JavaScript bukan hanya latihan coding yang bagus, tetapi juga strategi konten yang cerdas untuk blog Anda.

Tool seperti ini memberikan manfaat nyata bagi pengunjung. Ketika pengunjung merasa terbantu, mereka akan membagikan halaman ini atau kembali lagi di lain waktu. Sinyal positif inilah yang dicari Google saat meninjau kelayakan monetisasi AdSense pada website Anda.

Selamat mencoba, dan pastikan untuk menjaga kesehatan tubuh Anda!

---

Disclaimer: Kalkulator ini hanya untuk tujuan informasi umum dan edukasi pemrograman. Untuk saran medis profesional, selalu konsultasikan dengan dokter.