This project can be broken down into 4 main steps:
- Function Definition
- Expression Field formatting
- Button formatting
First, we’ll start by setting up Tkinter. We do this by typing
Next, we will need to create our expression variable. This is the variable that the buttons will control, and will be what gives us the final result. To do this we type:
Once we’ve imported Tkinter and have set up our expression variable, we can define our functions. Each function will control an action the code will execute when the function is called.For this project, we will have three main functions:
2. Function Definition
Let’s start by defining the press(num) function:
Note that we’ve defined ‘expression’ as global. This means that we will be able to use it anywhere - both inside and outside of functions.
Next we’ll go ahead and define our equalpress() function:
Finally, we’ll define our clear function. All this will do is set the expression to an empty string when the button is pressed.
3. Expression Field Formatting
Now that we’re done defining all our functions, we can start formatting the calculator’s GUI. To start, we’ll create the GUI window (this will be the window where the calculator shows up), and set its dimensions. We will also prevent the window from being resized, which would mess up the alignment of the buttons. I’ve also added a line at the end to set the background colour to a dark grey colour. This will create more contrast between the buttons and the background of the window. At the end the code should look like this:
Once the calculator window has been created, we need to make the expression field. This is the part of the window where the expression will show up. Here's how we'll do it:
Note that at the beginning we defined the expression as a StringVar. This is a Tkinter function that will allow us to monitor any changes to the variable if needed. Now that the second step is complete.
4. Button Formatting
It’s time to add the buttons. To do this, we will need to create the button name variable and set it to a button, then we can add the visual components. We will be adding text and colours, setting the buttons' height and width, and adding lambda commands to control the buttons. On the next line, we will place the button by using the .grid command to specify which row and column it will be in. You may want to decide where you want each button before beginning to code, as it will make deciding where to place each button in much easier. After the first button’s code is finished, it should look something like this:
To make things easier, after the first button is done, you can copy and paste the code to create the other buttons. All you need to do from there is change the symbols that show up and the numbers in the press() function. In the end, we will have:
And also the operators buttons:
Now that most of the number and operations buttons are complete, we have only 2 more buttons left to code! Because we defined equal and clear as functions in the beginning, they will have command= function name instead of command= lambda. Other than that minor difference, they’ll be the same as the rest of the buttons. I will let new students know how can we do without lambda function, so in the end the code should look like this:
Finally, we need to add the line of code that will start the GUI. To do this, the code will be:
And now we’re done! Feel free to test your code and see how it works!