- Basic Calculator: Preparation

Basic Calculator: Preparation

Sample project:


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