Heim > Artikel > Web-Frontend > Erstellen eines BMI-Rechners mit HTML, CSS und JavaScript

Erstellen eines BMI-Rechners mit HTML, CSS und JavaScript

王林Original: 2024-08-09 05:28:52325Durchsuche

Building a BMI Calculator with HTML, CSS, and JavaScript

Hallo, liebe Entwickler! Heute freue ich mich, Ihnen ein Projekt vorzustellen, an dem ich kürzlich gearbeitet habe: einen BMI-Rechner (Body Mass Index). Diese einfache Webanwendung hilft Benutzern bei der Berechnung ihres BMI basierend auf ihrer Größe und ihrem Gewicht und bietet eine einfache Möglichkeit, ihren Gesundheitszustand zu beurteilen. Lassen Sie uns in die Details des Projekts und seiner Entstehung eintauchen!

Projektübersicht

Der BMI-Rechner ist ein benutzerfreundliches Tool, mit dem Benutzer ihre Größe (in Zentimetern) und ihr Gewicht (in Kilogramm) eingeben können. Mit nur einem Klick berechnet die Anwendung den BMI und zeigt die entsprechende Gesundheitskategorie an, z. B. Untergewicht, Normalgewicht, Übergewicht oder Fettleibigkeit.

Merkmale

Benutzereingabe: Benutzer können ihre Größe und ihr Gewicht direkt in die Eingabefelder eingeben.
BMI-Berechnung: Die Anwendung berechnet den BMI anhand der Standardformel.
Gesundheitskategorie: Basierend auf dem berechneten BMI stellt die App eine relevante Gesundheitskategorie bereit.
Responsives Design: Der Rechner ist reaktionsfähig gestaltet und sorgt so für ein reibungsloses Erlebnis auf verschiedenen Geräten.

Verwendete Technologien

HTML: Strukturiert den Inhalt der Webseite.
CSS: Gestaltet die Anwendung und sorgt für ein klares und modernes Aussehen.
JavaScript: Verarbeitet die BMI-Berechnung und aktualisiert das DOM, um Ergebnisse anzuzeigen.

Projektstruktur

Hier ein kurzer Überblick über die Projektstruktur:

BMI-Calculator/
├── index.html
├── style.css
└── script.js

Code-Erklärung

Werfen wir einen genaueren Blick auf den Code, der den BMI-Rechner antreibt.

HTML

Der HTML-Code stellt die Grundstruktur des Rechners bereit, einschließlich Eingabefeldern für Größe und Gewicht, einer Schaltfläche zum Auslösen der Berechnung und einem Abschnitt zur Anzeige des Ergebnisses.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
<body>
    <div class="header">
        <h1>BMI Calculator</h1>
    </div>
    <div class="container">
        <h1 class="heading">Body Mass Index (BMI)</h1>
        Your Height (cm):
        <input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
        Your Weight (kg):
        <input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
        <button class="btn" id="btn">Compute BMI</button>
        <input disabled type="text" class="input" id="bmi-result">
        <h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
    </div>
    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>
</html>

CSS

Das CSS gestaltet die Seite so, dass sie optisch ansprechend und benutzerfreundlich ist. Es verfügt über ein modernes, klares Design mit responsiven Elementen.

body {
    margin: 0;
    background: linear-gradient(to left bottom, lightgreen, lightblue);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.container {
    background: rgba(255, 255, 255, 0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    margin: 5px;
}

.heading {
    font-size: 30px;
}

.input {
    padding: 10px 20px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    margin: 10px;
}

.btn {
    background-color: lightgreen;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.btn:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    transition: all 300ms ease;
}

.info-text {
    font-size: 20px;
    font-weight: 500;
}

.header {
    margin: 30px;
    text-align: center;
}

.footer {
    margin: 20px;
    text-align: center;
}

JavaScript

Das JavaScript übernimmt die Kernfunktionalität der Anwendung – die Berechnung des BMI basierend auf den Eingaben des Benutzers und die Aktualisierung der Webseite mit den Ergebnissen.

const btnE1 = document.getElementById("btn");
const resultE1 = document.getElementById("bmi-result");
const weightConditionE1 = document.getElementById("weight-condition");
const heightE1 = document.getElementById("height");
const weightE1 = document.getElementById("weight");

function calculateBMI() {
    const height = heightE1.value / 100;
    const weight = weightE1.value;
    const bmiValue = weight / (height * height);

    resultE1.value = bmiValue.toFixed(2);

    if (bmiValue < 18.5) {
        weightConditionE1.innerText = "Under Weight";
    } else if (bmiValue >= 18.5 && bmiValue <= 24.9) {
        weightConditionE1.innerText = "Normal Weight";
    } else if (bmiValue >= 25 && bmiValue <= 29.9) {
        weightConditionE1.innerText = "Over Weight";
    } else if (bmiValue > 30) {
        weightConditionE1.innerText = "Obesity";
    }
}

btnE1.addEventListener("click", calculateBMI);

Live-Demo

Hier können Sie den BMI-Rechner live ausprobieren.

Abschluss

Die Erstellung dieses BMI-Rechners war eine lohnende Erfahrung, die meine Fähigkeiten in HTML, CSS und JavaScript verbessert hat. Das Projekt zeigt, wie aus einer einfachen Idee ein praktisches Werkzeug werden kann, von dem Benutzer profitieren können. Egal, ob Sie ein ähnliches Projekt erstellen oder sich einfach nur mit der Webentwicklung befassen möchten, ich hoffe, dieses Tutorial hilft Ihnen auf Ihrem Weg. Viel Spaß beim Codieren!

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen eines BMI-Rechners mit HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html for try using dom this display input github idea

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Strategien, um Ihr HTML sauber und lesbar zu haltenNächster Artikel：Strategien, um Ihr HTML sauber und lesbar zu halten

In Verbindung stehende Artikel

Mehr sehen