Helo, rakan pemaju! Hari ini, saya teruja untuk berkongsi projek yang saya kerjakan baru-baru ini: Kalkulator BMI (Body Mass Index). Aplikasi web mudah ini membantu pengguna mengira BMI mereka berdasarkan ketinggian dan berat mereka, menawarkan cara mudah untuk menilai status kesihatan mereka. Mari selami butiran projek dan cara ia dibina!

Gambaran Keseluruhan Projek

Kalkulator BMI ialah alat mesra pengguna yang membolehkan pengguna memasukkan ketinggian (dalam sentimeter) dan berat (dalam kilogram). Dengan hanya satu klik butang, aplikasi mengira BMI dan memaparkan kategori kesihatan yang sepadan, seperti Kurang Berat Badan, Berat Normal, Berat Badan Berlebihan atau Obesiti.

ciri-ciri

• Input Pengguna: Pengguna boleh memasukkan ketinggian dan berat mereka terus ke dalam medan input.
• Pengiraan BMI: Aplikasi mengira BMI menggunakan formula standard.
• Kategori Kesihatan: Berdasarkan BMI yang dikira, apl itu menyediakan kategori kesihatan yang berkaitan.
• Reka Bentuk Responsif: Kalkulator direka bentuk untuk responsif, memastikan pengalaman lancar merentas peranti yang berbeza.

Teknologi yang Digunakan

• HTML: Menstruktur kandungan halaman web.
• CSS: Menggayakan aplikasi, memberikan rupa yang bersih dan moden.
• JavaScript: Mengendalikan pengiraan BMI dan mengemas kini DOM untuk memaparkan hasil.

Struktur Projek

Berikut ialah gambaran ringkas struktur projek:

BMI-Calculator/ ├── index.html ├── style.css └── script.js

Penerangan Kod

Mari kita lihat dengan lebih dekat kod yang memberi kuasa kepada Kalkulator BMI.

HTML

HTML menyediakan struktur asas kalkulator, termasuk medan input untuk ketinggian dan berat, butang untuk mencetuskan pengiraan dan bahagian untuk memaparkan hasilnya.

         
  
 
BMI Calculator
 
 
 
Body Mass Index (BMI)
 Your Height (cm):  Your Weight (kg):  Compute BMI  
Weight Condition: 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

CSS menggayakan halaman untuk menjadikannya menarik secara visual dan mudah digunakan. Ia menampilkan reka bentuk moden dan bersih dengan elemen responsif.

body { margin: 0; background: linear-gradient(to left bottom, lightgreen, lightblue); display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; font-family: 'Courier New', Courier, monospace; } .container { background: rgba(255, 255, 255, 0.3); padding: 20px; display: flex; flex-direction: column; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); margin: 5px; } .heading { font-size: 30px; } .input { padding: 10px 20px; font-size: 18px; background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.5); margin: 10px; } .btn { background-color: lightgreen; border: none; padding: 10px 20px; border-radius: 5px; margin: 10px; font-size: 20px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); cursor: pointer; } .btn:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); transition: all 300ms ease; } .info-text { font-size: 20px; font-weight: 500; } .header { margin: 30px; text-align: center; } .footer { margin: 20px; text-align: center; }

JavaScript

JavaScript mengendalikan fungsi teras aplikasi—mengira BMI berdasarkan input pengguna dan mengemas kini halaman web dengan hasilnya.

const btnE1 = document.getElementById("btn"); const resultE1 = document.getElementById("bmi-result"); const weightConditionE1 = document.getElementById("weight-condition"); const heightE1 = document.getElementById("height"); const weightE1 = document.getElementById("weight"); function calculateBMI() { const height = heightE1.value / 100; const weight = weightE1.value; const bmiValue = weight / (height * height); resultE1.value = bmiValue.toFixed(2); if (bmiValue < 18.5) { weightConditionE1.innerText = "Under Weight"; } else if (bmiValue >= 18.5 && bmiValue <= 24.9) { weightConditionE1.innerText = "Normal Weight"; } else if (bmiValue >= 25 && bmiValue <= 29.9) { weightConditionE1.innerText = "Over Weight"; } else if (bmiValue > 30) { weightConditionE1.innerText = "Obesity"; } } btnE1.addEventListener("click", calculateBMI);

Demo Langsung

Anda boleh mencuba Kalkulator BMI secara langsung di sini.

Kesimpulan

Membina Kalkulator BMI ini merupakan pengalaman yang bermanfaat yang meningkatkan kemahiran saya dalam HTML, CSS dan JavaScript. Projek ini mempamerkan cara idea mudah boleh diubah menjadi alat praktikal yang boleh dimanfaatkan oleh pengguna. Sama ada anda ingin membina projek yang serupa atau hanya meneroka pembangunan web, saya harap tutorial ini membantu anda dalam perjalanan anda. Selamat mengekod!

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Membina Kalkulator BMI dengan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!