index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMC Calculator</title>
</head>
<body>
    <h1>IMC Calculator</h1>

    <fieldset id="sexe">
        <label for="male">male</label>
        <input type="radio" name="sexe" id="male" value="male" required>
        <label for="female">female</label>
        <input type="radio" name="sexe" id="female" value="female" required>
    </fieldset>
    <br>

    <label for="weight">Weight (kg)</label>
    <input type="number" name="weight" id="weight" placeholder="Weight in kg" required>
    <span id="weightError" class="error-message"></span>
    <br>

    <label for="height">Height (cm)</label>
    <input type="number" name="height" id="height" placeholder="Height in cm" required>
    <span id="heightError" class="error-message"></span>
    <br><br>

    <input type="submit" id="calculateButton" value="Calculate"> <span id="hoverMessage" style="visibility: hidden">Click to calculate your IMC</span>
    <br>

    <h2>Result</h2>
    <p id="result">
        Your IMC is : <span id="imc"></span>
        <br>
        Status : <span id="status"></span>
    </p>

    <script src="script.js"></script>
</body>
</html>

script.js

/**
 * Calculate on CTRL+C
 */

var isCtrl = false;
document.onkeyup=function(e){
if(e.key === 'Control')
    isCtrl=false;
}
document.onkeydown=function(e){
if(e.key === 'Control') isCtrl=true;
    if(e.key === 'c' && isCtrl == true) {
    calculer();
    }
}

/**
 * Show - Hide hover message
 */

document.getElementById('calculateButton').addEventListener('mouseover', function() {
    document.getElementById('hoverMessage').style.visibility = 'visible';
});

document.getElementById('calculateButton').addEventListener('mouseout', function() {
    document.getElementById('hoverMessage').style.visibility = 'hidden';
});

document.getElementById('calculateButton').addEventListener('click', function() {
    let sexe = document.querySelector('input[name="sexe"]:checked').value;
    console.log(sexe);
    calculer(sexe);
});

/**
 * verify input on change
 */
document.getElementById('weight').addEventListener('change', verifier);
document.getElementById('height').addEventListener('change', verifier);
function verifier() {
    let weight = Number(document.getElementById("weight").value);
    let height = Number(document.getElementById("height").value);

    var weightError = document.getElementById('weightError');
    var heightError = document.getElementById('heightError');

    if (weight <= 0) {
        weightError.innerHTML = '<span style="color: red">X</span>';
    } else {
        weightError.innerHTML = '<span style="color: green">OK</span>';
    }

    if (height <= 0) {
        heightError.innerHTML = '<span style="color: red">X</span>';
    } else {
        heightError.innerHTML = '<span style="color: green">OK</span>';
    }
}

/**
 * Calculate IMC
 * @param {number} weight
 * @param {number} height
 */

function calculer(sexe) {
    let weight = Number(document.getElementById("weight").value);
    let height = Number(document.getElementById("height").value);
    let result = NaN;
    console.log(weight, height);

    if ( weight == 0 || height == 0 )
        alert("Les champs weight et height ne peuvent être nuls !");
    else if ( weight < 0 || height < 0 )
        alert("Les champs weight et height ne doivent contenir que des entiers positifs !");
    else{
        result = weight / (height/100 * height/100);
        document.getElementById("imc").innerText = result;
        console.log(result);
    }

    if (sexe == "male"){
        if (result < 20.7)
            document.getElementById("status").innerText = "Mange un truc fréro, tu va clamser !";
        else if (result < 26.4)
            document.getElementById("status").innerText = "T'es un beau gosse khoya !";
        else if (result < 27.8)
            document.getElementById("status").innerText = "Toi t'as pris du rab à la quantine !";
        else if (result < 31.1)
            document.getElementById("status").innerText = "Je crois que faut que t'arrête les bazookas...";
        else if (result >= 31.1 && result < 100)
            document.getElementById("status").innerText = "Tu tentes un cosplay Big Smoke ?";
        else if (isNaN(result))
            document.getElementById("status").innerText = "Bon bah rentre les bonnes valeurs maintenant !";
        else
            document.getElementById("status").innerText = "WTF ?";
    } else if (sexe == "female") {
        if (result < 19.1)
        document.getElementById("status").innerText = "Mange un truc fréro, tu va clamser !";
        else if (result < 25.8)
            document.getElementById("status").innerText = "T'es un beau gosse khoya !";
        else if (result < 27.3)
            document.getElementById("status").innerText = "Toi t'as pris du rab à la quantine !";
        else if (result < 32.3)
            document.getElementById("status").innerText = "Je crois que faut que t'arrête les bazookas...";
        else if (result >= 32.3 && result < 100)
            document.getElementById("status").innerText = "Tu tentes un cosplay Big Smoke ?";
        else if (isNaN(result))
            document.getElementById("status").innerText = "Bon bah rentre les bonnes valeurs maintenant !";
        else
            document.getElementById("status").innerText = "WTF ?";
    }

}