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 homeNow 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.
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.
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.
<!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 runserverOutput :