Update index.html

reetiraj123 · web-flow · commit 164e5be26fd3 · 2025-08-02T14:19:36.000+05:30
diff --git a/index.html b/index.html
@@ -1,28 +1,95 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="style.css">
-    <title>BMI Calculator</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>BMI Calculator</title>
+  <style>
+    /* Simple styles for the form and container */
+    .container {
+      max-width: 400px;
+      margin: 50px auto;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+    }
+    input[type="text"] {
+      width: 100%;
+      padding: 8px;
+      margin-top: 5px;
+      margin-bottom: 15px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+    }
+    button {
+      padding: 10px 15px;
+      border-radius: 4px;
+      border: none;
+      background-color: #007bff;
+      color: white;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    button:hover {
+      background-color: #0056b3;
+    }
+    #results {
+      margin-top: 20px;
+      font-weight: bold;
+      color: #333;
+    }
+    #weight-guide h3 {
+      margin-bottom: 6px;
+    }
+  </style>
 </head>
 <body>
-    <div class="container">
+  <div class="container">
     <h1>BMI Calculator</h1>
-    <form>
-    <p><label><b>Height(cm): </b></label><input type="text" id="height"></p>
-    <p><label><b>Weight(kg): </b></label><input type="text" id="weight"></p>
-    <button>Calculate</button>
-    <div id="results"></div>
-    <div id="weight-guide">
-    <h3>BMI Weight Guide</h3>
-    <p>Under Weight = Less than 18.6</p>
-    <p>Normal Range = 18.6 and 24.9</p>
-    <p>Overweight = Greater than 24.9</p>
-    </div>
+    <form id="bmi-form">
+      <label><b>Height (cm):</b></label>
+      <input type="text" id="height" placeholder="Enter height in cm" />
+      <label><b>Weight (kg):</b></label>
+      <input type="text" id="weight" placeholder="Enter weight in kg" />
+      <button type="submit">Calculate</button>
+      <div id="results"></div>
+      <div id="weight-guide">
+        <h3>BMI Weight Guide</h3>
+        <p>Under Weight = Less than 18.6</p>
+        <p>Normal Range = 18.6 and 24.9</p>
+        <p>Overweight = Greater than 24.9</p>
+      </div>
     </form>
-    </div>
+  </div>
+
+  <script>
+    document.getElementById('bmi-form').addEventListener('submit', function (event) {
+      event.preventDefault();
+
+      const heightInput = document.getElementById('height').value.trim();
+      const weightInput = document.getElementById('weight').value.trim();
+      const resultsDiv = document.getElementById('results');
+
+      const height = parseFloat(heightInput);
+      const weight = parseFloat(weightInput);
+
+      if (
+        isNaN(height) ||
+        isNaN(weight) ||
+        height <= 0 ||
+        weight <= 0
+      ) {
+        resultsDiv.textContent = 'Please enter valid positive numbers for height and weight.';
+        return;
+      }
+
+      const heightInMeters = height / 100;
+      const bmi = weight / (heightInMeters * heightInMeters);
+      resultsDiv.textContent = `Your BMI is ${bmi.toFixed(2)}`;
+    });
+  </script>
 </body>
-<script src="script.js"></script>
 </html>
