Skip to content

Commit a4880df

Browse files
tanvi355tanvi355
committed
BMI calculator using Flask
1 parent 5bb119b commit a4880df

File tree

4 files changed

+161
-0
lines changed

4 files changed

+161
-0
lines changed

‎BMI Calculator (Flask)/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# BMI Calculator using Flask
2+
3+
A simple calculator used to calculate the Body Mass Index (BMI).
4+
5+
## Technologies used:
6+
7+
- HTML
8+
- CSS
9+
- Python
10+
- Flask
11+
12+
## How to use:
13+
14+
1. Fork and clone [this](https://github.com/Ayushparikh-code/Web-dev-mini-projects) project.
15+
2. In your command prompt, navigate to **Web-dev-mini-projects/BMI Calculator (Flask)**.
16+
3. Run this app using the command `python app.py`.
17+
4. Now, navigate to `http://127.0.0.1:5000/` in your web browser to use the calculator.
18+
19+
## Screenshot
20+
21+
<img src="https://imgur.com/PoJcIsR.png"/>

‎BMI Calculator (Flask)/app.py

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
from flask import Flask, render_template, request
2+
3+
# declare the app
4+
app = Flask(__name__)
5+
6+
# start an app route
7+
@app.route("/")
8+
def main():
9+
return render_template("index.html")
10+
11+
12+
# route for bmi calculation result
13+
@app.route("/bmi", methods=["GET", "POST"])
14+
def calculate():
15+
try:
16+
w = float(request.form.get("weight"))
17+
h = float(request.form.get("height"))
18+
if w and h:
19+
bmi = round(w / ((h / 100) ** 2), 3)
20+
return render_template("index.html", bmi=bmi)
21+
except ValueError as error:
22+
error = "Please enter all the values"
23+
return render_template("index.html", error=error)
24+
25+
26+
if __name__ == "__main__":
27+
app.run(debug=True)

‎BMI Calculator (Flask)/static/style.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
body {
2+
font-size: 20px;
3+
text-align: center;
4+
background: #ace1af;
5+
font-family: "Quicksand", sans-serif;
6+
}
7+
8+
h1,
9+
h2 {
10+
text-align: center;
11+
padding-top: 25px;
12+
font-style: bold;
13+
}
14+
15+
table,
16+
th,
17+
td {
18+
border: 2px solid black;
19+
text-align: center;
20+
width: 50%;
21+
margin-left: auto;
22+
margin-right: auto;
23+
}
24+
25+
th {
26+
height: 45px;
27+
}
28+
29+
#calc_btn,
30+
#ht,
31+
#wt {
32+
padding: 7px;
33+
}

‎BMI Calculator (Flask)/templates/index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<!-- Bootstrap CSS -->
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9+
<!-- Stylesheets-->
10+
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}" />
11+
<!--Google Fonts-->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
15+
<title>BMI Calculator</title>
16+
</head>
17+
<body>
18+
<h1>
19+
<u>BMI Calculator using Flask</u>
20+
</h1>
21+
<br>
22+
<!--Calculator starts-->
23+
<div class="container text-center">
24+
<div class="row">
25+
<div class="col-sm">
26+
<form action="/bmi" method="POST">
27+
<label for="height" id="ht">Height</label>
28+
<input type="text" name="height" class="u-full-width" placeholder="Height (in cm)" id="ht" />
29+
<br>
30+
<label for="weight" id="wt">Weight</label>
31+
<input type="text" name="weight" class="u-full-width" placeholder="Weight (in kg)" id="wt" />
32+
<br>
33+
<br>
34+
<input type="submit" value="Calculate" id="calc_btn" /> {% if bmi %} <div class="alert">
35+
<p>Your BMI is {{bmi}}</p>
36+
</div> {% else %} <div class="alert">
37+
<p>{{error}}</p>
38+
</div> {% endif %}
39+
</form>
40+
</div>
41+
</div>
42+
</div>
43+
<!--Calculator ends-->
44+
<hr>
45+
<!--BMI values chart-->
46+
<div class="container text-center">
47+
<div class="row">
48+
<div class="col-sm">
49+
<h2>
50+
<u>BMI Chart</u>
51+
</h2>
52+
<br>
53+
<table>
54+
<tr>
55+
<th>BMI Value</th>
56+
<th>Category</th>
57+
</tr>
58+
<tr>
59+
<td>
60+
<18.5 </td>
61+
<td>Underweight</td>
62+
</tr>
63+
<tr>
64+
<td>18.5 - 24.9</td>
65+
<td>Normal weight</td>
66+
</tr>
67+
<tr>
68+
<td>25 - 29.9</td>
69+
<td>Overweight</td>
70+
</tr>
71+
<tr>
72+
<td>>=30</td>
73+
<td>Obesity</td>
74+
</tr>
75+
</table>
76+
</div>
77+
</div>
78+
</div>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)