Membina Kalkulator BMI dengan HTML, CSS dan JavaScript-tutorial css-php.cn

Membina Kalkulator BMI dengan HTML, CSS dan JavaScript

王林

Lepaskan： 2024-08-09 05:28:52

asal

319 orang telah melayarinya

Building a BMI Calculator with HTML, CSS, and JavaScript

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

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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);

Salin selepas log masuk

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!