second js project

AryanMittal11 · Jul 26, 2024 · f5cb020 · f5cb020
1 parent 14a4bff
commit f5cb020
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 0 deletions.
diff --git a/BMI Calculator/index.html b/BMI Calculator/index.html
@@ -0,0 +1,28 @@
+<!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>
+  </head>
+  <body>
+    <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/BMI Calculator/script.js b/BMI Calculator/script.js
@@ -0,0 +1,26 @@
+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 result = document.querySelector("#results")
+
+  if (height == " " || height < 0 || isNaN(height)){
+    result.innerHTML = `Please Enter valid height ${height}`
+  } else if (weight == " " || weight < 0 || isNaN(weight)){
+    result.innerHTML = `Please Enter valid weight ${weight}`
+  } else {
+    const bmi = (weight / ((height * height) / 10000)).toFixed(2)
+    result.innerHTML = `<span>${bmi}</span>`
+
+    if (bmi < 18.6){
+      result.innerHTML = `<span>${bmi} <br> Under Weight </span>`
+    } else if (bmi >= 18.6 && bmi <=24.9){
+      result.innerHTML = `<span>${bmi} <br> Normal Range </span>`
+    } else {
+      result.innerHTML = `<span>${bmi} <br> Over Weight </span>`
+    }
+  }
+})
diff --git a/BMI Calculator/style.css b/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;
+
+  }
+