Let's make a calculator!

  • 17 favourites


4,156 visits, 7,343 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Hey there!

My very first tutorial, this one, far from technical, not a game and aimed to help beginners to complete a very simple project.

I follow a rule: KISS (Keep It Simple, Silly)

It's an incredibly simple calculator, the makes the four basic operations (add, subtract, divide, multiply).

From this simple calculator, after completing my advice, you'll be able to be on your own and expand it with more calculations (square root, for instance, adding and subtracting percentages).

I kept it minimal and small, because it's envisioned as a phone app and to make you want to improve upon it's looks. Control will be made by mouse. Yet another challenge: Add touch control! :)

Here's the finished work:

First things first, the buttons:

Fire up your image editor of choice and create simple squares for all 10 numbers (1,2,3,4,5,6,7,8,9,0), operands (+,-,/,*), clear (c), and equal (=).

I used Paint.NET, creating all buttons with 35 pixels on all sides, creating layers with the text, saving them to .png one by one.

Place them in your layout as you wish or makes sense to you.

Put also a text box on the top.

Add a mouse and touch object to interact with the objects.

Now, let's Construct!

Better yet, let's stop and think first and let's be logical about it. Wee will work with 2 values and an operation between them:





What do we have here? An initial value, an operator, another value and the end result.

So, we need two variables for each initial value, we need a variable to decide the operation to make, and a variable to post the end result.

4 variables:

calc_1 <- first value

calc_2 <- second value

operation <- operation to execute (1 will be add, 2 subtract, 3 divide,4 multiply)

result <- end result

Lets be cool and add a variable to write things on the text box.

1 variable:

textbox <-text to display when text box is clear or upon initialization

Now, when you turn your calculator on, you see a 0 on the screen. Let's try that.

We need to initialize "textbox" to 0. Add it as a global variable of 0, type number.

Add an event-> On start of layout -> Action -> TextBox -> Set Text -> textbox

If you run your project, you'll the textbox with a 0 there. It's working. :)

Close the webpage and let's get back to work!

Ok, to add a number to a variable without adding to it you need to use &, so the number you press on is written after the ones you have already typed.

So, for button 1 (and all others, change accordingly):

Add event: Mouse-> On object clicked-> sprite for number 1

Add action: Set textbox to textbox&"1"

Add action: Set text box text to textbox

Get it? the &"1" appends 1 to the end of the text in textbox, and you type the text in the text box.

Try it, if you want, and then do the same for all remaining numbers.

After all 10 numbers are down, time to do maths.

Fortunately, we have it easy. We dealt with the typing part, lets think about the operations we will make:

Get a value, add, subtract, divide, multiply the second one

So, on the operand buttons (change accordingly):

Add event: Mouse-> On object clicked-> sprite for add

Add action: Set calc_1 to textbox (save first value)

Add action: Set operation to 1 (select operation)

Add action: Set Text Box text to "" (empty text box)

Add action: Set textbox to 0 (reinitialize our variable)

Now we can save the first value, clear our text box and prepare for the second value.

Try it out, though the operation will not happen just yet.

Time to do real maths

You now need to invoke the operation after typing the second number by pressing =:

Add event: Mouse-> On object clicked-> sprite for equal

Add another condition: System - Compare two values operation equals to 1

Add action: Set calc_2 to textbox

Add action: Set result to calc_1+calc_2

Add action: Set text box text to result

Do the same to the other operations, and test your first calculation! Press a few numbers, press add and press a few numbers again. Then press = and the result appears.

To clear all values and reset our calculator:

Add event: Mouse-> On object clicked-> sprite for clear

Add action: set text box text to "0"

Add action: Set calc_1 to 0

Add action: Set calc_2 to 0

Add action: Set operation to 0

Add action: Set result to 0

Add action: Set textbox to 0

Hope it's useful!

Here's the capx: dl.dropbox.com/u/60029808/calculator.capx

EDITED: Link to Capx changed.


  • Order by
Want to leave a comment? Login or Register an account!