BMI

A bmi identifier

HTML

<div class="row">
    <div class="col-md-6">
        <h2>BMI Rechner</h2>
        <p>Ermitteln Sie Ihren BMI</p>
        <form id="bmiForm" name="bmiForm">
            <div>
                <label for="height"><strong>Gr&ouml;sse</strong>&nbsp;[cm]
                    <input id="height" onkeyup="calculateBMI();" name="height" size="6" type="text" value="170" /> </label>
                <br />
                <label for="weight"><strong>Gewicht</strong>&nbsp;[kg]
                    <input id="weight" onkeyup="calculateBMI();" name="weight" size="6" type="text" value="71" /> </label>
                <br />
                <input onclick="calculateBmi()" type="button" value="BMI berechnen" />
                <br /> <strong>Ihr BMI</strong>
                <input name="bmi" size="10" type="text" />
                <br /> <strong>Einteilung:</strong>
                <input name="meaning" size="20" type="text" />
                <br />
                <input type="reset" value="Zur&uuml;cksetzen" /> </div>
        </form>
    </div>
    <div class="contener">
        <div id="Empty1"></div>
        <div id="Empty2"></div>
        <div id="Empty3"></div>
        <div id="Empty4"></div>
    </div>
    <div class="contener2">
        <div class="subcontener1"> 18.5 </div>
        <div class="subcontener2"> 25 </div>
        <div class="subcontener3"> 30 </div>
    </div>
    <div class="contener">
        <div class="untergewicht"> Untergewicht </div>
        <div class="normalgewicht"> Normalgewicht </div>
        <div class="uebergewicht"> Übergewicht </div>
        <div class="adipositas"> Adipositas </div>
    </div>
<div>

CSS

.header {
            font-weight: bold;
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
            width: "100%";
        }
        
        .untergewicht {
            background-color: red;
            color: snow;
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
            width: 100%;
            text-align: center;
        }
        
        .normalgewicht {
            background-color: forestgreen;
            color: snow;
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
            width: 100%;
            text-align: center;
        }
        
        .uebergewicht {
            background-color: red;
            color: snow;
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
            width: 100%;
            text-align: center;
        }
        
        .adipositas {
            background-color: red;
            color: snow;
            border: 1px solid #999999;
            display: table-cell;
            padding: 3px 10px;
            width: 100%;
            text-align: center;
        }
        
        .contener {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        
        .subcontener1 {
            display: table-cell;
            padding: 3px 10px;
            width: 50%;
            text-align: center;
        }
        
        .subcontener2 {
            display: table-cell;
            padding: 3px 10px;
            width: 0%;
            text-align: center;
        }
        
        .subcontener3 {
            display: table-cell;
            padding: 3px 10px;
            width: 50%;
            text-align: center;
        }
        
        .contener2 {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        
   ...

JavaScript

function calculateBmi() {
        var weight = document.bmiForm.weight.value
        var height = document.bmiForm.height.value
        if (weight > 0 && height > 0) {
            var finalBmi = Math.round((weight / (height / 100 * height / 100)) * 10) / 10;
            document.bmiForm.bmi.value = finalBmi
            if (finalBmi < 18.4) {
                document.bmiForm.meaning.value = "Untergewicht"
                onload = function f()
        { document.getElementById("Empty1").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>'; }
            }
            if (finalBmi > 18.5 && finalBmi < 24.9) {
                document.bmiForm.meaning.value = "Normalgewicht, weiter so!"
                onload = function f()
        { document.getElementById("Empty2").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>'; }
            }
            if (finalBmi > 25 && finalBmi < 29.9) {
                document.bmiForm.meaning.value = "Übergewicht"
                onload = function f()
        { document.getElementById("Empty3").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>'; }
            }
            if (finalBmi > 30) {
                document.bmiForm.meaning.value = "Adipositas, lassen Sie sich professional beraten"
                onload = function f()
        { document.getElementById("Empty4").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>'; }
            }
        }
        else {
            alert("Bitte alles ausfüllen")
        }
    }