diff --git a/simple calculator/index.html b/simple calculator/index.html index b0bcd665..ddcc7a33 100644 --- a/simple calculator/index.html +++ b/simple calculator/index.html @@ -1,15 +1,37 @@ + - - - + + + + + BMI Calculator - - -
-

BMI Calculator

- - - -
- - + + + + + + + +
+

BMI Calculator

+ + + + +
+

BMI Value:

+
+
+
+

Status:

+
+
+
+ + + \ No newline at end of file diff --git a/simple calculator/index.js b/simple calculator/index.js new file mode 100644 index 00000000..738e63e8 --- /dev/null +++ b/simple calculator/index.js @@ -0,0 +1,24 @@ +function Calculate(){ + var height = document.getElementById("h-input").value; + var weight = document.getElementById("w-input").value; + + var result = parseFloat(weight) /(parseFloat(height)/100)**2; + + // var result = weight/(height ** 2); + + if(!isNaN(result)){ + document.getElementById("bmi-output").innerHTML = result; + if(result < 18.5 ){ + document.getElementById("bmi-status").innerHTML = "Underweight"; + } + else if(result > 18.5 && result < 25){ + document.getElementById("bmi-status").innerHTML = "Healthy"; + } + else if( result > 25 && result < 30){ + document.getElementById("bmi-status").innerHTML = "Overweight"; + } + else{ + document.getElementById("bmi-status").innerHTML = "Obesity"; + } + } +} \ No newline at end of file diff --git a/simple calculator/main.css b/simple calculator/style.css similarity index 77% rename from simple calculator/main.css rename to simple calculator/style.css index 17a05a86..de20f0e7 100644 --- a/simple calculator/main.css +++ b/simple calculator/style.css @@ -1,71 +1,71 @@ -*{margin: 0; padding: 0;font-family: 'Old Standard TT', serif;} -.container{ - display: grid; - justify-content: center; - align-content: center; - min-height: 100vh; - grid-template-columns: 30vw; - grid-template-rows: repeat(3,10vh) 5vh repeat(2,10vh); - grid-gap: 10px; - -} -body{ - background: rgb(37, 31, 31); -} - -h1{ - text-align: center; - color: white; -} -.submit-btn{ - background-color: rgb(141, 64, 224); -} -.bmi-value{ - background-color: rgb(51, 255, 0); - display: grid; - grid-template-rows: 50% 50%; -} -.status{ - background-color: rgb(255, 127, 191); - display: grid; - grid-template-rows: 50% 50%; - -} -.container > div{ - padding: 10px; - font-size: 20px; - font-weight: bold; - color: black; - border-radius: 10px; -} -button,input{ - min-width: 100%; - min-height: 100%; - border: none; - outline: none; - font-size: 1.5vw; - border-radius: 8px; -} -input{ - background: #e4b659; - text-indent: 0.5em; - max-width:100% ; - color: black; - outline: none; -} -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} -input[type=number] { - -moz-appearance: textfield; -} -button{ - background: tomato; - cursor: pointer; -} -button:hover{ - background: #c70039; - color: white; +*{margin: 0; padding: 0;font-family: 'Akaya Telivigala', cursive;} +.container{ + display: grid; + justify-content: center; + align-content: center; + min-height: 100vh; + grid-template-columns: 30vw; + grid-template-rows: repeat(3,10vh) 5vh repeat(2,10vh); + grid-gap: 10px; + +} +body{ + background: black; +} + +h1{ + text-align: center; + color: white; +} +.submit-btn{ + background-color: turquoise; +} +.bmi-value{ + background-color: yellow; + display: grid; + grid-template-rows: 50% 50%; +} +.status{ + background-color: aquamarine; + display: grid; + grid-template-rows: 50% 50%; + +} +.container > div{ + padding: 10px; + font-size: 20px; + font-weight: bold; + color: black; + border-radius: 10px; +} +button,input{ + min-width: 100%; + min-height: 100%; + border: none; + outline: none; + font-size: 1.5vw; + border-radius: 8px; +} +input{ + background: #ffdd99; + text-indent: 0.5em; + max-width:100% ; + color: black; + outline: none; +} +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type=number] { + -moz-appearance: textfield; +} +button{ + background: tomato; + cursor: pointer; +} +button:hover{ + background: #c70039; + color: white; } \ No newline at end of file