Build Calculator App Using Django
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
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
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 >w3wiki 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 :