├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # bmi-calc-javascript-project 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BMI Calculator 9 | 10 | 11 |
12 |

BMI Calculator

13 |
14 |

15 |

16 | 17 |
18 |
19 |

BMI Weight Guide

20 |

Under Weight = Less than 18.6

21 |

Normal Range = 18.6 and 24.9

22 |

Overweight = Greater than 24.9

23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form'); 2 | 3 | form.addEventListener('submit', function(e){ 4 | e.preventDefault(); 5 | 6 | const height = parseInt(document.querySelector('#height').value); 7 | const weight = parseInt(document.querySelector('#weight').value); 8 | const results = document.querySelector('#results'); 9 | 10 | if((height === '') || (height < 0) || (isNaN(height))){ 11 | //NaN !== NaN 12 | results.innerHTML = "Please provide a valid height"; 13 | 14 | } else if (weight === '' || weight < 0 || isNaN(weight)){ 15 | results.innerHTML = "Please provide a valid weight"; 16 | } else { 17 | //calculate BMI 18 | const bmi = (weight / ((height*height)/10000)).toFixed(2); 19 | //display the results 20 | results.innerHTML = `${bmi}` 21 | } 22 | 23 | 24 | }); 25 | 26 | //notes 27 | //NaN !== NaN, use the isNaN() function 28 | //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN 29 | 30 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 375px; 3 | height: 525px; 4 | margin-left: 350px; 5 | margin-top: 65px; 6 | background-color: yellow; 7 | padding-left: 30px; 8 | } 9 | #height, #weight { 10 | width: 150px; 11 | height: 25px; 12 | margin-top: 30px; 13 | } 14 | 15 | #weight-guide{ 16 | margin-left: 75px; 17 | margin-top: 25px; 18 | } 19 | 20 | #results{ 21 | font-size: 35px; 22 | margin-left: 90px; 23 | margin-top: 20px; 24 | color: blue; 25 | } 26 | 27 | button{ 28 | width: 150px; 29 | height: 35px; 30 | margin-left: 90px; 31 | margin-top: 25px; 32 | border-radius: 5px; 33 | border-style: none; 34 | background-color: blue; 35 | color: #fff; 36 | font-size: 25px; 37 | } 38 | 39 | h1{ 40 | padding-left: 15px; 41 | padding-top: 25px; 42 | } --------------------------------------------------------------------------------