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 calculator
django-admin startapp app(application name)

our project directory structure will follow the following structure:

project folder for Calorie Calculator in Django Python

In settings.py install the application which we created

INSTALLED_APPS = [
    'django.contrib.admin',
    '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">
<head>
    <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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <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>
 
</head>
<body>
<center>
    <h1>Calories Calculator</h1>
    
    <br>    
    <div class="col-6 shadow">
        <form method="POST">
            {% csrf_token %}
            <div class="form-group">
              <label for="exampleInputEmail1">Your weight in kg</label>
              <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Your height in cm</label>
              <input type="number" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Your age</label>
                <input type="number" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Gender</label>
                <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('admin/', admin.site.urls),
    path('',views.home,name='home'),
]

In index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <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>
 
</head>
<body>
<center>
    <h1>Calories Calculator</h1>
    
    <br>    
    <div class="col-6 shadow">
        <form method="POST">
            {% csrf_token %}
            <div class="form-group">
              <label for="exampleInputEmail1">Your weight in kg</label>
              <input type="number" name="weight" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Your height in cm</label>
              <input type="number" name="height" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Your age</label>
                <input type="number" name="age" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Gender</label>
                <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 %}
    <div class="col-6 shadow">
        <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">
<head>
    <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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <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>
 
</head>
<body>
<center>
    <h1>Calories Calculator</h1>
    
    <br>
    
    {% if result %}
    <div class="col-6 shadow">
        <h3>Calories require for the day: {{result}} calories</h3>
    </div>
    <br>
    {% endif %}
        
    
    <div class="col-6 shadow">
        <form method="POST">
            {% csrf_token %}
            <div class="form-group">
              <label for="exampleInputEmail1">Your weight in kg</label>
              <input type="number" name="weight" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Your height in cm</label>
              <input type="number" name="height" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Your age</label>
                <input type="number" name="age" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Gender</label>
                <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 = [
    path('admin/', admin.site.urls),
    path('',views.home,name='home'),
]