Simple Calculator using Django

   November 8, 2022

In this article, we will create a web-based simple Calculator using Django web framework which will perform addition, subtraction, division, and multiplication.

Installation and setup for Simple Calculator in Django

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 the 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 calculator(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 directory structure for Simple Calculator using Django

In settings.py

# Application definition
 
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
]

Coding Simple Calculator using Django

Coding for Addition in Simple Calculator using Django

To code addition operation for our calculator first start with the front end.

First, let’s create a template folder in the application, and inside the templates folder create an index.html file.

create index.html

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>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>Calculator</h1></center>
    <div class="row mt-5">
             
        <div class="col-1"></div>
        <div class="col-6  shadow">
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                  <label for="exampleInputEmail1">Number 1</label>
                  <input type="number" class="form-control" name="num1">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Number 2</label>
                  <input type="number" class="form-control" name="num2" >
                </div>
                
                <button type="submit" name="add" class="btn btn-primary col-5">Addition</button>
               
</form>
        </div>
        <div class="col-1"></div>
        <div class="col-2 shadow">
            <h3>Result</h3>  
            <br><br><br>
            <h4>{{result}}</h4>   
        </div>
    </div>
    
</body>
</html>

Output:

first look at Simple Calculator using Django

In views.py

def Addition(num1,num2):
    result = int(num1) + int(num2)
    return result
def home(request):
    if request.method == 'POST':
        num1 = request.POST['num1']
        num2 = request.POST['num2']
        if 'add' in request.POST:
            result = Addition(num1,num2)
            return render(request,'index.html',{'result':result})
return render(request,'index.html')

Here we are using the post method to take input from the user side. We took two variables num1 and num2, these variables will store the value from the front end. In index.html we have named the button according to their functionality and used the name parameter to get the operation type

Example from index.html to name the button

<button type="submit" name="add" class="btn btn-primary col-5">Addition</button>

Here name=”add” will give an “add” value to the request.POST variable so due to that, it will perform an addition operation.

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='index'),
]

The output for addition operation:

output 1 for the addition operation
output 2 for the addition operation

Coding for Subtraction in Simple Calculator using Django

To perform a subtraction operation, do the following steps.

In views.py

from django.shortcuts import render
 
def Addition(num1,num2):
    result = int(num1) + int(num2)
    return result
 
def Subtract(num1,num2):
    result = int(num1) - int(num2)
    return result
 
def home(request):
    if request.method == 'POST':
        num1 = request.POST['num1']
        num2 = request.POST['num2']
        if 'add' in request.POST:
            result = Addition(num1,num2)
            return render(request,'index.html',{'result':result})
        
        if 'sub' in request.POST:
            result = Subtract(num1,num2)
            return render(request,'index.html',{'result':result})
return render(request,'index.html')

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>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>Calculator</h1></center>
    <div class="row mt-5">
             
        <div class="col-1"></div>
        <div class="col-6  shadow">
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                  <label for="exampleInputEmail1">Number 1</label>
                  <input type="number" class="form-control" name="num1">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Number 2</label>
                  <input type="number" class="form-control" name="num2" >
                </div>
                
                <button type="submit" name="add" class="btn btn-primary col-5">Addition</button>
                <button type="submit" name="sub" class="btn btn-primary col-5">Subtract</button><br>
               
</form>
        </div>
        <div class="col-1"></div>
        <div class="col-2 shadow">
            <h3>Result</h3>  
            <br><br><br>
            <h4>{{result}}</h4>   
        </div>
    </div>
    
</body>
</html>

Example from index.html to name the button

<button type="submit" name="sub" class="btn btn-primary col-5">Subtract</button>

Here name=”sub” will give a “sub” value to the request.POST variable so due to that, it will perform a subtraction operation.

The output of the subtraction operation:

output 1 for the subtraction operation
output 2 for the subtraction operation

Coding for Division operation in Simple Calculator using Django

To do division operations, perform the following operations.

In views.py

from django.shortcuts import render
 
def Addition(num1,num2):
    result = int(num1) + int(num2)
    return result
 
def Subtract(num1,num2):
    result = int(num1) - int(num2)
    return result
 
def Divide(num1,num2):
    result = int(num1) / int(num2)
    return result
 
def home(request):
    if request.method == 'POST':
        num1 = request.POST['num1']
        num2 = request.POST['num2']
        if 'add' in request.POST:
            result = Addition(num1,num2)
            return render(request,'index.html',{'result':result})
        
        if 'sub' in request.POST:
            result = Subtract(num1,num2)
            return render(request,'index.html',{'result':result})
 
        if 'div' in request.POST:
            result = Divide(num1,num2)
            return render(request,'index.html',{'result':result})
 
return render(request,'index.html')

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>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>Calculator</h1></center>
    <div class="row mt-5">
             
        <div class="col-1"></div>
        <div class="col-6  shadow">
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                  <label for="exampleInputEmail1">Number 1</label>
                  <input type="number" class="form-control" name="num1">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Number 2</label>
                  <input type="number" class="form-control" name="num2" >
                </div>
                
                <button type="submit" name="add" class="btn btn-primary col-5">Addition</button>
                <button type="submit" name="sub" class="btn btn-primary col-5">Subtract</button><br>
                <br><button type="submit" name="div" class="btn btn-primary col-5">Divide</button>
               </form>
        </div>
        <div class="col-1"></div>
        <div class="col-2 shadow">
            <h3>Result</h3>  
            <br><br><br>
            <h4>{{result}}</h4>   
        </div>
    </div>
    
</body>
</html>

Example from index.html to name the button

<button type="submit" name="div" class="btn btn-primary col-5">Addition</button>

Here name=”div” will give a “div” value to the request.POST variable so due to that, it will perform a division operation.

The output of division operation:

output 1 for the division operation
output 2 for the division operation

Coding for Multiply operation in Simple Calculator using Django

To perform division operations, do the following steps.

In views.py

from django.shortcuts import render
 
def Addition(num1,num2):
    result = int(num1) + int(num2)
    return result
 
def Subtract(num1,num2):
    result = int(num1) - int(num2)
    return result
 
def Divide(num1,num2):
    result = int(num1) / int(num2)
    return result
 
def Multiply(num1,num2):
    result = int(num1) * int(num2)
    return result
 
def home(request):
    if request.method == 'POST':
        num1 = request.POST['num1']
        num2 = request.POST['num2']
        if 'add' in request.POST:
            result = Addition(num1,num2)
            return render(request,'index.html',{'result':result})
        
        if 'sub' in request.POST:
            result = Subtract(num1,num2)
            return render(request,'index.html',{'result':result})
 
        if 'div' in request.POST:
            result = Divide(num1,num2)
            return render(request,'index.html',{'result':result})
 
        if 'mul' in request.POST:
            result = Multiply(num1,num2)
            return render(request,'index.html',{'result':result})
    return render(request,'index.html')

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>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>Calculator</h1></center>
    <div class="row mt-5">
             
        <div class="col-1"></div>
        <div class="col-6  shadow">
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                  <label for="exampleInputEmail1">Number 1</label>
                  <input type="number" class="form-control" name="num1">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Number 2</label>
                  <input type="number" class="form-control" name="num2" >
                </div>
                
                <button type="submit" name="add" class="btn btn-primary col-5">Addition</button>
                <button type="submit" name="sub" class="btn btn-primary col-5">Subtract</button><br>
                <br><button type="submit" name="div" class="btn btn-primary col-5">Divide</button>
                <button type="submit" name="mul" class="btn btn-primary col-5">Multiply</button><br>
              <br></form>
        </div>
        <div class="col-1"></div>
        <div class="col-2 shadow">
            <h3>Result</h3>  
            <br><br><br>
            <h4>{{result}}</h4>   
        </div>
    </div>
    
</body>
</html>

Example from index.html to name the button

<button type="submit" name="mul" class="btn btn-primary col-5">Addition</button>

Here name=”mul” will give a “mul” value to the request.POST variable so due to that, it will perform a multiplication operation.

The output of multiplication operation:

output 1 for the multiplication operation
output 2 for the multiplication operation

Running Simple Calculator using Django

To run the project open command prop or terminal inside the project directory and follow the command

python manage.py runserver

Copy the link http://127.0.0.1:8000/ and past it web browser URL part

running Simple Calculator using Django
Best 100+ Python Projects with source code

Also Read:

Share:

Author: Ayush Purawr