React로 BMI 계산기 만들기-JS 튜토리얼-php.cn

React로 BMI 계산기 만들기

PHPz

풀어 주다： 2024-09-03 22:39:32

원래의

329명이 탐색했습니다.

Building a BMI Calculator with React

React로 BMI 계산기 만들기

소개

체질량지수(BMI)는 개인이 특정 키에 비해 건강한 체중을 가지고 있는지 판단하는 데 널리 사용되는 측정 기준입니다. 이 블로그에서는 React를 사용하여 간단하면서도 기능적인 BMI 계산기를 만드는 방법을 살펴보겠습니다. 이 프로젝트에서는 사용자가 자신의 체중과 키를 입력하여 BMI를 계산하고 그 결과에 따라 분류를 제공합니다.

프로젝트 개요

BMI 계산기는 React로 구축된 반응형 웹 애플리케이션입니다. 사용자의 체중(킬로그램)과 키(센티미터)를 입력으로 받아 BMI를 계산합니다. 그런 다음 앱은 저체중, 정상 체중, 과체중 또는 비만과 같은 해당 체중 분류와 함께 계산된 BMI를 표시합니다.

특징

사용자 친화적인 인터페이스: 탐색하기 쉬운 간단하고 깔끔한 UI.
실시간 계산: 사용자는 체중과 키를 입력하여 즉시 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 계산기를 실행하려면 다음 단계를 따르세요.

저장소 복제:

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

로그인 후 복사

설치 종속성: 프로젝트 디렉터리로 이동하여 다음을 실행합니다.

   npm install

로그인 후 복사

신청 시작: 다음을 실행하여 앱을 실행합니다.

   npm start

로그인 후 복사

애플리케이션은 기본 웹 브라우저 http://localhost:3000에서 열려야 합니다.

라이브 데모

여기에서 BMI 계산기의 라이브 데모를 확인하세요.

결론

이 프로젝트에서는 React를 사용하여 간단하면서도 효과적인 BMI 계산기를 구축했습니다. 이 프로젝트는 사용자 친화적인 인터페이스를 만들기 위해 React 상태 관리, 조건부 렌더링 및 기본 스타일을 사용하는 방법을 보여줍니다. 방금 React를 시작했거나 기술을 연습하고 싶은 경우 이 프로젝트는 실습 경험을 얻을 수 있는 좋은 방법입니다.