Basic Calculator: Preparation

Sample project: http://jsfiddle.net/riskun/H972G/

Preparation

Before we proceed with building this basic calculator, we first need to identify the physical elements (HTML-CSS) of this application as well as the tasks that we expect it to perform.

First, this calculator will contain the following objects:

• Shell (or "casing") of the calculator
• Ten number keys (0 to 9)
• Four operator keys (addition, subtraction, multiplication, division)
• Delete button that will "undo" each user interaction
• Process button that will compute the generated arithmetic problem
• "Screen" element that displays the generated arithmetic problem

And we can expect that each element will contain the following actions:

• Upon pressing a number or operator key, the code will append the relevant number or operator into the screen
• Upon pressing "delete," the screen will delete off the last character (number or operator) that has been inserted
• Upon pressing "process" button, the code will compute the existing problem in the screen and and display the answer via a pop up window