This is a calculator app.
It will, hopefully, showcase my skills.
- React
- Vite
- Jest
- React Testing Library
npm i @babel/preset-react npm i --save-dev babel-jest @babel/core @babel/preset-env npm i --save-dev @testing-library/react @testing-library/jest-dom npm i --save-dev jest-environment-jsdom npm i --save-dev jest-transform-css
Calculator is broken up into two sections; text view and input buttons.
For the input view the user would see the result of a caculation and could add input as text.
Biggest issue is the parsing of the input string.
The input string needs to be parsed for tokens.
Should this be a full parsing? Manually?
One option would be to drop the input string and instead make the buttons act out the operator. This is weak.
The other option is for the buttons to add tokens to the input string.
This means that the input string needs to be parsed for validation to indicate to the user when they have written a bad function. Assume closing brackets at the end for on the fly error checking. Do full error checking on execute.
How to parse the input string? Using a DAG and grammar. Us CYK for parsing the string.
Rules: N = N + N N = N * N N = N - N N = N / N N = N % N N = N ^ N N = N ! N = ( N ) N = N . N
Symbols: N = Number
- = Add
- = Subtract
- = Multiply / = Divide % = Modulo ^ = Power ! = Factorial ( = Open Bracket ) = Close Bracket . = Decimal
Buttons: 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, +, -, *, /, %, ^, !, (, ), ., =, <
The input buttons would be a grid of buttons for the numbers and operators.
Another button calculates the result.
The text view would display the result of the calculation.
The user can also type text in the text view.
The app contains a text view and the button grid.
The text view is a root component.
The button grid contains buttons in a grid.
The buttons are root components.
When a button is pressed it calls a callback from the button grid.
The button grid processes the button callback and simplifies it into a singular callback to the app.
The app processes the grid callback and constructs and checks the string. It also notifies the input view of the change.
When the input string is updated it will call a callback to update the app's string.
The app checks the string.
When execute is receieved the app will process the string and save the value into memory and notify the input string to display the result.
- Check that the component displays the assigned symbol
- Check that the component calls the callback when pressed with the correct symbol
- Check that the component displays the buttons properly
- Check that the component displays the text
- Check that the component calls the callback when the text is updated
- Check that the component indicates invalid symbols when the string contains invalid symbols
- Check that the user cannot input invalid symbols
- Check that the component indicates an invalid equation when the equation is invalid
- Check that the component displays the text view and button grid
- Check that the component updates the whole string when the input string is updated
- Check that the component appends a symbol when the grid updates with a new symbol
- Check that the component removes a symbol when the grid updates with a delete symbol
- Check that the component parses (validates) the input string when it changes
- -removed from business logic-
- Check that the component evaluates the parse of the input string with the following tests: 7.0. 1 = 1 7.1. 1.5 = 1.5 7.2. 1 + 2 = 3 7.3. 1 + 2 * 3 = 7 7.4. 1 + (2 * 3) = 7 7.5. (1 + 2) * 3 = 9 7.6. (1 + 2) * (3 + 4) = 21 7.7. 1 + 2 * 3 * 4 = 25 7.8. 12 % 5 = 2 7.9. 12 % (5 + 3) = 4 7.10. (12 % 5) + 3 = 5 7.11. 5 - 2 = 3 7.12. 2 - 5 = -3 7.13. 5 / 2 = 2.5 7.14. 2.5 * 3 = 7.5 7.15. 3 ^ 2 = 9 7.16. 2 ^ 3 = 8 7.17. 2 ! = 2 7.18. 5 ! = 120
AI was used to create the utils.
AI was used to helpw ith the CSS layout.
The components have css modules, but jest does not support them, so using strings instead for now.