Créer un calculateur d'IMC avec HTML, CSS et JavaScript-tutoriel CSS-php.cn

Créer un calculateur d'IMC avec HTML, CSS et JavaScript

王林

Libérer： 2024-08-09 05:28:52

original

323 Les gens l'ont consulté

Building a BMI Calculator with HTML, CSS, and JavaScript

Bonjour, amis développeurs ! Aujourd'hui, je suis ravi de partager un projet sur lequel j'ai récemment travaillé : un calculateur d'IMC (indice de masse corporelle). Cette application Web simple aide les utilisateurs à calculer leur IMC en fonction de leur taille et de leur poids, offrant ainsi un moyen simple d'évaluer leur état de santé. Plongeons dans les détails du projet et comment il a été construit !

Aperçu du projet

Le calculateur d'IMC est un outil convivial qui permet aux utilisateurs de saisir leur taille (en centimètres) et leur poids (en kilogrammes). D'un simple clic sur un bouton, l'application calcule l'IMC et affiche la catégorie de santé correspondante, telle que l'insuffisance pondérale, le poids normal, le surpoids ou l'obésité.

Caractéristiques

Saisie utilisateur : les utilisateurs peuvent saisir leur taille et leur poids directement dans les champs de saisie.
Calcul de l'IMC : L'application calcule l'IMC à l'aide de la formule standard.
Catégorie de santé : sur la base de l'IMC calculé, l'application fournit une catégorie de santé pertinente.
Conception réactive : la calculatrice est conçue pour être réactive, garantissant une expérience fluide sur différents appareils.

Technologies utilisées

HTML : Structure le contenu de la page Web.
CSS : stylise l'application, offrant un aspect épuré et moderne.
JavaScript : Gère le calcul de l'IMC et met à jour le DOM pour afficher les résultats.

Structure du projet

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

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

Copier après la connexion

Explication du code

Examinons de plus près le code qui alimente le calculateur d'IMC.

HTML

Le HTML fournit la structure de base de la calculatrice, comprenant des champs de saisie pour la taille et le poids, un bouton pour déclencher le calcul et une section pour afficher le résultat.

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

Copier après la connexion

CSS

Le CSS stylise la page pour la rendre visuellement attrayante et facile à utiliser. Il présente un design moderne et épuré avec des éléments réactifs.

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

Copier après la connexion

Javascript

Le JavaScript gère les fonctionnalités de base de l'application : calculer l'IMC en fonction des entrées de l'utilisateur et mettre à jour la page Web avec les résultats.

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);

Copier après la connexion

Démo en direct

Vous pouvez essayer le calculateur d'IMC en direct ici.

Conclusion

Construire ce calculateur d'IMC a été une expérience enrichissante qui a amélioré mes compétences en HTML, CSS et JavaScript. Le projet montre comment une idée simple peut être transformée en un outil pratique dont les utilisateurs peuvent bénéficier. Que vous cherchiez à créer un projet similaire ou simplement à explorer le développement Web, j'espère que ce didacticiel vous aidera dans votre parcours. Bon codage !