Erstellen eines BMI-Rechners mit React

Einführung

Der Body-Mass-Index (BMI) ist eine weit verbreitete Messgröße, um zu bestimmen, ob eine Person bei einer bestimmten Körpergröße ein gesundes Körpergewicht hat. In diesem Blog gehen wir durch die Erstellung eines einfachen, aber funktionalen BMI-Rechners mit React. Dieses Projekt ermöglicht es Benutzern, ihr Gewicht und ihre Größe einzugeben, um ihren BMI zu berechnen, und stellt eine Klassifizierung basierend auf dem Ergebnis bereit.

Projektübersicht

Der BMI-Rechner ist eine responsive Webanwendung, die mit React erstellt wurde. Es verwendet das Gewicht (in Kilogramm) und die Körpergröße (in Zentimeter) des Benutzers als Eingaben und berechnet den BMI. Die App zeigt dann den berechneten BMI zusammen mit einer entsprechenden Gewichtsklassifizierung wie Untergewicht, Normalgewicht, Übergewicht oder Fettleibigkeit an.

Merkmale

• Benutzerfreundliche Oberfläche: Eine einfache und übersichtliche Benutzeroberfläche, die leicht zu navigieren ist.
• Echtzeitberechnung: Benutzer können ihren BMI sofort berechnen, indem sie ihr Gewicht und ihre Größe eingeben.
• Responsives Design: Der Rechner reagiert und funktioniert gut auf verschiedenen Bildschirmgrößen.
• Gewichtsklassifizierung: Basierend auf dem berechneten BMI werden Benutzer über ihren Gewichtsstatus informiert.

Verwendete Technologien

• Reagieren: Die Kernbibliothek zum Erstellen der Benutzeroberfläche.
• JavaScript: Zur Handhabung der Logik der BMI-Berechnung.
• CSS: Um die Anwendung zu gestalten und ein responsives Design sicherzustellen.

Projektstruktur

Hier ein kurzer Überblick über die Struktur des Projekts:

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

Code-Erklärung

1. BmiCalculator-Komponente

Diese Komponente ist das Herzstück der Anwendung. Es verarbeitet Benutzereingaben, führt die BMI-Berechnung durch und zeigt das Ergebnis an.

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-Komponente

Die App-Komponente dient als Hauptcontainer, umschließt die BmiCalculator-Komponente und fügt eine Kopf- und Fußzeile hinzu.

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

const App = () => {
  return (
    

      

        
BMI Calculator
      
      

        
Made with ❤️ by Abhishek Gurjar
      
    
  );
};

export default App;

3. Gestaltung der App (App.css)

Das CSS stellt sicher, dass die App optisch ansprechend und reaktionsfähig ist.

* {
  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 und Nutzung

Um den BMI-Rechner auf Ihrem lokalen Computer auszuführen, befolgen Sie diese Schritte:

1. Das Repository klonen:

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

1. Abhängigkeiten installieren: Navigieren Sie zum Projektverzeichnis und führen Sie Folgendes aus:

   npm install

1. Anwendung starten: Starten Sie die App, indem Sie Folgendes ausführen:

   npm start

Die Anwendung sollte in Ihrem Standard-Webbrowser unter http://localhost:3000 geöffnet werden.

Live-Demo

Sehen Sie sich hier die Live-Demo des BMI-Rechners an.

Abschluss

In diesem Projekt haben wir mit React einen einfachen, aber effektiven BMI-Rechner erstellt. Dieses Projekt demonstriert die Verwendung von React-Statusverwaltung, bedingtem Rendering und grundlegendem Stil, um eine benutzerfreundliche Oberfläche zu erstellen. Egal, ob Sie gerade erst mit React beginnen oder Ihre Fähigkeiten üben möchten, dieses Projekt ist eine großartige Möglichkeit, praktische Erfahrungen zu sammeln.

Credits

• Logo: Das in diesem Projekt verwendete BMI-Logo stammt von Unsplash.
• Inspiration: Dieses Projekt wurde von verschiedenen online verfügbaren BMI-Rechnern inspiriert.

Autor

Abhishek Gurjar ist ein leidenschaftlicher Webentwickler mit Schwerpunkt auf der Entwicklung intuitiver und reaktionsfähiger Webanwendungen. Verfolgen Sie seine Reise und entdecken Sie weitere Projekte auf GitHub.