How to build a simple calculator app using Tkinter
In this tutorial, we’re going to build a simple calculator app that imitates the built-in Calculator on Windows. It’s required to have a good knowledge of python to understand this code and follow through so if that’s settled you can jump right in.
Although any text editor can be used to write this code as long as python is installed on the laptop I would be using Pycharm, an IDE package by Jetbrains for this tutorial.
Tkinter
Python provides several choices for writing GUI(graphical user interfaces) -based programs, including wxPython, Tkinter, and Qt. In order to use Tkinter, you don’t have to install any external module as it comes installed with the standard library.
from tkinter import *
root = Tk()
root.geometry("410x324") #sets interface to a particular dimension
root.title("Calulator")# every other code comes hereroot.mainloop()
Entry Field
The next step is to create the input box for our calculator and we do this by creating an Entry field from Tkinter. The Entry field has such methods as e.get() which “gets” the input from the entry field, and e.insert() which “enters” a text into the entry field, and e.delete() which deletes text in the entry field as we will see. To create the entry field, we do the following:
e = Entry(root, width=50, borderwidth=5, font=("arial", 8, "bold"))
e.grid(row=0, column=0, columnspan=3)
We create the Entry field in the first line of the code and display it with e.grid() which, in the code above, sets the input field to displayed at the first row and column.
Buttons
Our calculator should contain the following buttons — the digits 0–9, and some arithmetic operations we would like but let’s focus on the digits for now.
button_1 = Button(root, text="1", padx=40, pady=20, font=("arial", 8, "bold"))
button_2 = Button(root, text="2", padx=40, pady=20, font=("arial", 8, "bold"))
button_3 = Button(root, text="3", padx=40, pady=20, font=("arial", 8, "bold"))
button_4 = Button(root, text="4", padx=40, pady=20, font=("arial", 8, "bold"))
button_5 = Button(root, text="5", padx=40, pady=20, font=("arial", 8, "bold"))
button_6 = Button(root, text="6", padx=40, pady=20, font=("arial", 8, "bold"))
button_7 = Button(root, text="7", padx=40, pady=20, font=("arial", 8, "bold"))
button_8 = Button(root, text="8", padx=40, pady=20, font=("arial", 8, "bold"))
button_9 = Button(root, text="9", padx=40, pady=20, font=("arial", 8, "bold"))
button_0 = Button(root, text="0", padx=40, pady=20, font=("arial", 8, "bold"))Note that we have been setting “root” as the first parameter of our buttons and entry field code.
We have created these buttons so the next thing we need to do is display them on the screen. I used the built-in Windows calculator as inspiration for my arrangement of buttons. Of course, we display with the .grid() method.
button_1.grid(row=3, column=0)
button_2.grid(row=3, column=1)
button_3.grid(row=3, column=2)
button_4.grid(row=2, column=0)
button_5.grid(row=2, column=1)
button_6.grid(row=2, column=2)
button_7.grid(row=1, column=0)
button_8.grid(row=1, column=1)
button_9.grid(row=1, column=2)
button_0.grid(row=4, column=1)Now, we have our buttons displayed, but when you click them, they do not do anything. So, we need to create some functions :).
def button_click(number):
current = e.get()
e.delete(0, END)
e.insert(0, str(current) + str(number))What our function does is first get what’s currently on the entry field and hold it in the current variable, clear the screen and then, when you click a button, it concantenates that variable with the number clicked.
Our next problem is to call the function and we need to do this where we created the buttons so each button carries out the function when clicked. We need to create an additional parameter using:
command= *function name*This is how we link functions into buttons in tkinter, without the parenthesis. However, since we have an argument we need to call, we use lambdas.
command= lambda:function_name(argument)Hence, our buttons should have this updated code:
button_1 = Button(root, text="1", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(1))
button_2 = Button(root, text="2", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(2))
button_3 = Button(root, text="3", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(3))
button_4 = Button(root, text="4", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(4))
button_5 = Button(root, text="5", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(5))
button_6 = Button(root, text="6", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(6))
button_7 = Button(root, text="7", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(7))
button_8 = Button(root, text="8", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(8))
button_9 = Button(root, text="9", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(9))
button_0 = Button(root, text="0", padx=40, pady=20, font=("arial", 8, "bold"), command=lambda: button_click(0))Operations
Now, we need to create buttons for mathematical operations:
button_add = Button(root, text="+", padx=40, pady=20, font=("arial", 8, "bold"), command=button_add)
button_subtract = Button(root, text="-", padx=40, pady=20, font=("arial", 8, "bold"), command=button_subtract)
button_multiply = Button(root, text="*", padx=40, pady=20, font=("arial", 8, "bold"), command=button_multiply)
button_divide = Button(root, text="/", padx=40, pady=20, font=("arial", 8, "bold"), command=button_divide)
button_square = Button(root, text="^2", padx=40, pady=20, font=("arial", 8, "bold"), command=button_square)
button_equal = Button(root, text="=", padx=40, pady=20, font=("arial", 8, "bold"), command=button_equal)
button_clear = Button(root, text="C", padx=20, pady=10, font=("arial", 8, "bold"), command=button_clear)As you can tell from the code above, I created some functions which define what the buttons do:
Let’s see the addition function first:
def button_add():
first_num = e.get()
global f_num
global math
math = "addition"
f_num = int(first_num)
e.delete(0, END)What this function does is get the current entry from the entry field and store it as a global function and converted to an integer and then delete the entry field. To understand what this really does, let’s see the equal_to function:
def button_equal():
second_number = e.get()
e.delete(0, END)
if math == "addition":
e.insert(0, f_num + int(second_number))
This function gets the second entry and inserts the result of the operation into the entry field.
You can continue this for other operations but I’ll move on to displaying the operation buttons:
button_add.grid(row=3, column=3)
button_subtract.grid(row=2, column=3)
button_multiply.grid(row=1, column=3)
button_square.grid(row=4, column=0)
button_divide.grid(row=4, column=2)
button_equal.grid(row=4, column=3)
button_clear.grid(row=0, column=3)By now, you have a simple calculator app created fully with a knowledge of Python and Tkinter. Hopefuly, you have been able to follow.