使用 React 构建 BMI 计算器

php中文网 2024-10-15 11:57:39

使用 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 = () =&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 还是想练习自己的技能，这个项目都是获得实践经验的好方法。

制作人员

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

作者

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

以上就是使用 React 构建 BMI 计算器的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/jishu/11614.html