SRI KRISHNA COLLEGE OF TECHNOLOGY
An Autonomous Institution | Accredited by NAAC with 'A' Grade
Affiliated to Anna University | Approved by AICTE
KOVAIPUDUR, COIMBATORE 641042
BMI CALCULATOR
MINI PROJECT REPORT
Submitted by
HARINI SRI K 727822TUIT055
in partial fulfillment for the award of the degree of
BACHELOR OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY
APRIL 2025
2
ABSTRACT
In the modern digital era, applications that simplify everyday tasks can significantly
enhance user experience. The BMI Calculator is a web-based application designed using Python,
Flask, HTML, and CSS to provide users with essential health-related information. This
interactive tool calculates the user's Body Mass Index (BMI) based on the entered height and
weight, and categorizes it into different health ranges, such as underweight, normal, overweight,
or obese. The system's backend is powered by Python and Flask, which handle user input,
perform BMI computations, and ensure seamless functionality.
The HTML and CSS frontend offers a user-friendly and responsive interface, making the
application accessible across different devices, including desktops, tablets, and smartphones.
Flask’s lightweight and efficient architecture ensures real-time processing of input data,
delivering instant results to the user. A key feature of the BMI Calculator is its ability to
eliminate manual calculations, providing a quick and accurate solution for users of all ages. The
application also integrates error-handling mechanisms to manage invalid inputs, ensuring
smooth and reliable operation.
Future enhancements may include personalized health tips based on BMI results, calorie
recommendations, integration with fitness trackers, and social media sharing options, making
the tool even more engaging and practical. By combining a Flask-based backend with a
structured HTML-CSS frontend, the BMI Calculator serves as an example of how simple yet
effective web applications can enhance user convenience. This project showcases the power of
Flask for backend development and demonstrates the importance of well-designed user
interfaces in creating an intuitive and efficient digital experience.
3
TABLE OF CONTENTS
CHAPTER TITLE PAGE
NO. NO.
1 INTRODUCTION 1
1.1 BMI CALCULATOR 1
1.2 OBJECTIVE 2
2 PROPOSED SYSTEM 3
3.1 OVERVIEW 3
3 IMPLEMENTATION AND RESULTS 4
3.1 SYSTEM IMPLEMENTATION 4
3.2 SYSTEM SPECIFICATION 5
3.3 CODE 6
3.4 RESULT 10
4 CONCLUSION AND FUTURE WORK 11
4.1 CONCLUSION 11
5 REFERENCES 12
4
INTRODUCTION
CHAPTER 1
1.1 BMI Calculator
The Body Mass Index (BMI) Calculator is a web-based application designed to
help users determine their BMI based on their weight and height. BMI is an essential
metric used to assess whether an individual is underweight, normal weight, overweight, or
obese. The application provides users with instant results, categorizing their BMI status
and offering insights into their health.
Traditional methods of BMI calculation involve manual computation, which can be
time-consuming and error-prone. This web application automates the process, ensuring
accuracy and a user-friendly experience. The system is developed using Python and Flask as
the backend framework, ensuring efficient handling of user input and calculations. The
HTML and CSS frontend offers an interactive and visually appealing interface where users
can input their weight and height to receive instant BMI results.
To enhance accuracy and usability, the system incorporates various mathematical functions
to ensure precise calculations without manual effort. The BMI Calculator aims to provide a
seamless experience by integrating automated calculations with a responsive and accessible
web interface. Additionally, the system can be extended to include features such as health
recommendations, diet suggestions, and fitness tracking. This Flask-based web application
serves as a practical tool for individuals looking to monitor their health and fitness
effectively.
5
OBJECTIVE
The primary objective of this project is to develop a web-based BMI Calculator that
allows users to determine their BMI based on their weight and height. The system aims to
provide an interactive and user-friendly platform that simplifies health-related calculations,
eliminating the need for manual computation.
The BMI Calculator is implemented using Python and Flask as the backend framework,
ensuring efficient data processing and dynamic content rendering. The frontend, designed
with HTML and CSS, offers an intuitive interface where users can input their weight and
height and receive real-time results. The system incorporates mathematical functions to
perform precise BMI calculations and categorizes the result into different health ranges.
To enhance usability, the system ensures accurate computations and a seamless user
experience across different devices. The web application is designed to be lightweight and
responsive, allowing easy access for users of all ages. Future enhancements may include
additional features such as health tips, calorie intake recommendations, fitness routines, and
integration with wearable devices. By leveraging modern web technologies, the BMI
Calculator serves as a practical and efficient tool for users seeking quick and accurate health
insights.
CHAPTER 2
PROPOSED SYSTEM
2.1 OVERVIEW
The proposed BMI Calculator system is a web-based application designed to provide users
with essential information regarding their body mass index. The system calculates the BMI
using the formula: BMI = weight(kg) / height(m) * height (m)
The application determines whether the user is underweight, normal weight, overweight, or
obese based on predefined BMI categories. This tool eliminates the need for manual
calculations, offering a quick and accurate solution.
The application is developed using Python and Flask as the backend framework, ensuring
efficient handling of computations and user requests. The HTML and CSS frontend
provides an intuitive interface where users can input their weight and height and receive
real-time results. The system is designed to be accessible across multiple devices, ensuring
responsiveness and ease of use.
A key feature of the system is its clean and simple layout, making it easy for users to
interact with the calculator. Additionally, the application may include enhancements such as
dietary recommendations, exercise tips, and personalized health insights in future updates.
To enhance usability and accuracy, error-handling mechanisms are implemented to manage
incorrect or invalid inputs, ensuring smooth user interactions.
Future extensions may also include integration with fitness tracking devices, historical BMI
data storage, and personalized health plans. By integrating Flask for backend processing and
a structured HTML-CSS frontend, the BMI Calculator serves as a practical and interactive
tool for users of all ages.
4
CHAPTER 3
IMPLEMENTATION AND RESULTS
3.1 SYSTEM IMPLEMENTATION
The implementation of the BMI Calculator follows a structured approach
consisting of backend development, frontend design, and system deployment.
The backend is developed using Python and Flask, where Flask acts as the web
framework to handle HTTP requests and manage user input. The system
calculates BMI based on the weight and height provided by the user and
classifies the result into different BMI categories.
Flask ensures smooth communication between the client and server, processing the
user’s input and returning accurate results dynamically. The frontend is built using
HTML and CSS, designed to provide a clean, intuitive, and responsive interface for
users. CSS is used to enhance the aesthetics, ensuring a visually appealing and modern
design. Additionally, JavaScript may be incorporated to improve user interactions and
provide real-time feedback without requiring page reloads.
To ensure seamless operation, the system undergoes rigorous testing for accuracy in
calculations and robustness in handling invalid inputs. Error-handling mechanisms are
integrated to detect incorrect weight or height formats and prevent crashes. The
application is optimized for cross-device compatibility, making it accessible on
desktops, tablets, and mobile devices.
5
3.2 SYSTEM SPECIFICATION
The BMI Calculator system is designed to operate efficiently using a
combination of software and hardware resources. It is developed using Python as the
backend language, with Flask as the framework to manage HTTP requests and
execute calculations. The frontend is built using HTML, CSS, and JavaScript,
ensuring a clean, responsive, and interactive user experience.
The application is compatible with Windows, macOS, and Linux operating systems and can
be accessed on various devices, including desktops, tablets, and mobile phones. The
hardware requirements include a minimum dual-core processor, 2GB RAM, and at least
200MB of storage for project files and dependencies.
The UI consists of input fields for weight and height, displaying the user's BMI and the
corresponding category. Security measures include input validation to prevent incorrect
entries and Flask’s built-in security features to ensure safe interactions. Future enhancements
may include database integration for storing user history, additional health insights, and
mobile app adaptation. The BMI Calculator is designed to be scalable, interactive, and
reliable, making it a practical tool for users to monitor their health.
3.3 CODE
//[Link]
from flask import Flask, render_template, request
app = Flask( name )
def calculate_bmi(weight, height):
bmi = weight / (height ** 2)
if bmi < 18.5:
category = "Underweight"
elif 18.5 <= bmi < 24.9:
category = "Normal weight"
elif 25 <= bmi < 29.9:
6
category = "Overweight"
else:
category = "Obese"
return round(bmi, 2), category
@[Link]("/", methods=["GET", "POST"])
def index():
bmi_result = None
category = None
if [Link] == "POST":
try:
weight = float([Link]["weight"])
height = float([Link]["height"])
bmi_result, category = calculate_bmi(weight, height)
except ValueError:
bmi_result = "Invalid input. Please enter valid numbers."
return render_template("[Link]", bmi_result=bmi_result,
category=category)
if name == " main ":
[Link](debug=True)
// [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #89CFF0, #6A5ACD);
display: flex;
justify-content: center;
7
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
text-align: center;
width: 350px;
transition: transform 0.3s ease-in-out;
}
.container:hover {
transform: scale(1.05);
}
h2 {
color: #333;
margin-bottom: 15px;
font-size: 22px;
}
label {
display: block;
margin: 12px 0 6px;
font-weight: bold;
color: #555;
font-size: 14px;
}
input {
width: 100%;
padding: 10px;
border: none;
border-radius: 6px;
background: #f4f4f4;
outline: none;
8
font-size: 16px;
text-align: center;
transition: 0.3s;
}
input:focus {
background: #e0e0e0;
border: 2px solid #6A5ACD;
}
button {
background: linear-gradient(135deg, #6A5ACD, #89CFF0);
color: white;
padding: 12px;
border: none;
border-radius: 6px;
cursor: pointer;
width: 100%;
font-size: 16px;
font-weight: bold;
transition: 0.3s ease-in-out;
}
button:hover {
background: linear-gradient(135deg, #5D3FD3, #5AA9E6);
transform: scale(1.05);
}
.result {
margin-top: 15px;
font-size: 18px;
color: #28a745;
font-weight: bold;
}
</style>
9
</head>
<body>
<div class="container">
<h2>⚖ BMI Calculator 🏋</h2>
<form method="post">
<label for="weight">Enter your Weight (kg):</label>
<input type="number" id="weight" name="weight" step="0.1"
required>
<label for="height">Enter your Height (m):</label>
<input type="number" id="height" name="height" step="0.01"
required>
<button type="submit"> Calculate </button>
</form>
{% if bmi_result is not none %}
<p class="result"> Your BMI is <strong>{{ bmi_result }}</strong>
({{ category }})</p>
{% endif %}
</div>
</body>
</html>
10
3.4 RESULTS:
11
CHAPTER 4
CONCLUSION
4.1 CONCLUSION
The BMI Calculator project successfully demonstrates the capabilities of web-based
applications in providing a seamless and interactive experience for users. By leveraging
Python, Flask, HTML, and CSS, this system efficiently calculates a user’s BMI and
categorizes it into different health ranges. The project eliminates the need for manual
calculations, ensuring accuracy and convenience for users of all ages.
Through a well-structured implementation, the system offers a user-friendly and responsive
interface, allowing users to quickly obtain results by simply entering their weight and height.
The integration of error-handling mechanisms ensures smooth operations, preventing invalid
inputs from disrupting the user experience.
As a scalable project, the BMI Calculator can be enhanced with additional features such as
health recommendations, integration with fitness tracking apps, and dietary guidance to
make the application more engaging. Future developments could also involve mobile app
deployment and support for multiple languages to increase accessibility.
Overall, this project highlights the importance of simple yet effective web applications in
streamlining everyday health tracking. By combining efficient backend processing with an
engaging frontend, the BMI Calculator serves as an example of how digital solutions can
enhance health awareness and user experience in a practical manner.
12
CHAPTER 5
REFERENCES
[1] Guttag, J. V. (2016). Introduction to Computation and Programming
Using Python. MIT Press.
[2] Beazley, D. M. (2009). Python Essential Reference. Addison-Wesley
Professional.
[3] Severance, C. (2016). Python for Everybody: Exploring Data Using
Python 3. CreateSpace Independent Publishing.
[4] Freeman, E., & Robson, E. (2018). Head First Python: A Brain-Friendly
Guide. O'Reilly Media.
[5] Robbins, J. (2018). Web Design with HTML, CSS, JavaScript and jQuery
Set. John Wiley & Sons.
[6] Duckett, J. (2014). JavaScript and jQuery: Interactive Front-End Web
Development. John Wiley & Sons.
[7] Flanagan, D. (2020). JavaScript: The Definitive Guide. O'Reilly Media.
[8] Keith, J. (2010). HTML5 for Web Designers. A Book Apart.
[9] Krug, S. (2013). Don't Make Me Think, Revisited: A Common Sense
Approach to Web Usability. New Riders.
[10] Mozilla Developer Network (MDN). (2024). HTML, CSS, JavaScript,
and Web API Documentation. Retrieved from [Link]