Membuat Web BMI

Belajar Membuat Web BMI

Kita belajar membuat web MSI/BMI yang rapih, elegan, dan interaktif. Web ini punya input data diri, tombol hitung, hasil BMI, dan rekomendasi kesehatan.

1

Desain Input

Input data dipisahkan ke dalam card agar rapi. Field umur, berat, tinggi diberi icon supaya interaktif.

<div class="card">
  <input type="number" placeholder="Umur">
  <input type="number" placeholder="Berat (kg)">
  <input type="number" placeholder="Tinggi (cm)">
</div>

2

Tombol Hitung

Tombol "Hitung BMI" diletakkan terpisah agar user mudah menekannya. Tombol full-width dengan warna menonjol.

<button>Hitung BMI</button>

3

Hasil BMI

Hasil BMI ditampilkan di card terpisah agar fokus. Termasuk kategori, rekomendasi, dan progress bar/grafik sederhana.

4

Kesimpulan

Memisahkan input, tombol, dan hasil ke card tersendiri dengan warna & font elegan membuat web MSI mudah digunakan dan enak dilihat.

https://z36006vn3610.zapp.page/#/

Statistik Per Kategori BMI

Kurus

▶

BMI kurang dari 18.5

Persentase populasi: 15%

Rekomendasi: Tambahkan asupan kalori sehat, olahraga ringan, pantau berat badan rutin.

Normal

▶

BMI 18.5 - 24.9

Persentase populasi: 50%

Rekomendasi: Pertahankan pola makan sehat dan olahraga rutin.

Overweight

▶

BMI 25 - 29.9

Persentase populasi: 20%

Rekomendasi: Kurangi gula & gorengan, perbanyak aktivitas fisik.

Obesitas

▶

BMI 30 ke atas

Persentase populasi: 15%

Rekomendasi: Diet seimbang, olahraga teratur, konsultasi tenaga kesehatan.