WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
Calculateur d'IMC
Calculateur d'IMC
Poids (kg)
Taille (cm)
Calculer l'IMC
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; }
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)}
Catégorie: ${category} `; resultDiv.className = className; resultDiv.style.display = "block"; } function showError(message) { resultDiv.innerHTML = message; resultDiv.className = "danger"; resultDiv.style.display = "block"; }
Validating your code, please wait...
HTML
CSS
JS
Calculateur d'IMC
Calculateur d'IMC
Poids (kg)
Taille (cm)
Calculer l'IMC
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; }
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)}
Catégorie: ${category} `; resultDiv.className = className; resultDiv.style.display = "block"; } function showError(message) { resultDiv.innerHTML = message; resultDiv.className = "danger"; resultDiv.style.display = "block"; }