Build Calculator App Using Django

Last Updated : 07 Feb, 2024

In this article, we will guide you through the process of creating a calculator app using Django. Our goal is to develop a versatile application capable of performing fundamental mathematical operations such as addition, subtraction, multiplication, and more. By the end of this tutorial, you will have a functional calculator that goes beyond the basic arithmetic functions found in a typical calculator, providing a hands-on introduction to building web applications with Django.

Calculator App Using Django

To install Django follow these steps.

Starting the Project Folder

To start the project use this command

django-admin startproject core
cd core

To start the app use this command

python manage.py startapp home

Now add this app to the ‘settings.py’

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "home",
]

File Structure

core

Setting Necessary Files

views.py : The Django view function 'calculator' checks if the request is a POST method. If true, it retrieves the 'result' parameter, calculates the result, and renders 'index.html' with the result. Otherwise, it renders 'index.html' without any changes.

Python3

from django.shortcuts import render
from django.http import HttpResponse

def calculator(request):
    if request.method == 'POST':
        result = request.POST.get('result', '')

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

    return render(request, 'index.html')

urls.py : Defines Django URL patterns, routing 'admin/' to the admin interface and '' to the 'calculator' function from the 'home.views' module.

Python3

from django.contrib import admin
from django.urls import path
from home.views import *

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', calculator, name='calculator'),
]

Creating GUI

index.html : This HTML document defines a simple calculator web page. It includes styles for a centered layout with a background color, a calculator container with specific styling, and JavaScript functions for handling user input. The calculator allows users to perform basic arithmetic operations, and the result is displayed in an input field within a form.

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>Simple Calculator</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .calculator {
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 20px;
            width: 300px;
            text-align: center;
        }

        h1 {
            color: #4CAF50; 
            font-family: 'Times New Roman', Times, serif;
            margin-top: 0;
        }

        input, button {
            margin: 5px;
            padding: 10px;
            font-size: 16px;
        }

        input {
            width: 80%;
        }

        button {
            width: 19%;
            
            
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>GeeksforGeeks Calculator</h1>
        <form method="post" action="{% url 'calculator' %}">
            {% csrf_token %}
            <input type="text" id="result" name="result" value="{{ result }}">
            <br>
            <button onclick="clearResult()">C</button>
            <button onclick="appendToResult('7')">7</button>
            <button onclick="appendToResult('8')">8</button>
            <button onclick="appendToResult('9')">9</button>
            <br>
            <button onclick="appendToResult('4')">4</button>
            <button onclick="appendToResult('5')">5</button>
            <button onclick="appendToResult('6')">6</button>
            <button onclick="appendToResult('*')">*</button>
            <br>
            <button onclick="appendToResult('1')">1</button>
            <button onclick="appendToResult('2')">2</button>
            <button onclick="appendToResult('3')">3</button>
            <button onclick="appendToResult('-')">-</button>
            <br>
            <button onclick="appendToResult('0')">0</button>
            <button onclick="appendToResult('.')">.</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendToResult('+')">+</button>
            <button onclick="clearResult()">Clear</button>
            <button onclick="appendToResult('/')">/</button>
        </form>
    </div>

    <script>
        // Update JavaScript functions to handle form submission
        function appendToResult(value) {
            document.getElementById('result').value += value;
        }

        function clearResult() {
            document.getElementById('result').value = '';
        }

        function calculate() {
            try {
                document.getElementById('result').value = eval(document.getElementById('result').value);
            } catch (error) {
                document.getElementById('result').value = 'Error';
            }
        }
    </script>
</body>
</html>

Deployement of the Project

Run these commands to apply the migrations:

python3 manage.py makemigrations
python3 manage.py migrate

Run the server with the help of following command:

python3 manage.py runserver

Output :

calculator

Quiz Application using Django

kasoti2002

Improve

Article Tags :

Practice Tags :

python