basic-stateful-input-controls-react

Stateful web controls via React JS Hooks. Less code written as much as possible.

Features:

1. Border colors of input elements change after focusing the input element.
2. Auto calculation occurs while tapping into input elements.
3. Calculation result appears in the input elements.
4. Any complex and correct expression should be calculated.
5. Border colors imply that written expression is correct or not.
6. ? appears when the expression is incorrect.
7. Destroy everything button erases all variables, props, states, etc.
8. Responsive Design
9. Prettier configured. (Please write npx prettier --write . to the console :))

After executing npm start, below screen appears:

Focusing NumericInput:

Responsive display on mobile phone:

Correct expression written into CalcInput:

False expressions written into NumericInput and CalcInput:

False expressions written into Custom Syle:

Available Scripts

In the project directory, you can run:

npm install

Installs the apps packages and any packages that it depends on.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npx prettier --write .

Beautifies the entire project.