KS4 - Programming Activity sheet

Lesson 25 - GUIs

Add two numbers

Introduction

For this mini project, you will be creating an app that allows you to enter two
numbers and add them together. Your app will look like the screenshot below
(Mac users will see a slight variation to the screenshots presented here):

Set up your app .

Access the blank Trinket starter file here (ncce.io/ks4-tkinterstarter).

Step 1

The first step is to set up and test your app.

1 # import tkinter module

2 import tkinter as tk
3
4 # create the app with the window title “Add two numbers”
5 app = tk.Tk()
6 app.title("Add two numbers")
7
8 # display the app, this should always be last
app.mainloop()

Page 1 Last updated: 31-05-2024

KS4 - Programming Activity sheet
Lesson 25 - GUIs

Note: The comments don’t influence how the code is executed, but they are useful for
reminding you of what each line of code does.

Step 2

Test that the program works successfully.

Build the app .

Now it’s time to build our app. The program uses the following widgets:

App, Label, Entry, Button

Step 1

Your code for adding the widgets to the app needs to be placed between the app
creation line of code and the app display line of code. See below:

app = tk.Tk()
app.title("Add two numbers")

# add your widget code here

app.mainloop()

Step 2

Take a look at the layout for the app that you are going to build and note the
required widgets.

Page 2 Last updated: 21-05-21

KS4 - Programming Activity sheet
Lesson 25 - GUIs

Label Entry

Button

Step 3

You can be really specific about where your widgets are placed and you can
explore these options later. In this project, you will simply be placing one widget
after the other in a sequence.

This sequence goes:

Label
Entry
Label
Entry
Label
Button

This means that you will need six lines of code to add all of the required widgets
onto the app.

Each widget needs its own unique identifier, like a variable name.

Here is a table to help you with the identifiers of each widget.

Page 3 Last updated: 21-05-21

KS4 - Programming Activity sheet
Lesson 25 - GUIs

Identifier Widget

instructions Label

enter_num1 Entry

instructions2 Label

enter_num2 Entry

display_answer Label

display_number Button

Step 4

Below are code snippets for each widget with explanations of how they work. Use
these to help you create the first five widgets in your app. The Button will be
dealt with later.

Text
identifier = tk.Label(app, text="Text to display")
This code snippet can be used to display text. The identifier should be replaced
with your unique identifier, and the Text to display should be replaced with the
text that you wish to display.

Note: The app part of this code instructs that this widget is controlled by the app. You
can use other ‘masters’ here which you could explore later.

Entry
identifier = tk.Entry(app)

This code snippet can be used to add a text box. These work a little bit like the
input() functions that you have used before. The identifier should be replaced
with your unique identifier. The rest of the statement should stay the same.

Step 5

Test your app by running it. If it works correctly, it should load like this:

Page 4 Last updated: 21-05-21

KS4 - Programming Activity sheet
Lesson 25 - GUIs

If your app doesn’t look like the one above, then double check that you have
written your code in the correct order and that you have used the correct syntax
for each widget.

Add the Button .

Step 1

Adding the Button is slightly different to the other widgets because you want the
Button to call a subroutine when the button is pressed. The subroutine will add
the two numbers together and display the answer in display_answer.

Button
identifier = tk.Button(app, command=subroutine, text="Button Text")
The identifier is the unique name for the widget. The subroutine is the subroutine
that you wish to call when the button is pressed. The Button Text is what you
want to appear on the button.

When the button is pressed, the subroutine add is going to be called. You can
add the identifier for the subroutine here, but leave out the () part because
including it will automatically call the subroutine before you want it to.

Create the line of code that will add the Button widget.

Note: If you try to test your code at this point, you will get an error because the add
subroutine has not yet been defined.

Step 2

The add subroutine needs to be defined at the beginning of the code. You
should place this underneath the import statement.
Page 5 Last updated: 21-05-21
KS4 - Programming Activity sheet
Lesson 25 - GUIs

import tkinter as tk

# define your subroutine here

To access and/or modify the value of an Entry or Label widget, you use this code
snippet:

identifier.config()

Below is all of the code required to create the add subroutine. Your job is to place
the lines of code in the correct order and then add them to your program.
Don’t forget the indents!

display_answer.config(text=str(result))
num1 = int(enter_num1.get())
def add():
num2 = int(enter_num2.get())
result = num1 + num2

Step 3

Finally, we use the pack() method, which gives us a simple way to arrange our
widgets in our container. Before your final line of code that starts your mainloop,
take each of your widgets in the order displayed in the table and add the
following code.

identifier.pack()

Step 4
Page 6 Last updated: 21-05-21
KS4 - Programming Activity sheet
Lesson 25 - GUIs

Now test your program. At this point it should be fully functional and should look
like the screens below:

Screen on loading

Screen after entering numbers and pressing display

Explorer tasks .

● Change the Button so that it says Add instead of Display

● Create an additional Button and subroutine that will Multiply the two
numbers
● Create further Buttons for Divide and Subtract.
Resources are updated regularly — the latest version is available at: ncce.io/tcc.

This resource is licensed under the Open Government Licence, version 3. For more information on
this licence, see ncce.io/ogl.

Page 7 Last updated: 21-05-21