使用 React 构建 BMI 计算器

百变鹏仔 4周前 (09-19) #CSS

文章标签计算器

使用 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

代码说明

1.bmi计算器组件

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

import { usestate } from "react";import logoimg from "../assets/images/bmi logo.png";const bmicalculator = () =&gt; {  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 &amp;&amp; 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)}          /&gt;        </div>        <div classname="height-input">          <h4>height (cm)</h4>          <input type="number" value="{height}" onchange="{(e)"> setheight(e.target.value)}          /&gt;        </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 = () =&gt; {  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 还是想练习自己的技能，这个项目都是获得实践经验的好方法。

制作人员

作者

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

文章推荐

使用 React 构建 BMI 计算器

介绍

项目概况

特征

使用的技术

项目结构

代码说明

1.bmi计算器组件

2. 应用程序组件

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

安装与使用

现场演示

结论

制作人员

作者

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写