Webleb - UI Elements - Calculateur d'IMC

HTML

CSS

JS

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS