# Calorie Calculator in Django Python

In this article, we will create a web-based Calorie Calculator in Django Python web framework. It will calculate the calories required by a person daily based on a person’s height, weight, age, and gender.

## Installation and Project setup

Before starting our project, we need to make sure that our system has installed the latest version of python and Django.

To install django, we will use the following command

``pip install django``

To check the version of Django we installed, use the following command

``django-admin –version``

To create a Django project let’s first create a directory and then create a Django project inside that directory

To create a directory, use the following command

``mkdir foldername``

then enter that directory using the following command

``cd foldername``

To create a new project in Django, use the following command

``django-admin startproject calories(project name)``

now we need an application for our project, this application folder contains useful files like admin.py, views.py, etc…

To create an application, use the following commands

``cd calculatordjango-admin startapp app(application name)``

our project directory structure will follow the following structure:

In settings.py install the application which we created

``````INSTALLED_APPS = [
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app',
]
``````

## Formulas required to calculate calories

To calculate calories we have two formulas:

• To calculate calories for male we have formula BMR = 66.47 + (13.75 x weight in kg) + (5.003 x height in cm) – (6.755 x age in years)
• To calculate calories for female we have formula BMR = 655.1 + (9.563 x weight in kg) + (1.850 x height in cm) – (4.676 x age in years)

### Variables Required to calculate calories

Height in cm, weight in kg, age, and gender.

## Coding Calorie Calculator in Django Python

First, we will create a front end in this article we have used bootstrap 4.5 for an attractive user interface.

First, create a template directory in the app folder and then create an index.html file inside the template folder.

### In index.html

```<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calories Calculator</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<body>
<center>
<h1>Calories Calculator</h1>

<br>
<form method="POST">
{% csrf_token %}
<div class="form-group">
<input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button><br>
</form>
</div>
</center>

</body>
</html>```

We need to take input from the HTML interface so we are going to use the “POST” method to fetch data.

### In views.py

```def home(request):
if request.method == 'POST':
weight = request.POST['weight']
height = request.POST['height']
age = request.POST['age']
gender = request.POST['gender']

print("weight: ",weight)
print("height: ",height)
print("age: ",age)
print("gender: ",gender)

return render(request,'index.html')```

### In urls.py

```from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
path('',views.home,name='home'),
]```

### In index.html

```<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calories Calculator</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<body>
<center>
<h1>Calories Calculator</h1>

<br>
<form method="POST">
{% csrf_token %}
<div class="form-group">
<input type="number" name="weight" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select name="gender" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>

<button type="submit" class="btn btn-primary">Submit</button><br>
</form>
</div>
</center>
</body>
</html>```

Here we define the name parameter in the input tag to connect the front end to the back end.

``<input type="number" name="height" class="form-control" id="exampleInputPassword1">``

### Running Calorie Calculator in Django Python

To run the project use the following command in the terminal:

``Python manage.py runserver``

Note: open the terminal or command prop inside the project folder where the manage.py file is present.

### First Output:

You can get this type of output in the frontend

You can get this type of output in the backend

To check gender and calculate the BMR according to it we have to put an if statement in our code

```def home(request):
if request.method == 'POST':
weight = request.POST['weight']
height = request.POST['height']
age = request.POST['age']
gender = request.POST['gender']
print("weight: ",weight)
print("height: ",height)
print("age: ",age)
print("gender: ",gender)
if gender == 'male':
result = 66.47 + (13.75 * int(weight)) + (5.003 * int(height)) - (6.755 * int(age))
print(result,"######################")
return render(request,'index.html',{'result':result})
if gender == 'female':
result = 655.1 + (9.563 * int(weight)) + (1.850 * int(height)) - (4.676 * int(age))
print(result,"######################")
return render(request,'index.html',{'result':result})

return render(request,'index.html')```

Now check the result in terminal

Now we need to display the result in the front end so we will pass the result variable in context variable format in Django where we render our request.

``return render(request,'index.html',{'result':result})``

here we have defined `{'result':result}` this is now as a context variable formate

### Now in index.html

```  {% if result %}
<h3>Calories require for the day: {{result}} calories</h3>
</div>
<br>
{% endif %}```

To show the result from the backend we use jinja tags here we used `{{result}}` to show the result of the input.

### In index.html

```<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calories Calculator</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<body>
<center>
<h1>Calories Calculator</h1>

<br>

{% if result %}
<h3>Calories require for the day: {{result}} calories</h3>
</div>
<br>
{% endif %}

<form method="POST">
{% csrf_token %}
<div class="form-group">
<input type="number" name="weight" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select name="gender" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>

<button type="submit" class="btn btn-primary">Submit</button><br>
</form>
</div>
</center>

</body>
</html>```

### In views.py

```from django.shortcuts import render

def home(request):
if request.method == 'POST':
weight = request.POST['weight']
height = request.POST['height']
age = request.POST['age']
gender = request.POST['gender']
print("weight: ",weight)
print("height: ",height)
print("age: ",age)
print("gender: ",gender)
if gender == 'male':
result = 66.47 + (13.75 * int(weight)) + (5.003 * int(height)) - (6.755 * int(age))
print(result,"######################")
return render(request,'index.html',{'result':result})
if gender == 'female':
result = 655.1 + (9.563 * int(weight)) + (1.850 * int(height)) - (4.676 * int(age))
print(result,"######################")
return render(request,'index.html',{'result':result})

return render(request,'index.html')```

### In urls.py

```from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [