Panduan Lengkap: Membuat Kalkulator Berat Badan Ideal (BMI) dengan HTML dan JavaScript

Kesehatan adalah aset paling berharga, dan memahami kondisi tubuh adalah langkah pertama untuk menjaganya. Salah satu indikator dasar yang sering digunakan untuk mengevaluasi berat badan relatif terhadap tinggi adalah Indeks Massa Tubuh atau Body Mass Index (BMI). Dengan BMI, Anda bisa mendapatkan gambaran apakah berat badan Anda termasuk dalam kategori kekurangan, normal, berlebih, atau obesitas.

Dalam era digital ini, memiliki alat yang bisa membantu kita memantau kesehatan menjadi sangat praktis. Kali ini, kami akan memandu Anda langkah demi langkah untuk membuat aplikasi kalkulator BMI sederhana menggunakan HTML dan JavaScript. Ini adalah proyek yang sempurna bagi Anda yang ingin mengasah keterampilan dasar pengembangan web sambil menciptakan alat yang bermanfaat.

Formula BMI

Rumus untuk menghitung BMI adalah:

BMI = Berat Badan (kg) / (Tinggi Badan (m))^2

Sebagai contoh, jika seseorang memiliki berat badan 70 kg dan tinggi 1,75 meter, maka perhitungannya adalah:

BMI = 70 / (1.75 * 1.75) = 70 / 3.0625 = 22.86

Kategori BMI

Berikut adalah klasifikasi BMI standar yang umumnya digunakan:

< 18.5: Kurus (Underweight)
18.5 – 24.9: Normal
25.0 – 29.9: Kelebihan Berat Badan (Overweight)
≥ 30.0: Obesitas

Memiliki kalkulator BMI sendiri memberikan Anda kendali lebih untuk memantau perubahan tubuh dan mengambil tindakan yang diperlukan untuk mencapai gaya hidup yang lebih sehat.

Langkah 1: Buat folder baru

Buat folder baru dengan nama bmi atau nama yang anda inginkan. Folder bisa anda buat dimanapun anda mau, bisa di folder document atau di folder downloads atau folder lainnya.

Langkah 2: Struktur HTML (index.html)

Pertama, kita akan membuat struktur dasar aplikasi kalkulator BMI kita menggunakan HTML. Buat file baru bernama index.html dan masukkan kode berikut, save lalu jalankan di browser dengan klik kanan lalu pilih browser



<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Kalkulator BMI Ideal</h1>
        <div class="input-group">
            <label for="berat">Berat Badan (kg):</label>
            <input type="number" id="berat" placeholder="Masukkan berat badan Anda">
        </div>
        <div class="input-group">
            <label for="tinggi">Tinggi Badan (cm):</label>
            <input type="number" id="tinggi" placeholder="Masukkan tinggi badan Anda">
        </div>
        <button id="hitungBtn">Hitung BMI</button>
        <div id="hasil">
            <p>BMI Anda: <span id="nilaiBMI">-</span></p>
            <p>Kategori: <span id="kategoriBMI">-</span></p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Dalam kode HTML ini:

Kita membuat dua kolom input (`type="number"`) untuk berat badan (dalam kilogram) dan tinggi badan (dalam sentimeter).
Sebuah tombol dengan `id="hitungBtn"` akan digunakan untuk memicu perhitungan BMI.
Dua elemen `<span>` dengan `id="nilaiBMI"` dan `id="kategoriBMI"` akan menampilkan hasil BMI dan kategorinya.
Kita juga menautkan file CSS (`style.css`) dan JavaScript (`script.js`) yang akan kita buat selanjutnya.

Langkah 3: Menambahkan Gaya CSS (style.css - Opsional tapi Direkomendasikan)

Agar tampilan aplikasi lebih menarik, kita bisa menambahkan sedikit sentuhan CSS. Buat file baru bernama style.css di direktori yang sama dengan index.html dan masukkan kode berikut:



body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f7f6;
    color: #333;
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 400px;
}

h1 {
    color: #2c3e50;
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

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

.input-group input {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    background-color: #28a745;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #218838;
}

#hasil {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid #eee;
    background-color: #e9f7ef;
    border-radius: 5px;
}

#hasil p {
    margin: 8px 0;
    font-size: 17px;
}

#hasil span {
    font-weight: bold;
    color: #007bff;
}

Kode CSS ini akan membuat kalkulator Anda terlihat lebih rapi dan user-friendly. Jika Anda ingin fokus pada JavaScript, Anda bisa melewati langkah ini terlebih dahulu.

Langkah 4: Logika JavaScript (script.js)

Ini adalah bagian inti dari aplikasi kita, di mana perhitungan BMI akan dilakukan. Buat file baru bernama script.js di direktori yang sama dengan file HTML dan CSS, lalu masukkan kode berikut:



document.addEventListener('DOMContentLoaded', function() {
    // Mendapatkan referensi elemen HTML
    const beratInput = document.getElementById('berat');
    const tinggiInput = document.getElementById('tinggi');
    const hitungBtn = document.getElementById('hitungBtn');
    const nilaiBMISpan = document.getElementById('nilaiBMI');
    const kategoriBMISpan = document.getElementById('kategoriBMI');

    // Menambahkan event listener ke tombol hitung
    hitungBtn.addEventListener('click', calculateBMI);

    function calculateBMI() {
        // Mengambil nilai dari input dan mengonversinya ke angka
        let berat = parseFloat(beratInput.value);
        let tinggi = parseFloat(tinggiInput.value);

        // Validasi input
        if (isNaN(berat) || isNaN(tinggi) || berat <= 0 || tinggi <= 0) {
            nilaiBMISpan.textContent = 'Invalid';
            kategoriBMISpan.textContent = 'Masukkan nilai berat dan tinggi yang valid.';
            alert('Mohon masukkan berat badan dan tinggi badan yang valid (angka positif).');
            return; // Menghentikan fungsi jika input tidak valid
        }

        // Konversi tinggi dari cm ke meter
        tinggi = tinggi / 100;

        // Menghitung BMI
        const bmi = berat / (tinggi * tinggi);

        // Menampilkan nilai BMI (dibulatkan 2 angka di belakang koma)
        nilaiBMISpan.textContent = bmi.toFixed(2);

        // Menentukan kategori BMI
        let kategori = '';
        if (bmi < 18.5) {
            kategori = 'Kurus (Underweight)';
            kategoriBMISpan.style.color = '#dc3545'; // Merah
        } else if (bmi >= 18.5 && bmi <= 24.9) {
            kategori = 'Normal';
            kategoriBMISpan.style.color = '#28a745'; // Hijau
        } else if (bmi >= 25.0 && bmi <= 29.9) {
            kategori = 'Kelebihan Berat Badan (Overweight)';
            kategoriBMISpan.style.color = '#ffc107'; // Kuning
        } else {
            kategori = 'Obesitas';
            kategoriBMISpan.style.color = '#dc3545'; // Merah
        }
        kategoriBMISpan.textContent = kategori;
    }
});

Penjelasan Kode JavaScript

`document.addEventListener('DOMContentLoaded', function() { ... });`: Kode ini memastikan bahwa JavaScript baru akan dieksekusi setelah seluruh dokumen HTML selesai dimuat.
`const beratInput = document.getElementById('berat');`: Kita mendapatkan referensi ke elemen HTML menggunakan `id`-nya. Ini memungkinkan kita untuk mengakses nilai input atau mengubah isinya.
`hitungBtn.addEventListener('click', calculateBMI);`: Ini adalah event listener. Ketika tombol "Hitung BMI" diklik, fungsi `calculateBMI` akan dipanggil.
`parseFloat(beratInput.value);`: Mengambil nilai dari input (yang awalnya string) dan mengonversinya menjadi angka desimal.
`isNaN(berat) || isNaN(tinggi) || berat <= 0 || tinggi <= 0`: Ini adalah validasi input. Kode ini memeriksa apakah input yang diberikan adalah angka, dan apakah angka tersebut positif. Jika tidak valid, pesan peringatan akan muncul.
`tinggi = tinggi / 100;`: Karena input tinggi dalam sentimeter, kita membaginya dengan 100 untuk mengonversinya menjadi meter agar sesuai dengan rumus BMI.
`const bmi = berat / (tinggi * tinggi);`: Perhitungan BMI yang sebenarnya.
`nilaiBMISpan.textContent = bmi.toFixed(2);`: Menampilkan hasil BMI yang telah dibulatkan menjadi dua angka di belakang koma.
`if-else if-else`: Struktur ini digunakan untuk menentukan kategori BMI berdasarkan nilai yang dihitung dan menampilkan kategori serta mengubah warna teksnya.