Frontend Mentor - Kalkulator Indeks Massa Tubuh
Selamat datang! ?
Terima kasih telah membeli tantangan pengkodean Frontend Mentor premium ini.
Tantangan Mentor Frontend membantu Anda meningkatkan keterampilan coding dengan membangun proyek yang realistis. Tantangan premium ini adalah bagian portofolio yang sempurna, jadi silakan gunakan apa yang Anda buat di portofolio Anda untuk ditunjukkan kepada orang lain.
Untuk melakukan tantangan ini, Anda memerlukan pemahaman yang kuat tentang HTML, CSS, dan JavaScript.
Tantangannya
Tantangan Anda adalah membuat halaman kalkulator indeks massa tubuh ini dan membuatnya sedekat mungkin dengan desainnya.
Anda dapat menggunakan alat apa pun yang Anda suka untuk membantu Anda menyelesaikan tantangan. Jadi, jika Anda memiliki sesuatu yang ingin Anda praktikkan, silakan mencobanya.
Pengguna Anda harus dapat:
1. Masukkan tinggi dan berat badannya.
2. Hitung BMI berdasarkan nilai yang dimasukkan.
3. Lihat hasil BMI mereka yang ditampilkan di komponen hasil.
4. Lihat klasifikasi bobotnya yang ditampilkan di komponen hasil.
5. Lihat kisaran berat badan sehat mereka yang ditampilkan di komponen hasil.
Ingin dukungan dalam tantangan ini? Bergabunglah dengan komunitas kami dan ajukan pertanyaan di saluran #help.
Perilaku yang Diharapkan
Di bawah ini Anda akan menemukan rentang BMI dan klasifikasi beratnya. Berdasarkan hasil BMI seseorang, tambahkan klasifikasi berat badannya ke kalimat "BMI Anda menunjukkan bahwa Anda" dalam komponen hasil.
| Kisaran BMI | Klasifikasi Berat |
| ---- | --------------------- |
| Kurang dari 18,5 | Berat badan kurang |
| 18,5 hingga 24,9 | Berat Badan Sehat |
| 25 hingga 29,9 | Kegemukan |
| 30 atau lebih besar | obesitas |
Tambahkan kisaran berat badan sehat individu berdasarkan kategorisasi BMI bawah dan atas serta tinggi badan orang tersebut.
Dimana Menemukan Segalanya
Tugas Anda adalah membangun proyek ke file desain yang disediakan. Kami menyediakan desain versi Sketch dan Figma, sehingga Anda dapat memilih alat mana yang ingin Anda gunakan. Anda dapat mengunduh file desain di platform. Harap pastikan untuk tidak membaginya dengan orang lain. Unduhan desain juga dilengkapi dengan file README.md untuk membantu Anda melakukan pengaturan.
Semua aset yang diperlukan untuk proyek ini ada di folder /assets. Gambar sudah diekspor untuk ukuran layar yang benar dan dioptimalkan. Beberapa dapat digunakan kembali pada berbagai ukuran layar. Jadi, jika Anda tidak melihat gambar di folder tertentu, biasanya gambar tersebut berada di folder lain untuk halaman tersebut.
Kami juga menyertakan file font variabel dan statis untuk font yang diperlukan untuk proyek ini. Anda dapat memilih untuk menautkan ke Google Fonts atau menggunakan file font lokal untuk menghosting font tersebut sendiri. Perhatikan bahwa kami telah menghapus file font statis untuk bobot font yang tidak diperlukan untuk proyek ini.
Sistem desain dalam file desain akan memberi Anda lebih banyak informasi tentang berbagai warna, font, dan gaya yang digunakan dalam proyek ini. Font kami selalu berasal dari Google Fonts.
Membangun Proyek Anda
Jangan ragu untuk menggunakan alur kerja apa pun yang Anda rasa nyaman. Di bawah ini adalah proses yang disarankan, namun Anda tidak merasa perlu mengikuti langkah-langkah berikut:
1. Siapkan proyek Anda: Buat folder baru untuk proyek Anda dan inisialisasi dengan Git.
2. Tambahkan file HTML, CSS, dan JavaScript: Buat file yang diperlukan untuk proyek Anda.
3. Bangun struktur HTML: Gunakan file desain sebagai referensi untuk membangun struktur dasar proyek Anda.
4. Menata HTML dengan CSS: Gunakan file desain untuk menata elemen proyek Anda.
5. Tambahkan fungsionalitas dengan JavaScript: Gunakan JavaScript untuk menangani input dan penghitungan pengguna.
6. Uji proyek Anda: Gunakan alat pengembang browser Anda untuk menguji fungsionalitas proyek Anda.
7. Terapkan proyek Anda: Host proyek Anda di platform hosting gratis.
Menyebarkan Proyek Anda
Seperti disebutkan di atas, ada banyak cara untuk menghosting proyek Anda secara gratis. Host yang kami rekomendasikan adalah:
Halaman GitHub
Netlifikasi
Vercel
Anda dapat menghosting situs Anda menggunakan salah satu solusi ini atau penyedia tepercaya kami lainnya. Baca lebih lanjut tentang host kami yang direkomendasikan dan tepercaya.
Buat README.md Kustom
Kami sangat menyarankan untuk menimpa README.md ini dengan yang khusus. Kami telah menyediakan template di dalam file README-template.md di kode awal ini.
Templat ini memberikan panduan tentang apa yang harus ditambahkan. README khusus akan membantu Anda menjelaskan proyek Anda dan merefleksikan pembelajaran Anda. Silakan mengedit template kami sebanyak yang Anda suka.
Setelah Anda menambahkan informasi Anda ke templat, hapus file ini dan ganti nama file README-template.md menjadi README.md. Itu akan membuatnya muncul sebagai file README repositori Anda.
Mengirimkan Solusi Anda
Kirimkan solusi Anda pada platform agar dapat dilihat oleh komunitas lainnya. Ikuti "Panduan lengkap untuk mengirimkan solusi" kami untuk mendapatkan tips tentang cara melakukan hal ini.
Ingat, jika Anda mencari masukan mengenai solusi Anda, pastikan untuk mengajukan pertanyaan saat mengirimkannya. Semakin spesifik dan mendetail pertanyaan Anda, semakin tinggi peluang Anda mendapatkan masukan berharga dari komunitas.
⚠️ PENTING ⚠️: Dengan tantangan premium ini, pastikan untuk tidak mengunggah file desain ke GitHub saat Anda mengirimkan ke platform dan membagikannya. Jika Anda telah membuat proyek baru, cara termudah untuk melakukannya adalah dengan menyalin seluruh .gitignore yang disediakan dalam proyek awal ini.
Berbagi Solusi Anda
Ada beberapa tempat di mana Anda dapat membagikan solusi Anda:
Mentor Frontend: Bagikan solusi Anda di platform agar dapat dilihat oleh komunitas lainnya.
GitHub: Bagikan solusi Anda di GitHub.
Twitter: Bagikan solusi Anda di Twitter.
Kami menyediakan templat untuk membantu Anda membagikan solusi Anda setelah Anda mengirimkannya ke platform. Harap edit pertanyaan tersebut dan sertakan pertanyaan spesifik saat Anda mencari masukan.
Semakin spesifik pertanyaan Anda, semakin besar kemungkinan anggota komunitas lain akan memberi Anda masukan.
Punya Masukan untuk Kami?
Kami senang menerima masukan! Kami selalu berupaya meningkatkan tantangan dan platform kami. Jadi jika Anda memiliki sesuatu yang ingin disebutkan, silakan kirim email ke hi[at]frontendmentor[dot]io.
Selamat membangun! ✨
