Creación de una calculadora de IMC con React

Introducción

El índice de masa corporal (IMC) es una métrica ampliamente utilizada para determinar si una persona tiene un peso corporal saludable para una altura determinada. En este blog, veremos la creación de una calculadora de IMC simple pero funcional usando React. Este proyecto permite a los usuarios ingresar su peso y altura para calcular su IMC y proporciona una clasificación basada en el resultado.

Descripción general del proyecto

La Calculadora de IMC es una aplicación web responsiva creada con React. Toma el peso del usuario (en kilogramos) y la altura (en centímetros) como entradas y calcula el IMC. Luego, la aplicación muestra el IMC calculado junto con la clasificación de peso correspondiente, como bajo peso, peso normal, sobrepeso u obesidad.

Características

• Interfaz fácil de usar: Una interfaz de usuario simple y limpia que es fácil de navegar.
• Cálculo en tiempo real: Los usuarios pueden calcular su IMC al instante ingresando su peso y altura.
• Diseño responsivo: La calculadora responde y funciona bien en diferentes tamaños de pantalla.
• Clasificación de peso: Según el IMC calculado, se informa a los usuarios sobre su estado de peso.

Tecnologías utilizadas

• React: La biblioteca principal para crear la interfaz de usuario.
• JavaScript: Para manejar la lógica del cálculo del IMC.
• CSS: Para diseñar la aplicación y garantizar un diseño responsivo.

Estructura del proyecto

Aquí hay una breve descripción general de la estructura del proyecto:

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

Explicación del código

1. Componente BmiCalculator

Este componente es el corazón de la aplicación. Maneja las entradas del usuario, realiza el cálculo del IMC y muestra el 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 de la aplicación

El componente App sirve como contenedor principal, envolviendo el componente BmiCalculator y agregando un encabezado y pie de página.

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

const App = () => {
  return (
    

      

        
BMI Calculator
      
      

        
Made with ❤️ by Abhishek Gurjar
      
    
  );
};

export default App;

3. Diseñar la aplicación (App.css)

El CSS garantiza que la aplicación sea visualmente atractiva y responsiva.

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

Instalación y uso

Para ejecutar la Calculadora de IMC en su máquina local, siga estos pasos:

1. Clonar el repositorio:

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

1. Instalar dependencias: Navegue al directorio del proyecto y ejecute:

   npm install

1. Iniciar la aplicación: Inicie la aplicación ejecutando:

   npm start

La aplicación debería abrirse en su navegador web predeterminado en http://localhost:3000.

Demostración en vivo

Vea la demostración en vivo de la Calculadora de IMC aquí.

Conclusión

En este proyecto, creamos una calculadora de IMC simple pero efectiva usando React. Este proyecto demuestra el uso de la gestión de estado de React, la representación condicional y el estilo básico para crear una interfaz fácil de usar. Ya sea que recién estés comenzando con React o quieras practicar tus habilidades, este proyecto es una excelente manera de adquirir experiencia práctica.

Créditos

• Logotipo: El logotipo de BMI utilizado en este proyecto proviene de Unsplash.
• Inspiración: Este proyecto se inspiró en varias calculadoras de IMC disponibles en línea.

Autor

Abhishek Gurjar es un desarrollador web apasionado que se centra en la creación de aplicaciones web intuitivas y responsivas. Sigue su viaje y explora más proyectos en GitHub.