首页 >web前端 >css教程 >使用 HTML、CSS 和 JavaScript 构建 BMI 计算器

使用 HTML、CSS 和 JavaScript 构建 BMI 计算器

王林原创: 2024-08-09 05:28:52372浏览

Building a BMI Calculator with HTML, CSS, and JavaScript

各位开发者大家好！今天，我很高兴与大家分享我最近从事的一个项目：BMI（身体质量指数）计算器。这个简单的网络应用程序可帮助用户根据身高和体重计算体重指数，提供一种评估其健康状况的直接方法。让我们深入了解该项目的细节以及它是如何构建的！

项目概况

BMI计算器是一个用户友好的工具，允许用户输入他们的身高（以厘米为单位）和体重（以公斤为单位）。只需单击按钮，应用程序即可计算 BMI 并显示相应的健康类别，例如体重不足、体重正常、超重或肥胖。

特征

用户输入：用户可以直接在输入字段中输入身高和体重。
BMI计算：应用程序使用标准公式计算BMI。
健康类别：根据计算出的BMI，应用程序提供相关的健康类别。
响应式设计：计算器设计为响应式，确保在不同设备上获得流畅的体验。

使用的技术

HTML：构建网页内容。
CSS：设置应用程序的样式，提供干净、现代的外观。
JavaScript：处理 BMI 计算并更新 DOM 以显示结果。

项目结构

以下是项目结构的快速概述：

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

代码说明

让我们仔细看看支持 BMI 计算器的代码。

超文本标记语言

HTML 提供了计算器的基本结构，包括身高和体重的输入字段、触发计算的按钮以及显示结果的部分。

<!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 对页面进行样式设计，使其具有视觉吸引力且易于使用。它采用现代、简洁的设计和响应式元素。

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 处理应用程序的核心功能 - 根据用户的输入计算 BMI 并使用结果更新网页。

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

现场演示

您可以在这里试用 BMI 计算器。

结论

构建这个 BMI 计算器是一次有益的经历，它增强了我在 HTML、CSS 和 JavaScript 方面的技能。该项目展示了如何将一个简单的想法转变为用户可以从中受益的实用工具。无论您是想构建类似的项目还是只是探索 Web 开发，我希望本教程对您的旅程有所帮助。快乐编码！

作者

阿布舍克·古贾尔
- GitHub 简介

以上是使用 HTML、CSS 和 JavaScript 构建 BMI 计算器的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html for try using dom this display input github idea

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Strategies for Keeping Your HTML Clean and Readable下一篇：HTML/CSS tips for beginners

查看更多