Rumah >hujung hadapan web >tutorial css >Membina Kalkulator BMI dengan HTML, CSS dan JavaScript
Membina Kalkulator BMI dengan HTML, CSS dan JavaScript
- 王林asal
- 2024-08-09 05:28:52373semak imbas
Helo, rakan pembangun! 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 kita 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 Badan 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 keseluruhan ringkas tentang 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="header">
<h1>BMI Calculator</h1>
</div>
<div class="container">
<h1 class="heading">Body Mass Index (BMI)</h1>
Your Height (cm):
<input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
Your Weight (kg):
<input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
<button class="btn" id="btn">Compute BMI</button>
<input disabled type="text" class="input" id="bmi-result">
<h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
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!