Added Bmi calculator

siddhi-244 · web-flow · commit a0ce2f60c0a3 · 2021-07-09T15:03:39.000+05:30
diff --git a/bmi-calculator/index.html b/bmi-calculator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>BMI CALCULATOR</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<div>
+		<h2>BMI CALCULATOR</h2>
+		<p class="text">Height</p>
+		<input type="text" id="h" >
+		<p class="text">Weight</p>
+		<input type="text" id="w">
+		<p id="result"></p>
+		<button id="btn" onclick="bmi()">Calculate</button>
+		<p id="info">Please enter height[cm] and weight [kg]</p>
+	</div>
+	<script type="text/javascript" src="script.js"></script>
+
+</body>
+</html>
diff --git a/bmi-calculator/script.js b/bmi-calculator/script.js
@@ -0,0 +1,7 @@
+function bmi(){
+	let h=document.getElementById("h").value;
+	let w=document.getElementById("w").value;
+	let ans=w/(h/100*h/100);
+	let bmio=(ans.toFixed(2));
+	document.getElementById("result").innerHTML="Your BMI is "+bmio;
+}
diff --git a/bmi-calculator/style.css b/bmi-calculator/style.css
@@ -0,0 +1,67 @@
+body{
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	background-image: linear-gradient(120deg,#ff6b6b,#5f27cd);
+	min-height: 100vh;
+
+}
+div{
+	width: 500px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	background-color: #fff;
+	transform: translate(-50%,-50%);
+	padding: 20px;
+	border-radius: 10px;
+	box-shadow: 1px 1px 20px #ee5253;
+
+}
+h2{
+	font-size: 30px;
+	font-weight: 600;
+}
+.text{
+	text-align: left;
+	margin-left: 150px;
+}
+#w,#h{
+	color:#222f3e;
+	text-align: left;
+	font-size: 20px;
+	font-weight: 200;
+	outline: none;
+	border:none;
+	background: none;
+	border-bottom: 1px solid #341f97;
+	width: 200px;
+}
+#w:focus,#h:focus{
+	border-bottom: 2px solid #841f97;
+	width: 300px;
+	transition: .5s;
+}
+
+#result{
+	color:#341f97;
+}
+#btn{
+	margin-top: 10px;
+	border:none;
+	color: #fff;
+	background-image: linear-gradient(120deg,#ff6b6b,#5f27cd);
+	width: 150px;
+	padding: 10px;
+	border-radius: 30px;
+	outline: none;
+	cursor: pointer;
+}
+#btn:hover{
+	box-shadow: 1px 1px 10px  #341f97; 
+
+}
+#info{
+	font-size: 12px;
+	
+}
