For this assignment, your task is to build a React calculator application that performs basic arithmetic. Start by forking and cloning this repository to your development environment. Then, using the provided template files and without using the eval() function, create a React calculator application that performs multiplication.
Performs division.
Performs addition.
And performs subtraction.
The calculator must work with both positive and negative operands.
And the clear button must delete the contents of the screen.
If the arithmetic expression is not valid, the screen must display the word Error and all operand, operator, and equal button clicks are ignored until the clear button is clicked.
Likewise, if the arithmetic expression contains more than one operator, the screen must display the word Error and all operand, operator, and equal button clicks are ignored until the clear button is clicked.
HINT #1: Display a blank screen when the application first renders.
HINT #2: When evaluating the screen's arithmetic expression, match it with the following regular expression.
/^(\-?\d+)(x|\/|\+|\-)(\-?\d+)$/For example, matching the arithmetic expression -1+2 to the above regular expression works like this.
const matches = '-1+2'.match(/^(\-?\d+)(x|\/|\+|\-)(\-?\d+)$/);
console.log(matches); // ["-1+2", "-1", "+", "2"]The String.prototype.match() function returns null if there's no match. In this case, update the screen with the word Error. However, if there's a match, evaluate the arithmetic without using the eval() function and update the screen with its results.
HINT #3: Figure out how to map the plus "+" string to the actual JavaScript plus + operator. Once you figure that out, apply the same technique to the other arithmetic operators.
Refactor the application to handle keyboard input to the calculator's screen. When the screen is focused, input from the keyboard must must change the screen's value.
Pressing the Enter key must evaluate the screen's arithmetic expression.
And pressing the Escape key must clear the screen.
Using your preferred ESLint rules, lint your project with the npm run lint . command.
Refactor the application to correctly handle arithmetic expressions that contain more than one operator.
The solution is available to instructors as well as students who've completed this assignment.