使用 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 {
if (weight && height) {
calculatebmi(weight, height);
}
};
return (
<div classname="bmi-container">
<div classname="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></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 计算器,请按照以下步骤操作:
- 克隆存储库:
git clone https://github.com/abhishekgurjar-in/bmi-calculator-react.git
- 安装依赖项: 导航到项目目录并运行:
npm install
- 启动应用程序: 通过运行以下命令启动应用程序:
npm start
应用程序应在默认 web 浏览器中打开,地址为 http://localhost:3000。
现场演示
在此处查看 bmi 计算器的现场演示。
结论
在这个项目中,我们使用 react 构建了一个简单而有效的 bmi 计算器。该项目演示了如何使用 react 状态管理、条件渲染和基本样式来创建用户友好的界面。无论您是刚刚开始使用 react 还是想练习自己的技能,这个项目都是获得实践经验的好方法。
制作人员
- 标志:本项目使用的bmi标志来自unsplash。
- 灵感:该项目的灵感来自于在线提供的各种 bmi 计算器。
作者
abhishek gurjar 是一位充满热情的 web 开发人员,专注于构建直观且响应灵敏的 web 应用程序。跟随他的旅程并在 github 上探索更多项目。