Skip to content

Commit 5c4a93f

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #201 from tanvi355/issue#184
BMI calculator using Flask
2 parents 5bb119b + cbc2e2c commit 5c4a93f

File tree

5 files changed

+167
-6
lines changed

5 files changed

+167
-6
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>

‎Index.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@
6161
| [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|
6262
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time . |
6363
| [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form) | A basic contact form having send and reset button. |
64-
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |
65-
| [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone) | A project which aims to clone YouTube UI with responsiveness by using HTML & CSS. |
66-
| [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application) | Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them. |
67-
| [Typing Speed Test Website](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Typing%20Speed%20Test%20Website) | This website is used to check the typing speed of the user. It will the give the information of how many seconds require for typing the particular sentence. |
68-
| [Breaking Bad Characters](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/breaking-bad-characters) | A single page web application that uses the breaking bad API to display and filter characters from the show |
64+
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |
65+
| [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone) | A project which aims to clone YouTube UI with responsiveness by using HTML & CSS. |
66+
| [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application) | Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them. |
67+
| [Typing Speed Test Website](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Typing%20Speed%20Test%20Website) | This website is used to check the typing speed of the user. It will the give the information of how many seconds require for typing the particular sentence. |
68+
| [Breaking Bad Characters](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/breaking-bad-characters) | A single page web application that uses the breaking bad API to display and filter characters from the show |
6969
| [Simon Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Simon_Game) |A basic memory game in which there are 4 boxes of different colors and one box is blinked. The user has to click the boxes blinked and also has to click the previous blinked boxes as well.|
7070
| [Javascript Color Change App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/JAVASCRIPT%20BUTTON%20APP) | It is a basic web app where the user can select a color from the options that are given on the web app and as he clicks on that option, all the buttons background color changes to that color. |
7171
| [JavaScript tip calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Tip%20Calculator) | This script consists of user input--> total bill amount and bill percent and it calculates the tip amount and the total bill. |
7272
| [Blackjack Game](https://github.com/TheArushiSingh/Web-dev-mini-projects/tree/main/Blackjack%20Game) | The player has to get a hand with a value as close to 21 as possible without going over. A hand that goes over 21 is a bust. Each player has to beat the dealer's hand in order to win. |
7373
| [Tribute Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/TRIBUTE%20PAGE) | This is a tribute web page for covid warriors. Have built it using HTML, CSS, JAVASCRIPT. |
74-
74+
| [BMI Calculator (Flask)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/BMI%20Calculator%20(Flask))|This is a simple BMI calculator built using HTML, CSS, Python and Flask framework.|

0 commit comments

Comments
 (0)