From 46208b8f599ba6d412033592c74493c2458681aa Mon Sep 17 00:00:00 2001 From: SubhaBhatta Date: Sat, 5 Oct 2024 16:34:34 +0545 Subject: [PATCH] New features added. --- Web development/BMI Calculator/app.js | 67 ++++++++++--- Web development/BMI Calculator/index.html | 48 ++++++---- Web development/BMI Calculator/styles.css | 110 +++++++++------------- 3 files changed, 130 insertions(+), 95 deletions(-) diff --git a/Web development/BMI Calculator/app.js b/Web development/BMI Calculator/app.js index 54a8515..b27e85d 100644 --- a/Web development/BMI Calculator/app.js +++ b/Web development/BMI Calculator/app.js @@ -1,15 +1,60 @@ -document.getElementById("submit").addEventListener("click", bmiCalculator); +const unitSelect = document.getElementById('unit'); + const heightInput = document.getElementById('height'); + const weightInput = document.getElementById('weight'); + const heightUnit = document.getElementById('height-unit'); + const weightUnit = document.getElementById('weight-unit'); + const calculateBtn = document.getElementById('calculate'); + const resetBtn = document.getElementById('reset'); + const resultDiv = document.getElementById('result'); -function bmiCalculator() { - var cm = parseInt(document.getElementById("cm").value); - var kg = parseFloat(document.getElementById("kg").value); + unitSelect.addEventListener('change', updateUnits); + calculateBtn.addEventListener('click', calculateBMI); + resetBtn.addEventListener('click', resetCalculator); - var bmi; - var newCm= parseFloat(cm/100); + function updateUnits() { + if (unitSelect.value === 'metric') { + heightUnit.textContent = 'cm'; + weightUnit.textContent = 'kg'; + } else { + heightUnit.textContent = 'in'; + weightUnit.textContent = 'lbs'; + } + } - bmi = kg / (newCm * newCm); - bmi = bmi.toFixed(1); - // console.log(bmi); + function calculateBMI() { + const height = parseFloat(heightInput.value); + const weight = parseFloat(weightInput.value); - document.getElementById("result").innerHTML = "Your BMI is " + bmi; -} \ No newline at end of file + if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) { + resultDiv.innerHTML = '

Please enter valid height and weight values.

'; + return; + } + + let bmi; + if (unitSelect.value === 'metric') { + bmi = weight / ((height / 100) ** 2); + } else { + bmi = (weight / (height ** 2)) * 703; + } + + const category = getBMICategory(bmi); + resultDiv.innerHTML = ` +

Your BMI is ${bmi.toFixed(1)}

+

Category: ${category}

+ `; + } + + function getBMICategory(bmi) { + if (bmi < 18.5) return 'Underweight'; + if (bmi < 25) return 'Normal weight'; + if (bmi < 30) return 'Overweight'; + return 'Obesity'; + } + + function resetCalculator() { + heightInput.value = ''; + weightInput.value = ''; + resultDiv.innerHTML = ''; + unitSelect.value = 'metric'; + updateUnits(); + } \ No newline at end of file diff --git a/Web development/BMI Calculator/index.html b/Web development/BMI Calculator/index.html index bdec21a..61891bd 100644 --- a/Web development/BMI Calculator/index.html +++ b/Web development/BMI Calculator/index.html @@ -9,27 +9,37 @@ -

BMI Calculator

-
- - - - - - - - - -
- -
-

BMI Standards:

- Under Weight = Less than 18.6
- Normal Range = 18.6 and 24.9
- Overweight = Greater than 24.9
+
+

Enhanced BMI Calculator

+
+ + +
+
+ + + cm +
+
+ + + kg +
+ + +
+
+

BMI Categories:

+

Underweight: Less than 18.5

+

Normal weight: 18.5 to 24.9

+

Overweight: 25 to 29.9

+

Obesity: 30 or greater

-
+ diff --git a/Web development/BMI Calculator/styles.css b/Web development/BMI Calculator/styles.css index 4b32176..2cbe03e 100644 --- a/Web development/BMI Calculator/styles.css +++ b/Web development/BMI Calculator/styles.css @@ -1,87 +1,67 @@ * { padding: 0; margin: 0; - font-family: 'Lato', Arial, sans-serif; - font-size: 100%; - line-height: 1.25; - color: #FFF; + font-family: 'Arial', sans-serif; box-sizing: border-box; } - body { background: #8e44e2; - color: rgba(0, 0, 0, 0.45); + color: #FFF; + line-height: 1.6; + padding: 20px; } - .container { - margin: 1% auto 0; - width: 65%; -} - -@media (max-width: 600px) { - .container { - margin: 5% auto 0; - width: 75%; - } + max-width: 600px; + margin: 0 auto; + background: rgba(255, 255, 255, 0.1); + padding: 20px; + border-radius: 8px; } - -h1 { - width: 100%; - font-size: 2em; +h1, h2 { text-align: center; - margin: 2% auto; -} - -.info { - background: rgba(255, 255, 255, .09); - padding: 2%; + margin-bottom: 20px; } - -.result { - font-size: 35px; - text-align: center; +.input-group { + margin-bottom: 15px; } - label { - margin: 3% 0 1%; - position: relative; - float: left; -} - -input, textarea, select { - line-height: 1.5; - font-size: 1.4em; - padding: 5px 10px; - border: 2px solid #FFF; - color: #fff; display: block; - width: 100%; - background: transparent; - box-sizing: border-box; - outline: 0; + margin-bottom: 5px; } - -.display-input { +input[type="number"], select { width: 100%; - height: 100px; - text-align: center; - background-color: #1f80c9; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + background: rgba(255, 255, 255, 0.2); + color: #FFF; } - -.submit { - width: 150px; - border-radius: 5px; - border-style: none; - background: #8e44e2; +button { + display: inline-block; + background: #4CAF50; color: #FFF; - font-size: 25px; - margin: 5% auto; - border: 2px solid #FFF; + padding: 10px 20px; + border: none; + border-radius: 4px; cursor: pointer; - transition: all .6s; + margin-right: 10px; +} +button:hover { + background: #45a049; +} +.result { + margin-top: 20px; + padding: 15px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; +} +.info { + margin-top: 20px; + background: rgba(255, 255, 255, 0.1); + padding: 15px; + border-radius: 4px; } - -.submit:hover { - background: #FFF; - color: #8e44e2; +.error { + color: #FF6B6B; + margin-top: 5px; } \ No newline at end of file