Javascript Calculator

article image

The Javascript calculator is one of the projects set out by freeCodeCamp. Where you must create a fully functioning javascript calculator using HTML, SCSS and Javascript.

Here are the list of objectives.

  • Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
  • User Story: I can add, subtract, multiply and divide two numbers.
  • User Story: I can clear the input field with a clear button.
  • User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.
  • When you are finished, click the “I’ve completed this challenge” button and include a link to your CodePen.
  • You can get feedback on your project by sharing it with your friends on Facebook.

My first task as always is to find a design I can build upon. Usually for this, I would go to dribbble.com to find inspiration, this time however, I went to my phone and decided to recreate the iOS calculator application.

The calculator wasn’t too bad to program, however as most others doing the challenge found out, there are quirks that you don’t realise at first. For instance, you should only be allowed to add one decimal point to a number and not any amount, i.e 0.23.30. Also for this exercise, I used ‘eval’. obviously not ideal as the dangers of ‘evil’ are well publicised but for this small task, the risk is minimised.

As this was a clone of the iOS calculator I saw fit to include the javascript date object to give me an accurate time for my navigation bar, just a little extra for fun.