Merge pull request prehans#17 from deltaTH/main

BMI calculator
bijaycodes · Oct 11, 2022 · 50127c5 · 50127c5
2 parents 187a3ad + 7ebee49
commit 50127c5
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,50 @@
+window.onload = () => {
+	let button = document.querySelector("#btn");
+
+	// Function for calculating BMI
+	button.addEventListener("click", calculateBMI);
+};
+
+function calculateBMI() {
+
+	/* Getting input from user into height variable.
+	Input is string so typecasting is necessary. */
+
+	let height = parseInt(document
+			.querySelector("#height").value);
+
+	/* Getting input from user into weight variable.
+	Input is string so typecasting is necessary.*/
+	let weight = parseInt(document
+			.querySelector("#weight").value);
+
+	let result = document.querySelector("#result");
+
+	// Checking the user providing a proper
+	// value or not
+	if (height === "" || isNaN(height))
+		result.innerHTML = "Provide a valid Height!";
+
+	else if (weight === "" || isNaN(weight))
+		result.innerHTML = "Provide a valid Weight!";
+
+	// If both input is valid, calculate the bmi
+	else {
+
+		// Fixing upto 2 decimal places
+		let bmi = (weight / ((height * height)
+							/ 10000)).toFixed(2);
+
+		// Dividing as per the bmi conditions
+		if (bmi < 18.6) result.innerHTML =
+			`Under Weight : <span>${bmi}</span>`;
+
+		else if (bmi >= 18.6 && bmi < 24.9)
+			result.innerHTML =
+				`Normal : <span>${bmi}</span>`;
+
+		else result.innerHTML =
+			`Over Weight : <span>${bmi}</span>`;
+	}
+
+}
diff --git a/bmi.html b/bmi.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<!-- Include JS files -->
+	<script src="app.js"></script>
+</head>
+
+<body>
+	<center>
+		<style>
+			body {
+				background-image: url('https://wallpaperaccess.com/full/834264.jpg');
+			}
+
+			h1 {
+				color: white;
+				text-align: center;
+			}
+
+			p {
+				color: white;
+			}
+
+			button {
+				background: #e2eaf0;
+				background-image: -webkit-linear-gradient(top, #e2eaf0, #2f3a40);
+				background-image: -moz-linear-gradient(top, #e2eaf0, #2f3a40);
+				background-image: -ms-linear-gradient(top, #e2eaf0, #2f3a40);
+				background-image: -o-linear-gradient(top, #e2eaf0, #2f3a40);
+				background-image: linear-gradient(to bottom, #e2eaf0, #2f3a40);
+				-webkit-border-radius: 28;
+				-moz-border-radius: 28;
+				border-radius: 28px;
+				font-family: Courier New;
+				color: #ffffff;
+				font-size: 30px;
+				padding: 10px 20px 10px 20px;
+				text-decoration: none;
+			}
+
+			button:hover {
+				background: #f7f7f7;
+				background-image: -webkit-linear-gradient(top, #f7f7f7, #030303);
+				background-image: -moz-linear-gradient(top, #f7f7f7, #030303);
+				background-image: -ms-linear-gradient(top, #f7f7f7, #030303);
+				background-image: -o-linear-gradient(top, #f7f7f7, #030303);
+				background-image: linear-gradient(to bottom, #f7f7f7, #030303);
+				text-decoration: none;
+			}
+		</style>
+		<div class="container">
+			<h1 color="white">BMI Calculator</h1>
+
+			<!-- Option for providing height
+			and weight to the user-->
+			<p>Height (in cm)</p>
+
+			<input type="text" id="height">
+
+			<p>Weight (in kg)</p>
+
+			<input type="text" id="weight">
+
+			<p><button id="btn">Calculate</button></p>
+
+			<div style="background-color:#5a5b5c" id="result"></div>
+		</div>
+
+	</center>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -63,6 +63,8 @@ <h1 class="pagetitle">Welcome to Fitness Factory</h1>
         <input type="text" name="" placeholder="Enter your address">
       </div>
       <button class="btn ">Submit</button>
+      <center><input class="btn " type=button onClick="location.href='bmi.html'"
+        value='BMI Calculator'></center>
     </form>
   </div>
   <div class="aboutus" id="AboutUs">