Membuat Web BMI

Belajar Web MSI + Statistik Interaktif

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.

Komentar

Posting Komentar

Postingan populer dari blog ini

🚀 Belajar Flutter Sambil Ngabuburit: Bikin Widget Gampang Banget!

Gambar
                                                    Halo bestie 👋, Di blog ini gue mau sharing dikit soal pengalaman ngulik  Flutter  (framework UI dari Google itu lho, yang bisa bikin app Android/iOS dari satu codebase). Kali ini gue bikin  widget sederhana  yang ada teks, gambar dari internet, dan tombol yang bisa dipencet ✨. Langsung aja, ini dia hasil ngulik gue: 💡 Apa yang Akan Kita Bikin? Widget-nya simpel banget: 🧾 Teks sambutan ala grup legendaris:  WELCOME TO SIDIQ GROUP!!!!!!! 🖼️ Gambar dari internet yang kece abis 🔘 Tombol yang kalau ditekan muncul dialog lucu 🧑‍💻 Kodenya Gini Nih: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Ma...
Baca selengkapnya

BIKIN TAMPILAN IG SENDIRI PAKE FIGMA YANG KECE DAN KEREN

 Halo bestie! ✨ Siapa sih yang nggak pengen feed Instagram-nya keliatan rapi, aesthetic, dan punya vibes yang konsisten? Apalagi buat Gen Z, IG itu udah kayak “kartu nama digital” 🤳. Nah kabar baiknya, kamu bisa banget bikin tampilan Instagram kece tanpa ribet—cukup modal Figma ! 🚀 Kenapa Harus Figma? Gratis & Online → nggak perlu install berat-berat, tinggal buka browser. User Friendly → gampang dipelajarin, cocok buat pemula sekalipun. Kolaboratif → bisa barengan sama temen, tim, atau bahkan client. Banyak Template → tinggal pilih, edit, jadi deh. Step by Step Bikin Tampilan IG di Figma Tentukan konsep feed dulu Mau vibe minimalis, colorful, atau bold? Konsep ini penting biar semua postingan nyambung. Buka Figma & buat frame sesuai ukuran IG Biasanya pakai 1080 x 1080 px untuk feed, atau 1080 x 1920 px buat story. Mainin layout & grid Gunakan grid biar feed kamu nggak acak-acakan. Bisa bikin puzzle feed, carousel, atau clean single po...
Baca selengkapnya