In the first post, I presented a basic functioning calculator. If you missed it, you can check here (Building A Calculator – Part 1).

In this post we will begin going through the steps to create the framework for the calculator.
Essentially, this is the body, buttons, and display of the calculator.

As with all things like this, I am sure there are lots of ways to approach the task. Feel free to layout your buttons differently, change the colors, etc as you desire.

Buttons

This calculator uses a total of 19 buttons
– Eleven number buttons (0-9 plus the decimal button)
– Four operation buttons (plus, minus, times, divide)
– Two function buttons (Percent and polarity)
– A clear button
– An equals button

Displays

This calculator uses four rectangles as different displays
– A display to store the first numeric entry
– A display to store the second numeric entry
– A display to store the calculated answer
– a small box to display the symbol current operation being performed (**optional – not shown in video**)

Body

This calculator has eight elements that make up the body
– A large rounded rectangle for the main body of the calculator
– A rectangle for the model number (Stagcalc 3000) (**optional not shown in video**)
– Six small rectangles to make the “solar panel” (**optional not shown in video**)

Creation Tips for Buttons

Here is my recommendation for creating the buttons. Do with it as you wish.
1. Draw out a rounded rectangle to a size of your liking.
2. Format the background color and border color to taste.
3. Format the button text to taste.
4. Check the “Use as button” box.
5. Duplicate the button as many times as needed.
6. Arrange, align, and modify the buttons as desired. (I chose to make the plus button a double size and the clear button a different color. I made those modifications after duplicating based on the majority.)

I prefer this general procedure so that when I duplicate, the copies will pick up as many attributes as possible to minimize doing the same setups on multiple objects – though you do have the ability to apply styles across multiple objects of the same type.

Here is a short video where I quickly try to show making the basic framework of this just to help visualize things.

Stay tuned for Part 3!