Construire un calculateur d'IMC avec React

Créer un calculateur d'IMC avec React

Introduction

L'indice de masse corporelle (IMC) est une mesure largement utilisée pour déterminer si une personne a un poids santé pour une taille donnée. Dans ce blog, nous expliquerons la création d'un calculateur d'IMC simple mais fonctionnel à l'aide de React. Ce projet permet aux utilisateurs de saisir leur poids et leur taille pour calculer leur IMC et fournit une classification basée sur le résultat.

Aperçu du projet

Le calculateur d'IMC est une application Web réactive construite avec React. Il prend le poids (en kilogrammes) et la taille (en centimètres) de l'utilisateur comme entrées et calcule l'IMC. L'application affiche ensuite l'IMC calculé ainsi qu'une classification de poids correspondante telle que insuffisance pondérale, poids normal, surpoids ou obésité.

Caractéristiques

• Interface conviviale : Une interface utilisateur simple et claire, facile à naviguer.
• Calcul en temps réel : Les utilisateurs peuvent calculer leur IMC instantanément en saisissant leur poids et leur taille.
• Conception réactive : La calculatrice est réactive et fonctionne bien sur différentes tailles d'écran.
• Classification du poids : Sur la base de l'IMC calculé, les utilisateurs sont informés de leur statut pondéral.

Technologies utilisées

• React : La bibliothèque principale pour créer l'interface utilisateur.
• JavaScript : Pour gérer la logique du calcul de l'IMC.
• CSS : Pour styliser l'application et assurer un design réactif.

Structure du projet

Voici un bref aperçu de la structure du projet :

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

Explication du code

1. Composant BmiCalculator

Ce composant est le cœur de l'application. Il gère les entrées de l'utilisateur, effectue le calcul de l'IMC et affiche le résultat.

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. Composant d'application

Le composant App sert de conteneur principal, encapsulant le composant BmiCalculator et en ajoutant un en-tête et un pied de page.

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. Styliser l'application (App.css)

Le CSS garantit que l'application est visuellement attrayante et réactive.

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

Installation et utilisation

Pour exécuter le calculateur d'IMC sur votre ordinateur local, suivez ces étapes :

1. Cloner le référentiel :

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

1. Installer les dépendances : Accédez au répertoire du projet et exécutez :

   npm install

1. Démarrez l'application : Lancez l'application en exécutant :

   npm start

L'application devrait s'ouvrir dans votre navigateur Web par défaut à l'adresse http://localhost:3000.

Démo en direct

Découvrez la démo en direct du calculateur d'IMC ici.

Conclusion

Dans ce projet, nous avons construit un calculateur d'IMC simple mais efficace à l'aide de React. Ce projet démontre l'utilisation de la gestion de l'état React, du rendu conditionnel et du style de base pour créer une interface conviviale. Que vous débutiez avec React ou que vous cherchiez à mettre en pratique vos compétences, ce projet est un excellent moyen d'acquérir une expérience pratique.

Crédits

• Logo : Le logo BMI utilisé dans ce projet provient d'Unsplash.
• Inspiration : Ce projet a été inspiré par divers calculateurs d'IMC disponibles en ligne.

Auteur

Abhishek Gurjar est un développeur Web passionné qui se concentre sur la création d'applications Web intuitives et réactives. Suivez son parcours et explorez d'autres projets sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!