Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Build a Calculator!

Because you always need one, right?


DEMO: Javascript Calculator


Computers are pretty much fancy calculators. They can do computations at an insanely fast speed and that’s why we love them. Growing up, I was always taught to do math by hand or in my head. As I got to high school and college, I jumped from barely using a calculator to learning how to use a scientific calculator. It was kinda overwhelming to be honest.

For this project, however, I’m just going to build a plain and simple calculator. “Plain and simple” meaning that it won’t feature any special tools for anything other than adding, subtracting, multiplying and division. Simple isn’t always simple though…

 

Build it… Simple?

To get started, I needed to identify any areas of concern that a user may not be thinking about when using a calculator.

Basically assumptions that users will make based on their previous use of a calculator. While this calculator may not be full of fancy features, building something “simple” is always easier said than done.

A calculator standardly accepts numeric values and operators in order to compute a result. What users typically don’t realize is that the calculator must also be smart enough to validate the input and make sure the user isn’t inputting a bunch of nonsense.

 


What does “validate” mean? Validation is just a fancy programming term for checking the value and type of an input. User input can be undefined, null, a boolean, an array, a string and/or a number. To “validate” the input, you just need to make sure the input matches the type of input you want.


 

This would result in an error, or worse, just break the program.

So some of the “assumptions” I had to considered were:

  • Users can’t enter an operator as their first input.
  • Users can’t enter more than one decimal into a given number.
  • Having an “AC” and a “CE” button.

First let’s get the variables up and assign them their values:

 

Validate, validate, validate…

How would you calculate the following?

+47-33.001102.00

It just doesn’t make sense. The input has an operator first and two decimal points.

The first function of this project focuses on check for these problems first, before moving on to computing the results.

 

 

If the input passes all validation, the input can now advance onto the next phase of the program, which is the function update(). This function simply allows the inputs to be added and joined together as one string or item within the program.

 

 

AC and CE Buttons

Calculators have some other buttons on there too. There’s the “AC” button and the “CE” button.

The “AC” button clears the entire calculator’s memory, while the “CE” button simply deletes the last number or operator entered.

The statement would check to see if the user inputs validates as an AC or CE input first before passing the input onto computing.

 

 

Once it’s been validated as not being an AC or CE input, the numbers are simply pushed up into the¬†getValue() function and the program will return the final result.

As a final touch to the project, I decided to make the calculator a little visually interesting. The styling for this project was based on a retro, solar-powered calculator I once used as a kid in elementary school. It was the first one that came to mind so I just kind of went with it for nostalgia’s sake. Everything works the same way, except for the solar powered window on the calculator.