Maison > Article > interface Web > Construire un calculateur d'IMC avec React
Créer un calculateur d'IMC avec React
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.
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é.
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
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;
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;
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; }
Pour exécuter le calculateur d'IMC sur votre ordinateur local, suivez ces étapes :
git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git
npm install
npm start
L'application devrait s'ouvrir dans votre navigateur Web par défaut à l'adresse http://localhost:3000.
Découvrez la démo en direct du calculateur d'IMC ici.
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.
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!