From 42195235600491ff4445fad7fa1c8ed5b9153a8e Mon Sep 17 00:00:00 2001
From: SAHIL NEGI <89196598+sahilnegi1@users.noreply.github.com>
Date: Thu, 13 Oct 2022 00:16:32 +0530
Subject: [PATCH] Updated bmi.html

updated with BMI calculator
---
 bmi.html | 203 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 134 insertions(+), 69 deletions(-)
diff --git a/bmi.html b/bmi.html
index 985e2c3..8042974 100644
--- a/bmi.html
+++ b/bmi.html
@@ -1,72 +1,137 @@
-<!DOCTYPE html>
-<html>
+<! DOCTYPE html>  
+<html>  
+    <head>  
+    <meta charset="utf-8">  
+    <title>  
+         Calculator using HTML Example  
+    </title>  
+    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">  
+    <!-- CSS property to create interactive  
+        calculator interface -->  
+    <style>  
+    html {  
+  height: 100vh;  
+  display: flex;  
+  align-items: center;  
+  justify-content: center;  
+  background-color: #2d3436;  
+  //background-image: linear-gradient(315deg, #8433A0 17%, #FFAC33 74%); 
 
-<head>
-	<!-- Include JS files -->
-	<script src="app.js"></script>
-</head>
+background-image: url('https://wallpaperaccess.com/full/834264.jpg'); 
 
-<body>
-	<center>
-		<style>
-			body {
-				background-image: url('https://wallpaperaccess.com/full/834264.jpg');
-			}
+  font-family: 'Cookie', cursive;  
+}  
+.title {  
+margin-bottom: 10px;  
+padding: 5px 0;  
+font-size: 40px;  
+font-weight: bold;  
+text-align: center;  
+color: white;  
+font-family: 'Cookie', cursive;  
+}  
+input[type=button] {  
+  width: 60px;  
+  height: 60px;  
+  float: left;  
+  padding: 0;  
+  margin: 5px;  
+  box-sizing: border-box;  
+  background: #D03396;
+border: none;  
+  font-size: 30px;  
+  line-height: 30px;  
+  border-radius: 50%;  
+  font-weight: 700;  
+  color: #3F1E55;  
+  cursor: pointer;    
+}  
+input[type=text] {  
+  width: 250px;  
+  height: 60px;  
+  float: left;  
+  padding: 0;  
+  box-sizing: border-box;  
+  border: none;  
+  background: none;  
+  color: red;  
+  text-align: right;  
+  font-weight: 700;  
+  font-size: 60px;  
+  line-height: 60px;  
+  margin: 0 25px;  
+  }  
+.calculator {  
+  background-color: #ffe821;  
+  box-shadow: 0px 0px 0px 10px #666;  
+  border: 5px solid black;  
+  border-radius: 10px;  
+}  
+#display {  
+  height: 40px;  
+  text-align: right;  
+  background-color: black;  
+  border: 3px solid white;  
+  font-size: 18px;  
+  left: 2px;  
+  top: 2px;  
+  color: red;  
+}  
+.btnTop {  
+  color: white;  
+  background-color: #ffd1d3;  
+  font-size: 14px;  
+  margin: auto;  
+  width: 50px;  
+  height: 25px;  
+}     
+    </style>  
+</head>  
+<body>  
+   
+    <div class = "title"  align="center">  
+        Calculate Your Body Mass Index
 
-			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>
+    </div> 
+  <div class = "title"  align="center">  
+    
+	As BMI=(Weight/Height*Height)
+    </div>     
+    <form name="Calculator" class = "calculator" >  
+<table border="2" align="center" cellpadding="15" cellspacing="12" bgcolor="#ffd1d3">  
+<tr>  
+<td>  
+<input type="text" name="Input" Size="35" id="display">  
+<br>  
+</td>  
+</tr>  
+<tr>  
+<td>  
+<input type="button" name = "one" style="font-size:30px" value=" 1 " OnClick="Calculator.Input.value += '1'">  
+<input type="button" name = "two" style = "font-size:30px" value=" 2 " OnCLick="Calculator.Input.value += '2'">  
+<input type="button" name = "three" style="font-size:30px" value=" 3 " OnClick="Calculator.Input.value += '3'">  
+<input type="button" name="add" class ="btnTop" style="font-size:30px" value=" + " OnClick="Calculator.Input.value += ' + '">  
+<br>  
+<input type="button" name = "four" style="font-size:30px" value=" 4 " OnClick="Calculator.Input.value += '4'">  
+<input type="button" name = "five" style="font-size:30px" value=" 5 " OnCLick="Calculator.Input.value += '5'">  
+<input type="button" name = "six" style="font-size:30px" value=" 6 " OnClick="Calculator.Input.value += '6'">  
+<input type="button" name = "minus" style="font-size:30px" value=" - " OnClick="Calculator.Input.value += ' - '">  
+<br>  
+<input type="button" name = "seven" style="font-size:30px" value=" 7 " OnClick="Calculator.Input.value += '7'">  
+<input type="button" name = "eight" style="font-size:30px" value=" 8 " OnCLick="Calculator.Input.value += '8'">  
+<input type="button" name = "nine" style="font-size:30px" value=" 9 " OnClick="Calculator.Input.value += '9'">  
+<input type="button" name = "mul" style="font-size:30px" value=" * "   
+OnClick="Calculator.Input.value += ' * '">  
+<br>  
+<input type="button" name = "clear" style="font-size:30px" value=" c " OnClick="Calculator.Input.value = ''">  
+<input type="button" name="zero" style="font-size:30px" value=" 0 " OnClick="Calculator.Input.value += '0'">  
+<input type="button" name="DoIt" style="font-size:30px" value=" = " OnClick="Calculator.Input.value = eval(Calculator.Input.value)">  
+<input type="button" name="div" style="font-size:30px" value=" / " OnClick="Calculator.Input.value += ' / '">  
+<br>  
+</td>  
+  
+</tr>  
+</table>  
+</form>  
+</body>  
+</html>     
