New freeCodeCamp Project: JavaScript Calculator

[CHEUNG-K-Jeffrey]

I did the minimal setup for the JavaScript Calculator project.

The project requirements need to met.

Here is the list of project requirements: Objective: Build an app that is functionally similar to this: https://javascript-calculator.freecodecamp.rocks/.

• [x] User Story No. 1: My calculator should contain a clickable element containing an = (equal sign) with a corresponding id="equals".

• [x] User Story No. 2: 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", and id="nine".

• [x] User Story No. 3: 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".

• [x] User Story No. 4: My calculator should contain a clickable element containing a . (decimal point) symbol with a corresponding id="decimal".

• [x] User Story No. 5: My calculator should contain a clickable element with an id="clear".

• [x] User Story No. 6: My calculator should contain an element to display values with a corresponding id="display".

• [x] User Story No. 7: At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of display.

• [x] User Story No. 8: As I input numbers, I should be able to see my input in the element with the id of display.

• [x] User Story No. 9: 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 the id of display.

• [x] User Story No.10: When inputting numbers, my calculator should not allow a number to begin with multiple zeros.

• [x] User Story No. 11: When the decimal element is clicked, a . should append to the currently displayed value; two . in one number should not be accepted.

• [x] User Story No. 12: I should be able to perform any operation (+, -, *, /) on numbers containing decimal points.

• [x] User Story No. 13: If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign). For example, if 5 + 7 = is entered, the result should be 35 (i.e. 5 7); if 5 - 5 = is entered, the result should be -25 (i.e. 5 (-5)).

• [x] User Story No. 14: Pressing an operator immediately following = should start a new calculation that operates on the result of the previous evaluation.

• [x] User Story No. 15: 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 / 7 with reasonable precision to at least 4 decimal places).

Test suite: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

[CHEUNG-K-Jeffrey]

This time I'm going to build the app with Vue.js. Maybe Vue.js will be easier than React.js?

[CHEUNG-K-Jeffrey]

I'm going to use vue3-sfc-loader, which allows using .vue aka Single-File Components from HTML. It doesn't require the use of a build system and makes it run in the browser. I thought I was going to give up using Vue.js and go with what I did with the Drum Machine project.

[CHEUNG-K-Jeffrey]

The UI looks decent, but the architecture needs to be redesigned with state management like Pinia to make the calculator function.

[CHEUNG-K-Jeffrey]

According to the freeCodeCamp JavaScript Calculator Test Suite, it passes. But as of commit 7b4154d, my calculator doesn't actually handle using a result with a negative number very well. It bugs out and throws errors. This shows how comprehensive the freeCodeCamp test suite can be, not that it's comprehensiveness matters as I'm mostly using freeCodeCamp for coding practice in JavaScript.

The bug could be fixed by adding a check for negative numbers on the result and returning for example: [0,"-","9"] It will display 0-9 with the fix, and the display getter would need to be rewritten to hide the 0-.

[CHEUNG-K-Jeffrey]

The bug could be fixed by adding a check for negative numbers on the result and returning for example: [0,"-","9"] It will display 0-9 with the fix, and the display getter would need to be rewritten to hide the 0-.

Fixed with a2abc72

[CHEUNG-K-Jeffrey]

I fixed a bunch of bugs not on the test suite. I'm done with this project. The architecture is good enough for this simple calculator.