BMI CALCULATOR

BMI.MD

BMI Calculator with Bootstrap 4 + Js

HTML + Bootstrap@v4

<section class="align-items-stretch bg-secondary "><div class="container  d-flex flex-column "><div class="row   my-4 py-4 "><div class="col-12 col-lg-6 col-xl-4">
<span class="text-primary f-bold mb-4 d-block">Calculate Your Body Mass Index</span>
<label for="height_bmi">Height(cm)</label>
<input type="number" name="height_bmi" class="d-block p-2 w-100" id="height_bmi" placeholder="height(cm)">
<label for="weight_bmi" class="d-block mt-3">weight(kg)</label>
<input type="number" name="weight_bmi" id="weight_bmi" class="d-block p-2 w-100" placeholder="weight(kg)">
<input type="submit" class="btn-primary btn-tm mt-4 w-100" id="btn_calc_bmi" value="Calc BMI">
<span id="result_bmi" class="btn btn-tm mt-4 w-100 btn-tm-none">19.0</span></div><div class="col-12 col-lg-6 offset-xl-2"><table class="table" align="center" id="tbl_bmi"><tbody><tr><td class="cinfoHd">Category</td><td class="cinfoHdL">BMI range - kg/m<sup>2</sup></td></tr><tr><td>Severe Thinness</td><td class="cinfoBodL">&lt; 16</td></tr><tr><td>Moderate Thinness</td><td class="cinfoBodL">16 - 17</td></tr><tr><td>Mild Thinness</td><td class="cinfoBodL">17 - 18.5</td></tr><tr class="bg-white"><td>Normal</td><td class="cinfoBodL">18.5 - 25</td></tr><tr><td>Overweight</td><td class="cinfoBodL">25 - 30</td></tr><tr><td>Obese Class I</td><td class="cinfoBodL">30 - 35</td></tr><tr><td>Obese Class II</td><td class="cinfoBodL">35 - 40</td></tr><tr><td>Obese Class III</td><td class="cinfoBodL">&gt; 40</td></tr></tbody></table></div></div></div></section>

<script>document.addEventListener("DOMContentLoaded", function() {
    let btn_calc =  document.querySelector('#btn_calc_bmi');
    btn_calc.addEventListener('click', () => {
           
    let height_bmi_cm = parseInt(document.getElementById('height_bmi').value);
    let weight_bmi =parseFloat( document.getElementById('weight_bmi').value);
  
    let height_bmi_m = height_bmi_cm / 100;
    const BMI = (weight_bmi/Math.pow(height_bmi_m,2));
    let res_bmi=document.getElementById('result_bmi')
    let fix_bmi=BMI.toFixed(1);
    res_bmi.innerHTML =fix_bmi ;
    res_bmi.classList.add('btn-tm-none');
    let tbl = document.querySelector('#tbl_bmi');

    for(let i=0;i<tbl.rows.length;i++){
        if( tbl.rows[i].classList.contains('bg-white')){
            tbl.rows[i].classList.remove('bg-white')
        }
    }

    switch(true){
        case (fix_bmi < 16):
        tbl.rows[1].classList.add('bg-white');
        break;

        case (16 <= fix_bmi && fix_bmi  < 17):
        tbl.rows[2].classList.add('bg-white');
        break;

        case (17 <=  fix_bmi && fix_bmi  < 18.5):
        tbl.rows[3].classList.add('bg-white');
        break;

        case (18.5 <=  fix_bmi && fix_bmi  < 25):
        tbl.rows[4].classList.add('bg-white');
        break;

        case (25 <=  fix_bmi && fix_bmi  < 30):
        tbl.rows[5].classList.add('bg-white');
        break;

        case (30 <=  fix_bmi && fix_bmi  < 35):
        tbl.rows[6].classList.add('bg-white');
        break;

        case (35 <=  fix_bmi && fix_bmi  < 40):
        tbl.rows[7].classList.add('bg-white');
        break;

        case ( fix_bmi >= 40):
        tbl.rows[8].classList.add('bg-white');
        break;
    }

    });

 
});</script>