<h2></h2>
<p>Om te bepalen of iemand te dik is... of te dun, gebruiken diëtisten vaak de Body Mass Index (BMI) of <br />
Quetelet Index (zo genoemd naar de Belgische wiskundige, statisticus, socioloog en astronoom die er de <br />
grondlegger van is).</p>
<p>Om iemands BMI te berekenen, volstaat het zijn gewicht te delen door het kwadraat van zijn lengte (kg/m²). <br />
Men kan de huidige BMI dan vergelijken met de voor die persoon wenselijke BMI.</p>
<ul class="bullet-list">
<li>Een BMI tussen 18,5 en 25 is doorgaans bevredigend.</li>
<li>Bij een BMI lager dan 18,5 is men waarschijnlijk te mager.</li>
<li>Bij een BMI van 25 tot 30 heeft men wellicht een aantal kilo's te veel.</li>
<li>Bij een BMI tussen 30 en 40 is men zwaarlijvig.</li>
<li>Vanaf een BMI van 40 spreekt men van ziekelijke obesitas.</li>
</ul>
<p>Vul hier uw gegevens in om uw BMI te berekenen en te weten hoe het met uw gewicht is gesteld:</p>
<h1>BMI Calculator:</h1><br />
<input type="text" id="height" placeholder="Lengte"/>
<input type="text" id="weight" placeholder="Gewicht"/>
<input type="submit" value="Bereken BMI" onclick="computeBMI();"><br /><br />
<h2>BMI: <span id="output"></span></h2>
<h2>Categorie: <span id="comment"> </span></h2>
<script>
function computeBMI() {
// user inputs
var height = Number(document.getElementById("height").value);
var weight = Number(document.getElementById("weight").value);
//Perform calculation
var BMI = weight /Math.pow(height, 2);
var BMI = weight / (height / 100 * height / 100);
//Display result of calculation
document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
var output = Math.round(BMI * 100) / 100;
if (output < 18.5)
document.getElementById("comment").innerHTML = '<span style="color:#349ED6;">ondergewicht</span>';
else if (output >= 18.5 && output <= 25)
document.getElementById("comment").innerHTML = '<span style="color:#00BF40;">normaal gewicht</span>';
else if (output >= 25 && output <= 30)
document.getElementById("comment").innerHTML = '<span style="color:#FF8000;">overgewicht</span>';
else if (output > 30 && output <= 39)
document.getElementById("comment").innerHTML = '<span style="color:#FF0000;">obesitas</span>';
else if (output > 40)
document.getElementById("comment").innerHTML = '<span style="color:#FF0000;">morbide obesitas</span>';
// document.getElementById("answer").value = output;
}
</script>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: var(--color04);
background-image: none;
border-color: var(--color05);
box-shadow: none;
color: var(--color01);
font-size: 0.95em;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: var(--color05);
background-image: none;
border-color: var(--color05);
color: var(--color11);
text-shadow: none;
}
input[type=submit] {
padding: 12px 15px;
}
input {
border: 0px solid transparent;
outline-style: none;
font-size: 0.95em;
padding: 0.5em;
}
@media (max-width: 800px) {
button, input[type="text"] {
display: block;
margin-bottom: 1em;
}
}
</style>
