Construindo uma calculadora de IMC com React

Introdução

Índice de Massa Corporal (IMC) é uma métrica amplamente usada para determinar se uma pessoa tem um peso corporal saudável para uma determinada altura. Neste blog, veremos a criação de uma calculadora de IMC simples, mas funcional, usando React. Este projeto permite que o usuário insira seu peso e altura para calcular seu IMC e fornece uma classificação com base no resultado.

Visão geral do projeto

A Calculadora de IMC é um aplicativo da web responsivo desenvolvido com React. Ele toma como entradas o peso (em quilogramas) e a altura (em centímetros) do usuário e calcula o IMC. O aplicativo então exibe o IMC calculado junto com uma classificação de peso correspondente, como Baixo Peso, Peso Normal, Sobrepeso ou Obesidade.

Características

• Interface amigável: Uma interface de usuário simples e limpa, fácil de navegar.
• Cálculo em tempo real: Os usuários podem calcular seu IMC instantaneamente inserindo seu peso e altura.
• Design responsivo: A calculadora é responsiva e funciona bem em diferentes tamanhos de tela.
• Classificação de peso: Com base no IMC calculado, os usuários são informados sobre seu status de peso.

Tecnologias Utilizadas

• React: A biblioteca principal para construir a interface do usuário.
• JavaScript: Para lidar com a lógica do cálculo do IMC.
• CSS: Para estilizar o aplicativo e garantir um design responsivo.

Estrutura do Projeto

Aqui está uma breve visão geral da estrutura do projeto:

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

Explicação do código

1. Componente BmiCalculator

Este componente é o coração do aplicativo. Ele lida com as entradas do usuário, realiza o cálculo do IMC e exibe o resultado.

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. Componente do aplicativo

O componente App serve como contêiner principal, envolvendo o componente BmiCalculator e adicionando um cabeçalho e rodapé.

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

const App = () => {
  return (
    

      

        
BMI Calculator
      
      

        
Made with ❤️ by Abhishek Gurjar
      
    
  );
};

export default App;

3. Estilizando o aplicativo (App.css)

O CSS garante que o aplicativo seja visualmente atraente e responsivo.

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

Instalação e uso

Para executar a Calculadora de IMC em sua máquina local, siga estas etapas:

1. Clone o repositório:

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

1. Instalar dependências: Navegue até o diretório do projeto e execute:

   npm install

1. Iniciar o aplicativo: Inicie o aplicativo executando:

   npm start

O aplicativo deve abrir em seu navegador padrão em http://localhost:3000.

Demonstração ao vivo

Confira a demonstração ao vivo da Calculadora de IMC aqui.

Conclusão

Neste projeto, construímos uma calculadora de IMC simples, mas eficaz, usando React. Este projeto demonstra o uso do gerenciamento de estado React, renderização condicional e estilo básico para criar uma interface amigável. Esteja você apenas começando com React ou procurando praticar suas habilidades, este projeto é uma ótima maneira de obter experiência prática.

Créditos

• Logo: O logotipo da BMI usado neste projeto é proveniente do Unsplash.
• Inspiração: Este projeto foi inspirado em várias calculadoras de IMC disponíveis online.

Autor

Abhishek Gurjar é um desenvolvedor web apaixonado com foco na construção de aplicativos web intuitivos e responsivos. Acompanhe sua jornada e explore mais projetos no GitHub.