From 9954b6a06659891c2608258d58d20f0e92e62511 Mon Sep 17 00:00:00 2001 From: Manish Date: Thu, 20 Oct 2022 10:39:37 +0530 Subject: [PATCH] bmi-calcuator with html css and js file --- 9-bmi-calculator/index.html | 26 ++++++++++++++++++++++++++ 9-bmi-calculator/script.js | 37 +++++++++++++++++++++++++++++++++++++ 9-bmi-calculator/style.css | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 96 insertions(+) create mode 100644 9-bmi-calculator/index.html create mode 100644 9-bmi-calculator/script.js create mode 100644 9-bmi-calculator/style.css diff --git a/9-bmi-calculator/index.html b/9-bmi-calculator/index.html new file mode 100644 index 00000000..d1b96713 --- /dev/null +++ b/9-bmi-calculator/index.html @@ -0,0 +1,26 @@ + + + + + + + BMI Calculator with JavaScript + + + + +
+

Height in CM: +
+

+ +

Weight in KG: +
+

+ + +

+
+ + + \ No newline at end of file diff --git a/9-bmi-calculator/script.js b/9-bmi-calculator/script.js new file mode 100644 index 00000000..84aac3f9 --- /dev/null +++ b/9-bmi-calculator/script.js @@ -0,0 +1,37 @@ +let button = document.getElementById('btn'); + +button.addEventListener('click', () => { + const height = parseInt(document.getElementById('height').value); + const weight = parseInt(document.getElementById('weight').value); + const result = document.getElementById('output'); + let height_status=false, weight_status=false; + + if(height === '' || isNaN(height) || (height <= 0)){ + document.getElementById('height_error').innerHTML = 'Please provide a valid height'; + }else{ + document.getElementById('height_error').innerHTML = ''; + height_status=true; + } + + if(weight === '' || isNaN(weight) || (weight <= 0)){ + document.getElementById('weight_error').innerHTML = 'Please provide a valid weight'; + }else{ + document.getElementById('weight_error').innerHTML = ''; + weight_status=true; + } + + if(height_status && weight_status){ + const bmi = (weight / ((height*height)/10000)).toFixed(2); + + if(bmi < 18.6){ + result.innerHTML = 'Under weight : ' + bmi; + }else if(bmi >= 18.6 && bmi < 24.9){ + result.innerHTML = 'Normal : ' + bmi; + }else{ + result.innerHTML = 'Over weight : ' + bmi; + } + }else{ + alert('The form has errors'); + result.innerHTML = ''; + } +}); \ No newline at end of file diff --git a/9-bmi-calculator/style.css b/9-bmi-calculator/style.css new file mode 100644 index 00000000..a7df52b1 --- /dev/null +++ b/9-bmi-calculator/style.css @@ -0,0 +1,33 @@ +body{ + color: white; + font-family: Arial, Helvetica, sans-serif; + background: linear-gradient(to right, #83a4d4, #b6fbff); +} +span{ + color: red; +} +.wrapper{ + position: absolute; + top: 50%; + left: 50%; + transform:translate(-50%, -50%); + padding: 15px; + width: 50%; + background: black; + border-radius: 5px; + box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; +} +input{ + outline: none; + border: none; + padding: 5px; +} +button{ + color: white; + padding: 10px; + border: 2px solid white; + background: black; + display: block; + margin-top: 10%; + cursor: pointer; +} \ No newline at end of file