Calculator Retrospective


The calculator project was a fun project to try to replicate a real life item digitally. I took my inspriation from the Windows 10 calculator. I also wanted it to look like it was sitting on a desk, thus the wood grain background image.

I remember sitting down and doing this project and it being one of the first times where it all started to make sense. I think I did this project in a single sitting. See the code review section and you'll see the huge error I made!

Code Review

The HTML is pretty straightforward. Just a couple rows with a button in each column. I included lots of col-xs-x classes so that the calculator would be more responsive. The application doesn't go all the way down to mobile phone size though.

The JavaScript is where I've commited a cardinal sin! Overall, it's just a function and click handler for each button. But, in the function to evalute the total, I used eval()! I should definitely go back and remove that eval and find another approach.

Future Improvements

I think this might be a good application to rewrite in Angular as an avenue for learning more Jasmine. Some things that need to change in that rewrite are:

  • Again, remove Bootstrap and try to layout this more complex layout with flexbox
  • Remove the jQuery dependency
  • Get rid of that eval and use some other approach to do the mathematical calculations