Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ## BMI Calculator with Bootstrap 4 + Js
- __HTML + Bootstrap@v4__
- ```html
- <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">< 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">> 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>
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement