script.js

const BMIData = [
    { name: "Maigreur", color: "midnightblue", range: [0, 18.5] },
    { name: "Bonne santé", color: "green", range: [18.5, 25] },
    { name: "Surpoids", color: "lightcoral", range: [25, 30] },
    { name: "Obésité modérée", color: "orange", range: [30, 35] },
    { name: "Obésité sévère", color: "crimson", range: [35, 40] },
    { name: "Obésité morbide", color: "purple", range: 40 },
];

const form = document.querySelector("form");

form.addEventListener("submit", handleForm)

function handleForm(e){
    e.preventDefault();
    calculateBMI();
}

const inputs = document.querySelectorAll("input");

function calculateBMI() {
    const height = inputs[0].value;
    const weight = inputs[1].value;
    
    if(!height || !weight || height <= 0 || weight <= 0) {
        handleError();
        return;
    }
    const BMI = (weight / Math.pow(height / 100, 2)).toFixed(2);
    showResult(BMI); 
}

const displayBMI = document.querySelector(".bmi-value");
const result = document.querySelector(".result");

function handleError() {
    displayBMI.textContent = "Woops";
    displayBMI.style.color = "red";
    result.textContent = "Remplissez correctement les champs"
}

function showResult(BMI) {
    const foo = BMIData.find(data => {
        if(BMI >= data.range[0] && BMI < data.range[1]) return data;
        else if(typeof data.range === "number" && BMI >= data.range) return data;
    })
    
    displayBMI.textContent = BMI;
    displayBMI.style.color = `${foo.color}`;
    result.textContent = `Résultat : ${foo.name}`;
}