diff --git a/BMI Calculator/index.html b/BMI Calculator/index.html new file mode 100644 index 0000000..3b22b8d --- /dev/null +++ b/BMI Calculator/index.html @@ -0,0 +1,28 @@ + + + + + + + + BMI Calculator + + +
+

BMI Calculator

+
+

+

+ +
+
+

BMI Weight Guide

+

Under Weight = Less than 18.6

+

Normal Range = 18.6 and 24.9

+

Overweight = Greater than 24.9

+
+
+
+ + + diff --git a/BMI Calculator/script.js b/BMI Calculator/script.js new file mode 100644 index 0000000..33da366 --- /dev/null +++ b/BMI Calculator/script.js @@ -0,0 +1,26 @@ +const form = document.querySelector("form") + +form.addEventListener('submit', function(e){ + e.preventDefault(); + + const height = parseInt(document.querySelector("#height").value) + const weight = parseInt(document.querySelector("#weight").value) + const result = document.querySelector("#results") + + if (height == " " || height < 0 || isNaN(height)){ + result.innerHTML = `Please Enter valid height ${height}` + } else if (weight == " " || weight < 0 || isNaN(weight)){ + result.innerHTML = `Please Enter valid weight ${weight}` + } else { + const bmi = (weight / ((height * height) / 10000)).toFixed(2) + result.innerHTML = `${bmi}` + + if (bmi < 18.6){ + result.innerHTML = `${bmi}
Under Weight
` + } else if (bmi >= 18.6 && bmi <=24.9){ + result.innerHTML = `${bmi}
Normal Range
` + } else { + result.innerHTML = `${bmi}
Over Weight
` + } + } +}) \ No newline at end of file diff --git a/BMI Calculator/style.css b/BMI Calculator/style.css new file mode 100644 index 0000000..720a7db --- /dev/null +++ b/BMI Calculator/style.css @@ -0,0 +1,47 @@ +.container { + width: 575px; + height: 825px; + + background-color: #797978; + padding-left: 30px; + } + #height, + #weight { + width: 150px; + height: 25px; + margin-top: 30px; + } + + #weight-guide { + margin-left: 75px; + margin-top: 25px; + } + + #results { + font-size: 35px; + margin-left: 90px; + margin-top: 20px; + color: rgb(241, 241, 241); + } + + button { + width: 150px; + height: 35px; + margin-left: 90px; + margin-top: 25px; + background-color: #fff; + padding: 1px 30px; + border-radius: 8px; + color: #212121; + text-decoration: none; + border: 2px solid #212121; + + font-size: 25px; + } + + h1 { + padding-left: 15px; + padding-top: 25px; + + } + \ No newline at end of file