Membina Kalkulator BMI dengan React

Membina Kalkulator BMI dengan React

pengenalan

Indeks Jisim Badan (BMI) ialah metrik yang digunakan secara meluas untuk menentukan sama ada seseorang itu mempunyai berat badan yang sihat untuk ketinggian tertentu. Dalam blog ini, kami akan menelusuri penciptaan Kalkulator BMI yang mudah tetapi berfungsi menggunakan React. Projek ini membolehkan pengguna memasukkan berat dan tinggi mereka untuk mengira BMI mereka dan menyediakan klasifikasi berdasarkan hasilnya.

Gambaran Keseluruhan Projek

Kalkulator BMI ialah aplikasi web responsif yang dibina dengan React. Ia mengambil berat pengguna (dalam kilogram) dan tinggi (dalam sentimeter) sebagai input dan mengira BMI. Apl itu kemudian memaparkan BMI yang dikira bersama-sama dengan klasifikasi berat yang sepadan seperti Kurang Berat Badan, Berat Normal, Berat berlebihan atau Obesiti.

Ciri-ciri

• Antara Muka Mesra Pengguna: UI yang ringkas dan bersih yang mudah dinavigasi.
• Pengiraan Masa Nyata: Pengguna boleh mengira BMI mereka serta-merta dengan memasukkan berat dan ketinggian mereka.
• Reka Bentuk Responsif: Kalkulator responsif dan berfungsi dengan baik pada saiz skrin yang berbeza.
• Klasifikasi Berat: Berdasarkan BMI yang dikira, pengguna dimaklumkan tentang status berat badan mereka.

Teknologi yang Digunakan

• Reaksi: Pustaka teras untuk membina antara muka pengguna.
• JavaScript: Untuk mengendalikan logik pengiraan BMI.
• CSS: Untuk menggayakan aplikasi dan memastikan reka bentuk responsif.

Struktur Projek

Berikut ialah gambaran keseluruhan ringkas struktur projek:

src/
│
├── assets/
│   └── images/
│       └── BMI Logo.png
├── components/
│   └── BmiCalculator.jsx
├── App.jsx
├── App.css
└── index.css

Penerangan Kod

1. Komponen BmiCalculator

Komponen ini adalah nadi aplikasi. Ia mengendalikan input pengguna, melakukan pengiraan BMI dan memaparkan hasilnya.

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. Komponen Apl

Komponen Apl berfungsi sebagai bekas utama, membalut komponen BmiCalculator dan menambah pengepala dan pengaki.

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. Menggayakan Apl (App.css)

CSS memastikan apl itu menarik secara visual dan responsif.

* {
  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;
}

Pemasangan dan Penggunaan

Untuk menjalankan Kalkulator BMI pada mesin tempatan anda, ikut langkah berikut:

1. Klon Repositori:

   git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git

1. Pasang Ketergantungan: Navigasi ke direktori projek dan jalankan:

   npm install

1. Mulakan Permohonan: Lancarkan apl dengan menjalankan:

   npm start

Aplikasi harus dibuka dalam pelayar web lalai anda di http://localhost:3000.

Demo Langsung

Lihat demo langsung Kalkulator BMI di sini.

Kesimpulan

Dalam projek ini, kami membina Kalkulator BMI yang ringkas tetapi berkesan menggunakan React. Projek ini menunjukkan penggunaan pengurusan keadaan React, pemaparan bersyarat dan penggayaan asas untuk mencipta antara muka yang mesra pengguna. Sama ada anda baru bermula dengan React atau ingin melatih kemahiran anda, projek ini ialah cara yang bagus untuk mendapatkan pengalaman langsung.

Kredit

• Logo: Logo BMI yang digunakan dalam projek ini diperoleh daripada Unsplash.
• Inspirasi: Projek ini diilhamkan oleh pelbagai kalkulator BMI yang tersedia dalam talian.

Pengarang

Abhishek Gurjar ialah pembangun web yang bersemangat dengan tumpuan untuk membina aplikasi web yang intuitif dan responsif. Ikuti perjalanannya dan teroka lebih banyak projek di GitHub.

Atas ialah kandungan terperinci Membina Kalkulator BMI dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!