
Javascript Calculator
- Summary: A FreeCodeCamp challenge to create a Javascript calculator.
- Source URL: https://codepen.io/michellemtchai/pen/qBNEVXR
- Demo URL: https://codepen.io/michellemtchai/full/qBNEVXR
- Stacks:
Objective
Build a CodePen.io app that fulfills the user stories and passes all the tests provided by FreeCodeCamp
Original Challenge: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator
User Stories
- My calculator should contain a clickable element containing an
=(equal sign) with a correspondingid="equals". - My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs:
id="zero",id="one",id="two",id="three",id="four",id="five",id="six",id="seven",id="eight", andid="nine". - My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs:
id="add",id="subtract",id="multiply",id="divide". - My calculator should contain a clickable element containing a
.(decimal point) symbol with a correspondingid="decimal". - My calculator should contain a clickable element with an
id="clear". - My calculator should contain an element to display values with a corresponding
id="display". - At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state;
0should be shown in the element with theidof display. - As I input numbers, I should be able to see my input in the element with the
idof display. - In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit
=, the correct result should be shown in the element with theidof display. - When inputting numbers, my calculator should not allow a number to begin with multiple zeros.
- When the decimal element is clicked, a
.should append to the currently displayed value; two.in one number should not be accepted. - I should be able to perform any operation (
+,-,*,/) on numbers containing decimal points. - If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (
-) sign). For example, if5 + * 7 =is entered, the result should be35(i.e.5 * 7); if5 * - 5 =is entered, the result should be-25(i.e.5 * (-5)). - Pressing an operator immediately following
=should start a new calculation that operates on the result of the previous evaluation. - My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like
2 / 7with reasonable precision to at least 4 decimal places).

