使用 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中文網其他相關文章！