Calculator with GUI Using Python Tkinter.
Tags: webdev, python, calculator, tutorial
Published: 2024-04-11 17:26:05

##Introduction

In today's fast-paced world, where we often need to do quick calculations, having a good calculator is important. Whether you're a student doing homework or a professional managing finances, having a calculator handy can be super useful. But have you ever thought about making your own?

If you've ever wanted to learn how to use [Python](https://www.python.org/) or if you already know a bit and want to try something new, then you're in the right place! In this article, we'll show you step-by-step how to make your very own calculator using Python's [Tkinter library](https://docs.python.org/3/library/tkinter.html#module-tkinter), a renowned [Python](https://www.python.org/) library for creating graphical user interfaces. [Tkinter](https://docs.python.org/3/library/tkinter.html#module-tkinter) stands out for its simplicity, versatility, and widespread use in the Python community.   It doesn't matter if you're a total beginner or an experienced coder looking for a fun project, we'll guide you through everything you need to know.

Get ready to discover the world of coding as we show you how to create your calculator from scratch. It's going to be a fun and rewarding journey, and you'll be amazed at what you can accomplish! 



## SETTING UP THE PROJECT ENVIRONMENT

When working in [Visual Studio Code](https://code.visualstudio.com/) (VS Code), start by creating a new Python file for your project. It's helpful to have separate files for different parts of your project.


### Create a new Python application:

To do this, you can start by opening your [VS Code](https://code.visualstudio.com/) and creating a new folder:


####Step 1



![Image of a new folder in VS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5ikl6aoz6t6jnssj2gd.png)




####Step 2

You select the folder:


![Image of newly created vs code folder ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq1fv3nwiyfp0lthempv.png)



####Step 3

Head over to the newly created folder and create a new file called app.py.



![creating a new file called app.py.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d63lsmzuklzhin8lwo8c.png)




### Install the necessary libraries.

We will create this calculator with [Python](https://www.python.org/) using [Tkinter](https://docs.python.org/3/library/tkinter.html#module-tkinter).


First, we import the [Tkinter library](https://docs.python.org/3/library/tkinter.html#module-tkinter) and components, modules that we need:

<prev>
```python
import tkinter as tk

LARGE_FONT_STYLE = ("Arial", 40,"bold")
SMALL_FONT_STYLE = ("Arial", 16)
DIGITS_FONT_STYLE = ("Arial", 24,"bold")
DEFAULT_FONT_STYLE = ( "Arial",20)

OFF_WHITE = "#F8FAFF"
WHITE = #FFFFFF#
LIGHT_BLUE ="#CCEDFF"
LIGHT_GRAY  =  "#F5F5F5"
LABEL_COLOR =  "#25265E"

 ```
</prev>

##Building the Calculator

We will create a class `Calculator` that will contain all the components and functionality of our calculator:

###step 1

<prev>
```python
class calculator:
```
</prev>

###step 2

We will define an `init` method for the calculator class:

<prev>
```python
def__init__(self):
```
</prev>

###step 3

Next, we will create the main window of our calculator:

 <prev>
```python
self.window=tk.Tk()
```
</prev>

###step 4

We will specify the width and height of this window:

<prev>
```python
self.window = geometry("375x667")
```
</prev>

###step 5

we will disable resizing for the window:

<prev>
```python
self.window.resizable(0,0)
```
</prev>

###step 6

Next, we give the window a title `calculator.`:

<prev>
```python
self.window.title('calculator')
```
</prev>

###step 7

Next, we create (define) another method `run` that will run and start our calculator:

<prev>
```python
def run (self):
   self.window.mainloop()
```
</prev>

then outside this class we say:

<prev>
```python
if__name__ = "__main__":
```
</prev>

###step 8

Next, inside this `if` statement we will create an object of the calculator class called `calc`:

<prev>
```python
calc = Calculator()
```
</prev>

Then we run the `run` method of calculator object:
     
<prev>
```python
calc.run() 
```
</prev>

###Step 9

Save and run to see the image of the main window


![Image of the main window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhs91n2zojsi5i89fck7.png)


_____


##Creating the Frames

In this step we are going to create our frames.

###Step 1

To do this, we are going to create 2 frames. One for the display and the other for the buttons:

<prev>
```python
self.display_frame = self.create_display_frame()
self.buttons_frame = self.create_buttons_frame()
```
</prev>

###Step 2

Next, we define this 2 frames above,
first, we define  `display frame`:

<prev>
```python
def create_display_frame(self):
    frame = tk.Frame(self.window,Height = 221,bg=
LIGHT_GRAY)                
    frame.pack(expand=True, fill='both')
    return frame
```
</prev>

(bg means background colour)

###Step 3

Next, we will define `button frame`:

<prev>
```python
def create_button_frame(self):
   frame = tk.Frame(self.window)
   frame.pack(expand=True, full ="both")
   return frame
```
</prev>

Now that we have created the frames lets add display labels to our calculator.

##Adding Display Labels

The calculator app will have 2 different labels, one to display the ` current expression ` and the other to create  the `total expression.`

###step 1

First, we define both the `current expression` and the ` total expression.`: 

<prev>
```python
self.total_expression ="0"
self.current_expression = "0"
```
</prev>

###Step 2

Next, we create display labels to create this labels:

<prev>
```python
def create_display_labels(self):
```
</prev>

inside the method, we define the `total label`:

<prev>
```python
total_label = tk.Label(self.display_frame, text=self.total_expression, anchor =tk.E, bg = LIGHT_GRAY, fg=LABEL_COLOR, padx = 24, font= SMALL_FONT_STYLE)
```
</prev>

`anchor =tk.E`- This will help position the text at the East side of the frame

###Step 3

Next, we pack this label with `expand = true`:

<prev>
```python
total_label.pack(expand=True, fill='both')

label = tk.Label(self.display_frame, text=self.current_expression, anchor =tk.E[[this will help position the text at the East side of the frame]], bg = LIGHT_GRAY, fg=LABEL_COLOR, padx = 24, font= LARGE_FONT_STYLE)total_label.pack(expand=True,fill='both')
```
</prev>

Finally, we return our display labels:

<prev>
```python
return total_label,label
```
</prev>

###Step 4

Next we go back to the `init method`:

<prev>
```python
self.total_label,self.label = self.create_display_labels()
```
</prev>

###Step 5

Save and run to see our calculator with display.

![image of Calculator with display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttixvuiwwezz1zzj3uzf.png)





Let's now add the buttons to our calculator.

##Adding the Digit Buttons.

We use the grid system to add all the button.

###Step 1

First we create a dictionary of all the digits in the corresponding positions.

In a standard calculator, the digits start from 7:

<prev>
```python
self.digits = {}
```
</prev>

So we add 7 first as the `key` with the `value` 1,1

`7:(1,1)` - we will later use this value to specify that `7` should be placed in a cell with `role 1 and column 1`.

similarly `8` should be placed in  `role 1 and column 2.`

<prev>
```python
self.digits = {
7(1,1),8:(1,2),9:(1,3),4:(2,1),5:(2,2),6:(2,3),1:(3,1), 2:(3,2),3:(3,3)}
```
</prev>

we also have `0` at the centre of the  last column ; `0:(4,2)`.
lets also add decimal point button `".":(4,1).`

###Step 2

Next, we create a method called 'create digit button':

<prev>
```python
def create_digit_buttons(self):
```
</prev>

Inside this method, we look through our dictionary and add each button to our button strings:

<prev>
```python
for digit,grid_value in self.digits.items():
```
</prev>

and for each of the digit and grid values, we create a button:

<prev>
```python
button =  tk,Button(self.buttons_frame, text=str(digit), bg= WHITE, fg = LABEL_COLOR, DIGITS_FONT_STYLE, borderwidth = 0)
```
</prev>

###Step 3

Now, to place these button to the grid, we say:

<prev>
```python
button.grid()
```
</prev>

parsing through the first element of `grid value` which is [0] and the second element of `grid value`, which is `[1]`

<prev>
```python
button.grid(row=grid_value[0],column=grid_value[1])
```
</prev>

###Step 4

Now we also specify `sticky=tk.NSEW` so that our buttons stick to every side and  fill up the entire grid cell:

<prev>
```python
button.grid(row=grid_value[0], column=grid_value[1],sticky=tk.NSEW)
```
</prev>

###Step 5

Next, we will call this method from inside  `init`: 

<prev>
```python
self.create_digit-buttons()
```
</prev>

###Step 6

Save and run to see the image of digits in our calculator


![Image of our calendar with digits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9mrvxz5fnyfw9k0l1l7.png)

____

Next, let's add the basic operation buttons.

##Adding the Operator Buttons

Here we want to add our calculator operator buttons `+ ` `-` `/` `*`

###Step 1

To do this , first, we create a dictionary for several operations:

<prev>
```python
self.operations={"/":"\u00F7", "*": "\u00D7", "-": "-","+":"+"}
```
</prev>

###Step 2

Next, we create a new method to create operations buttons:

<prev>
```python
def create_operator_buttons(self):
    for operator,symbol in self.operations.items():
       buttons =tk.Buttons,self.buttons_frame,
text=symbol, bg=OFF_WHITE, fg= LABEL_COLOR, font= DEFAULT_FONT_STYLE, borderwidth=0)
```
</prev>

###Step 3

Next, let's place this button to button frame grid:

<prev>
```python
button.grid()
```
</prev>

We know that the operator button should be at the last column and it should start one role above the digit buttons.
so we first define  a counter variable:

<prev>
```python
i = 0 
button.grid(row=1, column =4, sticky = tk.NSEW)
```
</prev>

###Step 4

Next, we will increase the `value` of ` i by 1`:

<prev>
```python
i += 1
```
</prev>  

Then, we will call this method from inside the `init` method.

###Step 5

Next, we will create `Clear and equals button`

To do this, first, we we define ` clear button ` and `equals to`:

<prev>
```python
def create_clear_button(self):
    button = tk.Button(self.buttons_frame, text="C", bg=OFF_WHITE, fg=LABEL_COLOR, font=DEFAULT_FONT_STYLE, borderwidth =0)
    button.grid(row=0, column =1,columnspan=2, sticky=tk.NSEW)

def create_equals_button(self):
    button = tk.Button(self.buttons_frame, text="=", bg=LIGHT_BLUE, fg=LABEL_COLOR, font=DEFAULT_FONT_STYLE, borderwidth =0)
    button.grid(row=4,
column=3,columnspan=2,sticky=tk.NSEW)
```
</prev>

###Step 6

Next, we call these above methods from the `init ` method and to do that , we define a new method `special buttons`:

<prev>
```python
def create_special_buttons(self):
```
</prev>

inside this method we will call:

<prev>
```python
self.create_clear_button()
self.create_equals_button()
```
</prev>

###Step 7

Next, we call the `create_special_buttons`:

<prev>
```python
self.create_special_buttons()
```
</prev>

###Step 8

Now, let's increase the size of the digit button to fit the calculator frame.
First, we create a `for loop` that loops from 1-4:

<prev>
```python
self.buttons_frame.rowconfigure(0, weight=1)
       for x in range (1,5):
self.buttons_frame.rowconfigure(x, weight=1)
self.buttons_frame.columnconfigure, weight=1)
```
</prev>

###Step 9

Save and run to see our calculator

![Image of Calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fygzzii6kjrest5gq59z.png)


##Add functionality to the buttons

Let's start by making the digit button functional.

###Step 1

First, we will create the method that creates the total and current label:

<prev>
```python
def update_total_label_label(self):
   self.label.configtext(text=self.current_expression)
 ```
</prev>

###Step 2

Next, we are going to create a method called ` add to` that adds a given value to current expression:

<prev>
```python
def add_to_expression(self,value):
      self.current_expression +=str(value)
      self.update_label()
```
</prev>

###Step 3

now lets add the functionality of this method to our digit_buttons, and we will do that using lambda :

<prev>
```python
def create_digit_buttons(self):
    for digit,grid_value in self.digits.items():
       button =  tk,Button(self.buttons_frame, text=str(digit)[[when specifying the button text as digit, since its an integer value we converting to string]], bg= WHITE, fg = LABEL_COLOR, DIGITS_FONT_STYLE,borderwidth = 0, command=lambda x=digit: self.add_to_expression(x))
```
</prev>

[`borderwidth = 0` - to remove the border of the buttons.]

###Step 4

Finally, we will remove the initial value of `self.total expression` and `self.current_expression`:

<prev>
```python
 self.total_expression =""
 self.current_expression = ""   
 ```
</prev>

###Step 5

Next, we add functionality to our operator buttons and to do this , we will implement a method called `append operator:`

<prev>
```python
def append_operator (self,operator):
     self.current_expression += operator
     self.total_expression += self.current_expression
     self.current_expression = ""
     self.update_total_label()
     self.update_label() 
```
</prev>

###Step 6

Now, we add this method to our create_operator buttons:

<prev>
```python
def create_operator_buttons(self):
    for operator,symbol in self.operations.items():
    buttons =tk.Buttons(self,buttons_frame,
text=symbol, bg=OFF_WHITE, fg= LABEL_COLOR, font= DEFAULT_FONT_STYLE, borderwidth=0, command=lambda x=operator: self.append.operator(x))
 ```
</prev>

Now add functions to the ` clear` and `equals to ` button in a similar way.


###Step 7

First, we will specify the clear method:

<prev>
```python
 def clear(self):
     self.current_expression = ""
     self.total_expression = ""
     self.update_label()
     self.update_total_label() 
```
</prev>

###Step 8

Next, we add this method to our clear_button and specify command:

<prev>
```python
def create_clear_button(self):    
  button=tk.Button(self.buttons_frame,text="C",
bg=OFF_WHITE, fg=LABEL_COLOR, font=DEFAULT_FONT_STYLE, borderwidth =0, command=self.clear)
```
</prev>

###Step 9

Next, we want to implement the functionality of the` equals to` button. To do this we have to use the ` eval function` - The `eval function` evaluates and return the value of a valid python expression.
We are going to use this `eval function` to evaluate our `total expression` when the user presses the ` equals button`.

To do this, first we define the `evaluate method`:

<prev>
```python
 def evaluate(self):
      self.total_expression += self.current_expression
      self.update_total_label()
self.total_expression=str(eval(self.total_expression))
      self.total_expression= "" 
```
</prev>

###Step 10

Finally, we update the current label:

<prev>
```python
self.update_label()
```
</prev>
###Step 11

Next, we add this method to our equals button and specify command:

<prev>
```python
def create_equals_button(self):
   button = tk.Button(self.buttons_frame, text="=", bg=LIGHT_BLUE, fg=LABEL_COLOR,font=DEFAULT_FONT_STYLE, borderwidth =0,command=self.evaluate)
```
</prev>

###Step 12

Next save and run


![Image of Calculator after adding functionalities to the buttons ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7jpqepuauxt2kstdx3q.png)




##Enhancing Calculator

Here we want to add advanced operators to our calculator adding `square` and `square_root_Buttons`:

###Step 1

First, we create a `square button` and define a `square method`:

<prev>
```python
def square(self): 
     self.current_expression = str(eval(f"{self.current_expression}**2"))
     self.update_label()`

def create_square_button(self):
     button = tk.Button(self.buttons_frame, text="x\u00b2", bg=OFF_WHITE, fg=LABEL_COLOR, font=DEFAULT_FONT_STYLE, borderwidth =0, command = self.square)
     button.grid(row=0, column =2,sticky=tk.NSEW)
```
</prev>

###Step 2

Similarly, we create the `square root button`:

<prev>
```python
def sqrt(self):
   self.current_expression = str(eval(f"{self.current_expression}**0.5"))
   self.update_label()

def create_sqrt_button(self):
      button = tk.Button(self.buttons_frame, text="\u00b2", bg=OFF_WHITE, fg=LABEL_COLOR, font=DEFAULT_FONT_STYLE, borderwidth =0, command = self.sqrt)
      button.grid(row=0,colum =3,sticky=tk.NSEW)
```
</prev>

###Step 3

Next, we add these buttons into the `self.create special buttons` we created earlier:

<prev>
```python
 def create_special_buttons(self):
     self.create_clear_button()
     self.create_equals_button()
     self.create_square_button()
     self.create_sqrt_button()`
```
</prev>

##Changing Operator Symbols

To change the operator symbols we go to the update total label and simply replace the python symbols to the actual operator symbols

###Step 1

First, we define `update total label`:

<prev>
```python
def update_total_label(self):
   expression=self.total_expression for operator,
symbol in self.operations.items()
   expression=expression.replace(operator,f'{symbol}')
   self.total_label.config(text=expression)
```
</prev>

##Truncating the results

When creating a calculator using Python, `truncating the results`  means showing or giving back only a certain number of digits after the dot in the answer of a calculation. This helps to limit how precise the answer is, or to make it easier to understand. 

For instance, if you have an answer like 3.14159265359 and you truncate it to two digits after the dot, the new answer will be 3.14. 
To do this we go to the update label method and use `slicing operator` to limit its length to 11 

###Step 1

<prev>
 ```python
def update_labbel(self):
self.label.config(text=self.current_expression[:11]) 
```
</prev>

##Handling Exceptions like ZeroDivisionError

This means making sure your calculator can handle errors that occur when trying to divide by zero.

###Step 1

To handle exceptions we go to the evaluate method and i will put the `eval function` inside the 'try' block:

<prev>
```python
def evaluate(self):
      self.total_expression += self.current_expression
      self.update_total_label()
      try:
          self.total_expression = str(eval(self.total_expression))

           self.total_expression= ""
      except Exception as e:
            self.current_expression = "Error"
      finally:
            self.update_label() 
```
</prev>

###Step 2

Save and run to see our final calculator


![Final Calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nglb2jihe84d6kh1na6u.png)



##Conclusion

Calculator with GUI Using Python Tkinter" is a rich resource that not only covers the technical aspects of GUI development but also delves into the logic and functionality behind building a fully operational calculator application. Readers are not only guided on how to design an aesthetically pleasing user interface but also learn the intricacies of event handling to ensure a seamless user experience. By breaking down the process of integrating mathematical operations and algorithms for arithmetic calculations, the tutorial empowers readers to not only replicate the calculator but also understand and modify its functionality to suit specific requirements.

Moreover, the tutorial serves as a bridge between theory and practice, offering a hands-on approach that allows readers to apply their knowledge immediately. By following the tutorial, programmers can gain proficiency in using Tkinter to create interactive applications and enhance their problem-solving skills through the implementation of mathematical logic in Python. The guidance provided enables readers to develop a foundational understanding of GUI application development while sparking their creativity to explore new features and functionalities beyond the basic calculator design.

In conclusion, "Calculator with GUI Using Python Tkinter" is a comprehensive tutorial that equips readers with the tools and knowledge necessary to develop functional and visually appealing GUI applications. From layout design to event handling and algorithm implementation, the tutorial covers a wide range of topics, making it an invaluable resource for individuals looking to expand their programming skills. By immersing themselves in the step-by-step instructions and practical examples, readers can explore the exciting world of GUI development using Python and Tkinter, paving the way for future projects and learning opportunities in interactive application development.