Skip to content

Commit 36c3b00

Browse files
Swapnil-2503Swapnil-2503
authored
website using html css and python flask
1 parent 2300867 commit 36c3b00

File tree

5 files changed

+156
-0
lines changed

5 files changed

+156
-0
lines changed

‎BMI Calculator/README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# BMI Calculator Project
2+
3+
This is a simple BMI (Body Mass Index) Calculator web application built using Python and Flask. It allows users to calculate their BMI based on their weight and height, and it provides an interpretation of the BMI category.
4+
5+
## Project Structure
6+
7+
The project consists of the following files:
8+
9+
- `app.py`: This is the main Python script that contains the Flask application. It handles the server-side calculations and serves the web pages.
10+
- `templates/`: This folder contains the HTML templates used for rendering the user interface. It includes two templates:
11+
- `index.html`: The main page of the BMI calculator where users can enter their weight and height.
12+
- `result.html`: The result page that displays the calculated BMI, its interpretation, and additional information about BMI categories.
13+
- `styles.css`: The CSS file responsible for styling the user interface of the BMI calculator.
14+
15+
## BMI Categories
16+
17+
The BMI calculator provides interpretation for BMI categories as follows:
18+
19+
- Underweight: less than 18.5
20+
- Normal weight: 18.5 - 24.9
21+
- Overweight: 25 - 29.9
22+
- Obese: 30 or greater

‎BMI Calculator/app.py

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
from flask import Flask, render_template, request
2+
3+
app = Flask(__name__)
4+
5+
def calculate_bmi(weight, height):
6+
height_in_meters = height / 100
7+
bmi = weight / (height_in_meters ** 2)
8+
return bmi
9+
10+
def interpret_bmi(bmi):
11+
if bmi < 18.5:
12+
return "Underweight"
13+
elif 18.5 <= bmi < 24.9:
14+
return "Normal weight"
15+
elif 25 <= bmi < 29.9:
16+
return "Overweight"
17+
else:
18+
return "Obese"
19+
20+
@app.route("/", methods=["GET", "POST"])
21+
def index():
22+
if request.method == "POST":
23+
weight = float(request.form["weight"])
24+
height = float(request.form["height"])
25+
26+
bmi = calculate_bmi(weight, height)
27+
interpretation = interpret_bmi(bmi)
28+
29+
return render_template("result.html", bmi=bmi, interpretation=interpretation)
30+
31+
return render_template("index.html")
32+
33+
if __name__ == "__main__":
34+
app.run(debug=True)

‎BMI Calculator/styles.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f8f8f8;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
.container {
9+
max-width: 400px;
10+
margin: 30px auto;
11+
padding: 20px;
12+
border: 1px solid #ccc;
13+
border-radius: 5px;
14+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15+
background-color: #fff;
16+
}
17+
18+
h1 {
19+
text-align: center;
20+
}
21+
22+
label {
23+
display: block;
24+
margin-bottom: 5px;
25+
}
26+
27+
input {
28+
width: 100%;
29+
padding: 8px;
30+
margin-bottom: 10px;
31+
border: 1px solid #ccc;
32+
border-radius: 4px;
33+
}
34+
35+
input[type="submit"] {
36+
background-color: #4CAF50;
37+
color: #fff;
38+
cursor: pointer;
39+
}
40+
41+
input[type="submit"]:hover {
42+
background-color: #45a049;
43+
}
44+
45+
a {
46+
display: block;
47+
text-align: center;
48+
color: #007bff;
49+
text-decoration: none;
50+
}
51+
52+
a:hover {
53+
text-decoration: underline;
54+
}

‎BMI Calculator/templates/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>BMI Calculator</title>
5+
<link rel="stylesheet" href="../styles.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<h1>BMI Calculator</h1>
10+
<p>
11+
Welcome to the BMI Calculator! Enter your weight and height below to calculate your Body Mass Index (BMI).
12+
</p>
13+
<form method="post" action="/">
14+
<label for="weight">Weight (kg):</label>
15+
<input type="number" step="0.01" name="weight" required><br>
16+
<label for="height">Height (cm):</label>
17+
<input type="number" step="0.01" name="height" required><br>
18+
<input type="submit" value="Calculate">
19+
</form>
20+
</div>
21+
</body>
22+
</html>

‎BMI Calculator/templates/result.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>BMI Calculator - Result</title>
5+
<link rel="stylesheet" href="../styles.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<h1>Result</h1>
10+
<p>Your BMI is: {{ bmi }}</p>
11+
<p>Interpretation: {{ interpretation }}</p>
12+
<p>
13+
BMI Categories:
14+
<ul>
15+
<li>Underweight: less than 18.5</li>
16+
<li>Normal weight: 18.5 - 24.9</li>
17+
<li>Overweight: 25 - 29.9</li>
18+
<li>Obese: 30 or greater</li>
19+
</ul>
20+
</p>
21+
<a href="/">Calculate Again</a>
22+
</div>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)