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