Создание калькулятора ИМТ с помощью React

Введение

Индекс массы тела (ИМТ) — это широко используемый показатель, позволяющий определить, имеет ли человек здоровую массу тела для данного роста. В этом блоге мы рассмотрим создание простого, но функционального калькулятора ИМТ с использованием React. Этот проект позволяет пользователям вводить свой вес и рост для расчета ИМТ и обеспечивает классификацию на основе результата.

Обзор проекта

Калькулятор ИМТ — это адаптивное веб-приложение, созданное с помощью React. Он принимает вес пользователя (в килограммах) и рост (в сантиметрах) в качестве входных данных и рассчитывает ИМТ. Затем приложение отображает рассчитанный ИМТ вместе с соответствующей классификацией веса, например «недостаточный вес», «нормальный вес», «избыточный вес» или «ожирение».

Функции

• Удобный интерфейс: Простой и понятный пользовательский интерфейс, в котором легко ориентироваться.
• Расчет в реальном времени: Пользователи могут мгновенно рассчитать свой ИМТ, введя свой вес и рост.
• Адаптивный дизайн: Калькулятор адаптивный и хорошо работает на экранах разных размеров.
• Классификация по весу: На основе рассчитанного ИМТ пользователи информируются об их весовом статусе.

Используемые технологии

• React: Основная библиотека для создания пользовательского интерфейса.
• JavaScript: Для обработки логики расчета ИМТ.
• CSS: Для стилизации приложения и обеспечения адаптивного дизайна.

Структура проекта

Краткий обзор структуры проекта:

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

Объяснение кода

1. Компонент BmiCalculator

Этот компонент является сердцем приложения. Он обрабатывает вводимые пользователем данные, выполняет расчет ИМТ и отображает результат.

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  {
    if (weight && height) {
      calculateBMI(weight, height);
    }
  };

  return (
    

      

        
      

        

          
Weight (kg)
           setWeight(e.target.value)}
          />
        
        

          
Height (cm)
           setHeight(e.target.value)}
          />
        
      
      
        
Calculate BMI
      
      

        
Your BMI : {bmi}
        
Result : {result}
      
    
  );
};

export default BmiCalculator;

2. Компонент приложения

Компонент App служит основным контейнером, обертывающим компонент BmiCalculator и добавляющим верхний и нижний колонтитулы.

import BmiCalculator from "./components/BmiCalculator";
import "./App.css";

const App = () => {
  return (
    

      

        
BMI Calculator
      
      

        
Made with ❤️ by Abhishek Gurjar
      
    
  );
};

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

Установка и использование

Чтобы запустить калькулятор ИМТ на локальном компьютере, выполните следующие действия:

1. Клонировать репозиторий:

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

1. Установить зависимости: Перейдите в каталог проекта и запустите:

   npm install

1. Запустите приложение: Запустите приложение, выполнив:

   npm start

Приложение должно открыться в веб-браузере по умолчанию по адресу http://localhost:3000.

Живая демонстрация

Ознакомьтесь с демо-версией калькулятора ИМТ здесь.

Заключение

В этом проекте мы создали простой, но эффективный калькулятор ИМТ с использованием React. Этот проект демонстрирует использование управления состоянием React, условного рендеринга и базового стиля для создания удобного интерфейса. Независимо от того, начинаете ли вы работать с React или хотите попрактиковаться в своих навыках, этот проект — отличный способ получить практический опыт.

Кредиты

• Логотип: Логотип BMI, используемый в этом проекте, взят из Unsplash.
• Вдохновение: Этот проект был вдохновлен различными калькуляторами ИМТ, доступными в Интернете.

Автор

Абхишек Гурджар — страстный веб-разработчик, специализирующийся на создании интуитивно понятных и адаптивных веб-приложений. Следите за его путешествием и изучайте другие проекты на GitHub.