Basic Desk Calculator

Skip to first unread message

Scott Ferguson

Dec 27, 2014, 9:20:54 AM12/27/14

Changes log 2014/12/27:

Shawn has found a bug in the original code which can be fixed by making the following change:

I have updated the aia file here to reflect this fix.

Thanks, Shawn!



The following is the script associated with the YouTube video for the Basic Desk Calculator project


Wecome back App Inventors!

In this project we will create a simple desk calculator that has the following features:

The operations of addition, subtraction, multiplication and division are supported for positive or negative decimal numbers
The display and current calculation can be cleared with the C button
The currently displayed value can be cleared with the CE button
The last digits of the currently displayed value can be removed with the backarrow button
divide by zero is supported gracefully
basic data validation is utilized to reduce input errors
To perform running calculations, the following method may be used:

to calculate (4 + 3) x 10  (answer: 70)

(1) you can perform an operation on two values at a time followed by the equals button:

[4] [+] [3] [=] [x][10] [=] 

(demonstrate a few calculations using math and other operators)
(demonstrate editing)
In the Designer Screen Viewer, a layout contains two key design elements:

A Label to display the calculator's output called DisplayLabel.
A set of buttons -- each with a meaningful name such as AddButton OneButton, etc.

layout design:

How you layout the buttons and the calculator display label is up to you.

I chose to create a vertical arrangement which contains ffour horizontal arrangements containing four buttons each to make my keypad.

There are a couple of ways that the digits can be laid out in a more or less standard way.

One way is to simulate a standard calculator's digits arrangement which has 789 on top.
Another way is to put 123 on top as is the standard for cell phones.
In this example I chose to use the cell phone 'standard' as it is more intuitive and natural to me.
(switch to Blocks Viewer)

The function of a simple calculator can be summarized as follows:

Step 1: The user enters a number.
Step 2: An operator button is pressed.
Step 3: The user enters a second number
Step 4: The equals button is pressed which causes the calculation to be performed and the result displayed

That is all that is needed for a basic calculator.

In this calculator project these five steps are handled in this way for a simple calculation using two global variables FirstNumber and Operator, 

and DisplayLabel.Text property to display the numbers and result of the calculation.

Step 1: The first number is entered one-digit-at-a-time into DisplayLabel.Text in the BuildNumber procedure.

Step 2: When an operator button is pressed, the StoreFirstNumberAndOperator procedure saves the value entered into DisplayLabel.Text in 

global FirstNumber and saves the symbol for the operator in global Operator.

Step 3: The second number is entered into DisplayLabel.Text using the BuildNumber procedure.

Step 4: When the EqualsButton is pressed, the Calculate procedure uses the global FirstNumber, global Operator and the second number 

stored in DisplayLabel.Text to perform the calculation using the correct Math arithmetic block. The result is returned to and displayed with set 

Let's examine the blocks for this project in more detail:

When any of the digit buttons are touched, their Button Click evemt blocks will call the BuildNumber procedure to add the digit to the number.
BuildNumber uses the Text join block to stich all of the digits together to build the number.

As the number is being entered the user may touch the DecimalPointButton which will trigger the DecimalPointButton.Click event block. That 

block must check if there is already a decimal point in the number before adding one, and if not, allow one to be added.

A number may contain a decimal point but a decimal point entered by itself is not a valid number.
So in order to prevent the user from entering only a decimal point the 'is a number?' test is done which will add a zero before the decimal point 

if there are no digits in DisplayLabel.Text yet. This extra step to prevent a possible error condition is an example of 'Data Validation'.

If the user touches the CE button its associated ClearErrorButton.Click event block is triggered to the DisplayLabel.Text value.
This is useful if the user has entered a number that he wants to replace with a different value but does not want to start the calculation from the 


For example: 9 + 3 was entered, but the 3 should have been a 4.
The user would then press the CE button then type a 4 then touch '=' to get the answer of 13.

If the C button is touched, its associated ClearButton.Click block is triggered which clears the DisplayLabel.Text as well as any saved values 

in global FirstNumber and global Operator. So it works like a reset button.

If an error is made while typing the digits of a number, the BackArrowButton can be pressed which triggers the BackArrowButton.Click event 

block. That block first tests if DisplayLabel.Text is empty before attempting to remove the last digit entered.
Once it is determined that the Label is not empty, the Text segment block is used to remove the last character from the label. So it works like a 

backspace key.

If the +/- button is pressed, it's associated ChangeSignButton.Click block is triggered which negates the contents of DisplayLabel.Text if it is 

not empty. Negating a positive number makes it negative. Negating a negative number makes it positive.

If any of the operator buttons are touched, their associated Button Click blocks will be triggered.
The StoreFirstNumberAndOperator procedure is called and a text symbol for the operator is passed to the procedure as an argument.
StoreFirstNumberAndOperator then tests that DisplayLabel.Text is a number? then stores the contents of DisplayLabel.Text in global 

FirstNumber and stores the value of the passed Operator in global Operator.

Once the user has entered a second number into the DisplayLabel.Text and pressed the equals button, it's associated EqualsButton.Click 

block is triggered which checks that an operator symbol was saved, then calls the Calculate procedure which returns the result of the 

calculation to DisplayLabel.Text.

global FirstNumber and global Operator are then cleared for the next calculation.

Since there is a number from the calculation in DisplayLabel.Text after the equals button is pressed.,  it can be used to do a running 

calculation, if desired.
Well that sums up the Basic Desk Calculator.
I hope you enjoy working with this project and have found this tutorial useful.
Watch for the link to the aia project file in the credits following this video.
And as always - hAPPy INVENTORing!

Short URL for this post:


Keith Turner

Apr 3, 2015, 9:16:53 AM4/3/15
Thanks for posting the app and tutorial - it's helping me learn alot.  I've used your code as a launching pad to stretch myself a bit.  I am stuck on one point (there may be more under that) but lets say one for now.  would you be willing look at my .aia and see where I went wrong? 



Scott Ferguson

Apr 14, 2015, 10:05:58 PM4/14/15
Sorry, my support for this site is on hold for at least the near future.

Ghica van Emde Boas

Apr 16, 2015, 4:47:56 AM4/16/15
Hi Keith,
I may be willing to help you out (not this week though). But it would help if you could point out what your problem is.
Cheers, Ghica.


May 13, 2015, 2:34:00 PM5/13/15
Hi! Is possible delimit the number of digits of a text box? For example, when the number of digits exceed the screen limit, then the next digit to go to the below line?

I know this is possible with the label, as in Scott's calculator, but I need the text box .. Thanks.

Sep 29, 2015, 9:31:17 AM9/29/15
to App Inventor Developers Library

I was just wondering if you knew a fix for when you press 0 as the first digit it doesn't repeat itself when you click it again??

On Saturday, December 27, 2014 at 2:20:54 PM UTC, Scott Ferguson wrote:

Changes log 2014/12/27:

Shawn has found a bug in the original code which can be fixed by making the following change:

I have updated the aia file here to reflect this fix.

Scott Ferguson

Sep 29, 2015, 2:31:47 PM9/29/15
to App Inventor Developers Library
Just check if the label.Text = '0' then you will know not to let it put another 0 there.

Guide My Finance

Oct 28, 2017, 11:05:18 AM10/28/17
to App Inventor Developers Library
Hey is it possible to show the previous number "First number" when we press operator or addition (+), minus9-) etc button. bcz it going away whenever we chick next number.  
Reply all
Reply to author
0 new messages