From d5485010e22c5745928a220e2b2986498e03409d Mon Sep 17 00:00:00 2001
From: Ankita Mohanty <ankitamohanty1919191@gmail.com>
Date: Tue, 29 Jul 2025 18:29:07 +0530
Subject: [PATCH] Added BMI Calculator page and Updated footer link which
 directs to BMI Calculator page.

---
 bmi.html   | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |   2 +-
 2 files changed, 164 insertions(+), 1 deletion(-)
 create mode 100644 bmi.html
diff --git a/bmi.html b/bmi.html
new file mode 100644
index 0000000..4582ff5
--- /dev/null
+++ b/bmi.html
@@ -0,0 +1,163 @@
+<!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>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body {
+            margin: 20px;
+            font-family: "Poppins", sans-serif;
+            background-color:  #111317;
+
+        }
+        .bmi__container {
+            max-width: 400px;
+            margin: 5rem auto;
+            background: var(--primary-color-light);
+            border-radius: 10px;
+            border: 2px solid transparent;
+            box-shadow: 0 4px 30px rgba(0,0,0,0.1);
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .bmi__container:hover {
+            border-color: var(--secondary-color-dark);
+        }
+                
+        .decorated__text {
+            -webkit-text-fill-color: transparent;
+            -webkit-text-stroke: 1px var(--white);
+            color: var(--white);
+            font-weight: 700;
+        }
+        .bmi__form label {
+            color: var(--white);
+            font-weight: 500;
+        }
+        .bmi__form input,
+        .bmi__form select {
+            padding: 0.75rem 1rem;
+            border-radius: 5px;
+            border: 1px solid var(--secondary-color);
+            background: var(--primary-color-extra-light);
+            color: var(--white);
+            font-size: 1rem;
+            margin-bottom: 1rem;
+        }
+        .bmi__form input:hover,
+        .bmi__form select:hover {
+            border-color: var(--secondary-color);
+            background: var(--primary-color-light);
+            transition: 0.3s;
+        }
+        #result {
+            color: var(--secondary-color);
+            margin-top: 1rem;
+            font-size: 1.2rem;
+            text-align: center;
+        }
+        .bmi__form button {
+            margin-top: 10px;
+            background: #22960a;
+            color: var(--white);
+            border: none;
+            transition: 0.3s;
+        }
+
+        .bmi__form button:hover {
+            background: var(--secondary-color-dark);
+            color: var(--white);
+            box-shadow: 0 2px 10px rgba(71, 215, 95, 0.2);
+        }
+        .bmi__form__position {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .bmi__form__position .btn:hover {
+            background: var(--secondary-color);
+            color: var(--white);
+            box-shadow: 0 2px 10px rgba(25, 44, 28, 0.2);
+        }
+    </style> 
+</head>
+<body>
+    <a href="index.html" class="btn" style="margin-bottom: 2rem; align-self: flex-start;  background: #22960a; color: #fff; padding: 0.3rem 0.8rem; font-size: 0.9rem;">&#8592; Back</a>
+    <span class="bg__blur" style="top: 5%; left: 10%;"></span>
+    <span class="bg__blur" style="bottom: 5%; right: 10%;"></span> 
+    <div class="bmi__container">
+        <h1 class="section__header"><span class="decorated__text">BMI</span> Calculator</h1>
+        <form id="bmiForm" class="bmi__form">
+            <label for="unit">Unit:</label>
+            <select id="unit" name="unit">
+                <option value="metric">kg / m</option>
+                <option value="imperial">lb / in</option>
+            </select>
+            <label for="weight"><br>Weight:</label>
+            <input type="number" id="weight" name="weight" required>
+            <label for="height">Height:</label>
+            <input type="number" step="0.01" id="height" name="height" required>
+            <div class="bmi__form__position">
+                <button type="submit" class="btn">Calculate BMI</button>
+            </div>
+        </form>
+        <h2 id="result"></h2>
+    </div>
+    <script>
+        const unitSelect = document.getElementById('unit');
+        const weightInput = document.getElementById('weight');
+        const heightInput = document.getElementById('height');
+        const bmiForm = document.getElementById('bmiForm');
+        const result = document.getElementById('result');
+        // Update input placeholders based on selected unit
+        function updatePlaceholders() {
+            if (unitSelect.value === 'metric') {
+                weightInput.placeholder = "Weight (kg)";
+                heightInput.placeholder = "Height (m)";
+            } else {
+                weightInput.placeholder = "Weight (lb)";
+                heightInput.placeholder = "Height (in)";
+            }
+        }
+        // BMI Calculation Part
+        unitSelect.addEventListener('change', updatePlaceholders);
+        updatePlaceholders();
+
+        bmiForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            const unit = unitSelect.value;
+            const weight = parseFloat(weightInput.value);
+            const height = parseFloat(heightInput.value);
+
+            if (height <= 0 || weight <=0) 
+            {
+                result.textContent = "Height/Weight must be greater than zero.";
+                return;
+            }
+
+            let bmi;
+            if (unit === 'metric') 
+            {
+                bmi = weight / (height * height);
+            } 
+            else 
+            {
+                result.textContent
+                bmi = (weight / (height * height)) * 703;
+            }
+
+            let category = "";
+            if (bmi < 18.5) category = "Underweight";
+            else if (bmi < 25) category = "Normal weight";
+            else if (bmi < 30) category = "Overweight";
+            else category = "Obese";
+
+            result.textContent = `Your BMI is ${bmi.toFixed(2)} (${category})`;
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 277f4a0..674b045 100644
--- a/index.html
+++ b/index.html
@@ -316,7 +316,7 @@ <h4>Contact</h4>
         <a href="#">Contact Us</a>
         <a href="#">Privacy Policy</a>
         <a href="#">Terms & Conditions</a>
-        <a href="#">BMI Calculator</a>
+        <a href="/bmi.html">BMI Calculator</a>
       </div>
     </footer>
     <div class="footer__bar">
