使用 React 构建 BMI 计算器
体重指数(BMI)是一种广泛使用的指标,用于确定一个人在给定身高下是否拥有健康体重。在本博客中,我们将逐步介绍如何使用 React 创建一个简单但实用的 BMI 计算器。这个项目允许用户输入他们的体重和身高来计算他们的BMI,并根据结果提供分类。
BMI 计算器是一个使用 React 构建的响应式 Web 应用程序。它将用户的体重(以千克为单位)和身高(以厘米为单位)作为输入并计算 BMI。然后,应用程序会显示计算出的 BMI 以及相应的体重分类,例如体重不足、体重正常、超重或肥胖。
以下是该项目结构的简要概述:
src/ │ ├── assets/ │ └── images/ │ └── BMI Logo.png ├── components/ │ └── BmiCalculator.jsx ├── App.jsx ├── App.css └── index.css
该组件是应用程序的核心。它处理用户输入、执行 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;
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;
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 计算器,请按照以下步骤操作:
git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git
npm install
npm start
应用程序应在默认 Web 浏览器中打开,地址为 http://localhost:3000。
在此处查看 BMI 计算器的现场演示。
在这个项目中,我们使用 React 构建了一个简单而有效的 BMI 计算器。该项目演示了如何使用 React 状态管理、条件渲染和基本样式来创建用户友好的界面。无论您是刚刚开始使用 React 还是想练习自己的技能,这个项目都是获得实践经验的好方法。
Abhishek Gurjar 是一位充满热情的 Web 开发人员,专注于构建直观且响应灵敏的 Web 应用程序。跟随他的旅程并在 GitHub 上探索更多项目。
以上是使用 React 构建 BMI 计算器的详细内容。更多信息请关注PHP中文网其他相关文章!