BMI Calculator

Shekhar-Raj · Nov 3, 2024 · 2458fed · 2458fed
1 parent a0e3622
commit 2458fed
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/projects/02_BMI_Calculator/index.html b/projects/02_BMI_Calculator/index.html
@@ -0,0 +1,35 @@
+<!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" />
+    <link rel="stylesheet" href="../styles.css" />
+    <title>BMI Calculator</title>
+  </head>
+  <body>
+    <nav>
+      <a href="/" aria-current="page">Home</a>
+      <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
+        >Youtube channel</a
+      >
+    </nav>
+    <div class="container">
+      <h1>BMI Calculator</h1>
+      <form>
+        <p><label>Height in CM: </label><input type="text" id="height" /></p>
+        <p><label>Weight in KG: </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>
+    </div>
+  </body>
+  <script src="script.js"></script>
+</html>
diff --git a/projects/02_BMI_Calculator/script.js b/projects/02_BMI_Calculator/script.js
@@ -0,0 +1,24 @@
+const form = document.querySelector('form');
+
+form.addEventListener('submit', function (e) {
+  e.preventDefault();
+
+  const height = parseInt(document.querySelector('#height').value);
+  const weight = parseInt(document.querySelector('#weight').value);
+  const results = document.querySelector('#results');
+
+  if (height === '' || height < 0 || isNaN(height)) {
+    results.innerHTML = `please enter a valid height ${height}`;
+  } else if (weight === '' || weight < 0 || isNaN(weight)) {
+    results.innerHTML = `please enter a valid weight ${weight}`;
+  } else {
+    const bmi = (weight / ((height * height) / 10000)).toFixed(2);
+    if (bmi < 18.6) {
+      results.innerHTML = `<span>BMI = ${bmi}</span> <p>Underweight</p>`;
+    } else if (bmi == 18.6 || bmi < 24.9) {
+      results.innerHTML = `<span>BMI = ${bmi}</span> <p>Normal Range</p`;
+    } else {
+      results.innerHTML = `<span>BMI = ${bmi}</span> <p>Overweight</p`;
+    }
+  }
+});
diff --git a/projects/02_BMI_Calculator/style.css b/projects/02_BMI_Calculator/style.css
@@ -0,0 +1,47 @@
+.container {
+    width: 575px;
+    height: 825px;
+
+    background-color: #797978;
+    padding-left: 30px;
+  }
+  #height,
+  #weight {
+    width: 150px;
+    height: 25px;
+    margin-top: 30px;
+  }
+
+  #weight-guide {
+    margin-left: 75px;
+    margin-top: 25px;
+  }
+
+  #results {
+    font-size: 35px;
+    margin-left: 90px;
+    margin-top: 20px;
+    color: rgb(241, 241, 241);
+  }
+
+  button {
+    width: 150px;
+    height: 35px;
+    margin-left: 90px;
+    margin-top: 25px;
+    background-color: #fff;
+    padding: 1px 30px;
+    border-radius: 8px;
+    color: #212121;
+    text-decoration: none;
+    border: 2px solid #212121;
+
+    font-size: 25px;
+  }
+
+  h1 {
+    padding-left: 15px;
+    padding-top: 25px;
+
+  }
+