WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculateur d'IMC
657
t.heymao
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
17 September 2024
Calculateur de date
12 June 2025
Calculateur de taxes Robux
5 August 2025
Calculateur d'hypoténuse : HTML, JavaScript, Canvas
HTML
Copy
Calculateur d'IMC
Calculateur d'IMC
Poids (kg)
Taille (cm)
Calculer l'IMC
CSS
Copy
boby { font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; } .calculator { background-color: #f5f5f5; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #4caf50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a040; } #result { margin-bottom: 20px; padding: 15px; border-radius: 4px; display: none; } .normal { background-color: #d4edda; color: #155724; } .warning { background-color: #fff3cd; color: #856404; } .danger { background-color: #f8d7da; color: #721c24; }
JS
Copy
const form = document.getElementById("bmiForm"); const resultDiv = document.getElementById("result"); form.addEventListener("submit", function (e) { e.preventDefault(); const weight = parseFloat(document.getElementById("weight").value); const height = parseFloat(document.getElementById("height").value) / 100; // Conversion en mètres if (weight > 0 && height > 0) { const bmi = calculateBMI(weight, height); displayResult(bmi); } else { showError("Veuillez entrer des valeurs valides"); } }); function calculateBMI(weight, height) { return weight / (height * height); } function displayResult(bmi) { let category = ""; let className = ""; if (bmi < 18.5) { category = "Insuffisance pondérale"; className = "warning"; } else if (bmi < 25) { category = "Poids normal"; className = "normal"; } else if (bmi < 30) { category = "Surpoids"; className = "warning"; } else { category = "Obésité"; className = "danger"; } resultDiv.innerHTML = ` Votre IMC: ${bmi.toFixed(1)}<br> Catégorie: ${category} `; resultDiv.className = className; resultDiv.style.display = "block"; } function showError(message) { resultDiv.innerHTML = message; resultDiv.className = "danger"; resultDiv.style.display = "block"; }