使用 React 构建 BMI 计算器

使用 React 构建 BMI 计算器

介绍

体重指数（BMI）是一种广泛使用的指标，用于确定一个人在给定身高下是否拥有健康体重。在本博客中，我们将逐步介绍如何使用 React 创建一个简单但实​​用的 BMI 计算器。这个项目允许用户输入他们的体重和身高来计算他们的BMI，并根据结果提供分类。

项目概况

BMI 计算器是一个使用 React 构建的响应式 Web 应用程序。它将用户的体重（以千克为单位）和身高（以厘米为单位）作为输入并计算 BMI。然后，应用程序会显示计算出的 BMI 以及相应的体重分类，例如体重不足、体重正常、超重或肥胖。

特征

• 用户友好的界面：简单干净的用户界面，易于导航。
• 实时计算：用户可以通过输入体重和身高立即计算出自己的BMI。
• 响应式设计：计算器响应灵敏，在不同的屏幕尺寸上运行良好。
• 体重分类：根据计算出的BMI，告知用户自己的体重状况。

使用的技术

• React： 用于构建用户界面的核心库。
• JavaScript： 用于处理 BMI 计算的逻辑。
• CSS： 设置应用程序样式并确保响应式设计。

项目结构

以下是该项目结构的简要概述：

src/
│
├── assets/
│   └── images/
│       └── BMI Logo.png
├── components/
│   └── BmiCalculator.jsx
├── App.jsx
├── App.css
└── index.css

代码说明

1.BMI计算器组件

该组件是应用程序的核心。它处理用户输入、执行 BMI 计算并显示结果。

import { useState } from "react";
import logoImg from "../assets/images/BMI Logo.png";

const BmiCalculator = () => {
  const [weight, setWeight] = useState("");
  const [height, setHeight] = useState("");
  const [bmi, setBMI] = useState("");
  const [result, setResult] = useState("");

  function calculateBMI(weight, height) {
    const heightM = height / 100;
    const bmiResult = weight / (heightM * heightM);
    setBMI(bmiResult.toFixed(2)); // Round to 2 decimal places
    if (bmiResult < 18.5) {
      setResult("Underweight");
    } else if (bmiResult < 24.9) {
      setResult("Normal weight");
    } else if (bmiResult < 29.9) {
      setResult("Overweight");
    } else {
      setResult("Obesity");
    }
  }

  const handleCalculateBMI = () => {
    if (weight && height) {
      calculateBMI(weight, height);
    }
  };

  return (
    <div className="bmi-container">
      <div className="logo">
        <img src={logoImg} alt="BMI Logo" />
      </div>
      <div className="input-box">
        <div className="weight-input">
          <h4>Weight (kg)</h4>
          <input
            type="number"
            value={weight}
            onChange={(e) => setWeight(e.target.value)}
          />
        </div>
        <div className="height-input">
          <h4>Height (cm)</h4>
          <input
            type="number"
            value={height}
            onChange={(e) => setHeight(e.target.value)}
          />
        </div>
      </div>
      <button onClick={handleCalculateBMI} className="btn">
        <h2>Calculate BMI</h2>
      </button>
      <div className="output-box">
        <p>Your BMI : <b>{bmi}</b></p>
        <p>Result : <b>{result}</b></p>
      </div>
    </div>
  );
};

export default BmiCalculator;

2. 应用程序组件

App 组件作为主容器，包装 BmiCalculator 组件并添加页眉和页脚。

import BmiCalculator from "./components/BmiCalculator";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>BMI Calculator</h1>
      </div>
      <BmiCalculator />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default App;

3. 设置应用程序样式 (App.css)

CSS 确保应用程序具有视觉吸引力和响应能力。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #008f7d;
  color: white;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.header {
  text-align: center;
  font-size: 18px;
}

.bmi-container {
  margin: 40px;
  width: 500px;
  height: 430px;
  background-color: white;
  color: black;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.logo img {
  width: 50px;
  height: 50px;
  margin: 15px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-box h4 {
  color: gray;
}

.weight-input,
.height-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.weight-input input,
.height-input input {
  height: 27px;
  width: 180px;
  font-weight: 400;
  font-size: 14px;
  border-radius: 7px;
}

.btn {
  margin: 15px;
  width: 65%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #087fff;
  color: white;
  border: 0.5px solid black;
  border-radius: 7px;
}

.btn:hover {
  background-color: #2570c1;
}

.output-box {
  margin-top: 20px;
  width: 65%;
  height: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: #e2e2e2;
  color: black;
  border-radius: 7px;
  border: 1px solid black;
}

.output-box p {
  margin-left: 20px;
  line-height: 0;
}

.footer {
  text-align: center;
  font-size: 14px;
}

安装与使用

要在本地计算机上运行 BMI 计算器，请按照以下步骤操作：

1. 克隆存储库：

   git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git

1. 安装依赖项： 导航到项目目录并运行：

   npm install

1. 启动应用程序： 通过运行以下命令启动应用程序：

   npm start

应用程序应在默认 Web 浏览器中打开，地址为 http://localhost:3000。

现场演示

在此处查看 BMI 计算器的现场演示。

结论

在这个项目中，我们使用 React 构建了一个简单而有效的 BMI 计算器。该项目演示了如何使用 React 状态管理、条件渲染和基本样式来创建用户友好的界面。无论您是刚刚开始使用 React 还是想练习自己的技能，这个项目都是获得实践经验的好方法。

制作人员

• 标志：本项目使用的BMI标志来自Unsplash。
• 灵感：该项目的灵感来自于在线提供的各种 BMI 计算器。

作者

Abhishek Gurjar 是一位充满热情的 Web 开发人员，专注于构建直观且响应灵敏的 Web 应用程序。跟随他的旅程并在 GitHub 上探索更多项目。

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