Maison >interface Web >tutoriel CSS >Créer un calculateur d'IMC avec HTML, CSS et JavaScript
Créer un calculateur d'IMC avec HTML, CSS et JavaScript
- 王林original
- 2024-08-09 05:28:52382parcourir
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
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>
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;
}
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);
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 !
Auteur
-
Abhishek Gurjar
- Profil 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!