Merge pull request #162 from siddhi-244/siddhi

shloka-gupta · web-flow · commit 32e8020dbc63 · 2021-07-09T20:52:45.000+05:30
ADDED BMI CALCULATOR
diff --git a/Index.md b/Index.md
@@ -52,3 +52,4 @@
 | [Image Filter App]()                                                                                                            |An Awesome Image Filter App written in Html,Css,Javascript and CamanJS.|
 | [Form Validation](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/form-validation)                         |A basic sign up page with all the validations in javascript.   |     
 | [Age Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/age-calculator)                           | A website which can be used to calculate age of a person in days,months and years . |
+| [BMI Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/bmi-calculator)                           | A basic website which can be used to calculate body mass index |
diff --git a/bmi-calculator/README.md b/bmi-calculator/README.md
@@ -0,0 +1,31 @@
+### BMI Calculator
+BMI calculator can be used to calculate body mass index of people.
+
+### Use of the Project:
+ It can be used in gyms etc to check if a person is overweight or underweight.
+
+### Used Technologies
+  * HTML5
+  * CSS3
+  * JavaScript
+
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+- Start Calculating!!
+--- 
+
+## Screenshots 
+![Screenshot (35)](https://user-images.githubusercontent.com/69195262/125057793-3d825f00-e0c7-11eb-8a87-a80ecf6603e1.png)
+
+
diff --git a/bmi-calculator/index.html b/bmi-calculator/index.html
@@ -0,0 +1,22 @@
+<!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,8 @@
+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,68 @@
+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;
+	
+}
+
