Fixed Aashna's BMI calculator

ToonTalk · Jan 10, 2024 · 7a15040 · 7a15040
1 parent 8c9b369
commit 7a15040
Showing 1 changed file with 118 additions and 0 deletions.
diff --git a/apps/By students/Aashna BMI Calculator.html b/apps/By students/Aashna BMI Calculator.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BMI Calculator</title>
+
+<style>body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+        background-color: #f4f4f4;
+    }
+
+    h1 {
+        text-align: center;
+        color: #333;
+    }
+
+    form {
+        max-width: 400px;
+        margin: 20px auto;
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    label {
+        display: block;
+        margin-bottom: 8px;
+        color: #333;
+    }
+
+    input {
+        width: 100%;
+        padding: 10px;
+        margin-bottom: 16px;
+        box-sizing: border-box;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }
+
+    button {
+        background-color: #4caf50;
+        color: white;
+        padding: 12px 20px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    #result {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 18px;
+        color: #333;
+    }
+
+    button:hover {
+        background-color: #45a049;
+    }
+</style></head>
+<body>
+    <h1>BMI Calculator</h1>
+    <form id="bmiForm">
+        <label for="height">Height (cm):</label>
+        <input type="number" id="height" placeholder="Enter your height" required>
+
+        <label for="weight">Weight (kg):</label>
+        <input type="number" id="weight" placeholder="Enter your weight" required>
+
+        <button type="button" onclick="calculateBMI()">Calculate BMI</button>
+    </form>
+
+    <div id="result"></div>
+
+
+<script>
+
+function calculateBMI() {
+        var height = parseFloat(document.getElementById('height').value);
+        var weight = parseFloat(document.getElementById('weight').value);
+
+        if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
+            alert('Please enter valid values for height and weight.');
+            return;
+        }
+
+        var bmi = (weight / ((height / 100) ** 2)).toFixed(2);
+        var resultDiv = document.getElementById('result');
+        resultDiv.innerHTML = 'Your BMI is: ' + bmi + ' - ' + getBMICategory(bmi);
+        resultDiv.style.color = getColorForBMI(bmi);
+    }
+
+    function getBMICategory(bmi) {
+        if (bmi < 18.5) {
+            return 'Underweight';
+        } else if (bmi >= 18.5 && bmi < 24.9) {
+            return 'Normal weight';
+        } else if (bmi >= 25 && bmi < 29.9) {
+            return 'Overweight';
+        } else {
+            return 'Obese';
+        }
+    }
+
+    function getColorForBMI(bmi) {
+        if (bmi < 18.5) {
+            return 'blue';  // Example: Blue for underweight
+        } else if (bmi >= 18.5 && bmi < 24.9) {
+            return 'green'; // Example: Green for normal weight
+        } else if (bmi >= 25 && bmi < 29.9) {
+            return 'orange'; // Example: Orange for overweight
+        } else {
+            return 'red'; // Example: Red for obese
+        }
+    }</script></body>
+</html>