How to create a standard calculator using PowerApps?

In this Project I made a Calculator using Power Apps. Further I will discuss how it works and how I made it. This is how it Looks Like-

How it works

The operation of the calculator is defined by 4 context variables i.e.,
(a) _val (b) _operator (c) _operand (d) _decimal

1. _val: result of the latest computation
2. _operator: what mathematical operation are we currently performing. Can be “+”, “-“, “*”, “/” representing the four basic mathematical operations. It can also be “#”, representing number entry when no operations have been applied yet.
3. _operand: the number to the right of the current operation. For example, when computing 1 + 2 =? _operand represents to the number “2”.
4. _decimal: current number of decimal places. Helps take care of entering numbers with decimal points.

The Beginning

In the beginning phase, we start by setting all variables to their initial values. We do this on the screen OnVisible, and also on the Clear button’s OnSelect property:

UpdateContext({_val:0,_operator:"",_operand:0,_decimal:0})

Number Entry

Each time a digit 0-9 is pressed, we update the value of _operand to include the new digit. We multiply the number we already have by 10, and then add the new digit. We have to mind here when a user entering negative number(which they can by “+/-“ Button). In that case, we need to subtract the digit that was pressed instead of adding it.

We keep track of the number of decimal places already entered with the variable _decimal. When the “.” button is pressed, we set _decimal to 1. After every key press of 0-9 after this, we update _operand by adding (or subtracting if the number is negative, as mentioned above) 10^(-_decimal)*DIGIT_PRESSED, where DIGIT_PRESSED is just the number of the button that was pressed (0 – 9).

Example: Syntax of Button 5’s OnSelect:

UpdateContext({
_operand: If(_decimal>0,_operand+If(_operand<0,-1,1)*10^-_decimal*5,
_operand*10+If(_operand<0,-1,1)*5),
_decimal: If(_decimal>0, _decimal+1, 0),
_operator: If(IsBlank(_operator), "#", _operator)
})

The four mathematical operations

The logic for each of the mathematical operations can be described as a  sequence of two steps.

1. Update _val with the result of previous mathematical operation
2. Prepare for the next mathematical operation

The First part is as follows:

UpdateContext({_val:If(_operator="#", _operand,<br> _operator="+", _val+_operand,<br> _operator="-", _val-_operand,<br> _operator="*", _val*_operand,<br> _operator="/", _val/_operand,<br> _val)})

The way to understand this syntax is:

• If _Operator is “#” we set _val to the current value of _operand(i.e. we store the initial number entered by the user )
• If _operator is “+”, “-“, “*”, “/” , we apply the corresponding operation between _val and _operand and store the result in _val,
• Otherwise, we leave _val untouched. This can happen if a user pressed any of the mathematical operations or the equals sign before entering any numbers.

The Second part, preparing for the next mathematical operation, is simply a matter of clearing the variables _operand and _decimal, and setting the new _operator as appropriate:

UpdateContext({_operand:0,<br> _decimal:0,<br> _operator:"+"})

The “Equals” button follows a similar logic, but sets _operator to “” (empty string, so that the next time a number is entered, it will replace _val).

Together, the complete syntax of “+” Button is:

UpdateContext({_val:If(_operator="#", _operand,<br> _operator="+", _val+_operand,<br> _operator="-", _val-_operand,<br> _operator="*", _val*_operand,<br> _operator="/", _val/_operand,<br> _val)});<br>UpdateContext({_operand:0,<br> _decimal:0,<br> _operator:"+"})

The Percentage button

The percentage button works by updating _operand to be a percentage of the current _val.

UpdateContext({_operand:_val*_operand/100})

Number display

This is the most challenging task to display the right operation and result of calculations, but here I took help of a developer from PowerApps Blog. In my app I use two labels to display the operation and results respectively.

1. ResultLbl text function(The Big Numbers)

Round(If(IsBlank(_operator) || _operand=0, _val, _operand),6)

2. And the Another label i.e., smaller in above the Large numbers, that indicates the current operation: LblOperation

If(_operator = "#", Round(_operand,3) & "",
!IsBlank(_operator), Round(_val,3) & " " & _operator & " " & Round(_operand,3),
Round(_val,3))

The PowerApps Embedded App link is below. You can click and try the app.

https://apps.powerapps.com/play/3d88d1de-17e3-4505-9a0c-0e9632fe8a34?source=iframe

And that’s the end of this post. Let me know if you have questions or suggestions for future posts, and I’ll see you next time 🙂🙂