This simple calcualtor application was built alongside WebDevSimplified with html, CSS, and React. No additional libraries were used for calculations.
'The Perfect Beginner React Project by WebDevSimplified
'Learn useReducer In 20 Minutes' by WebDevSimplified
Additional Resources :
- Deploy React App to GitHub Pages: https://github.com/gitname/react-gh-pages
I chose this tutorial to help me pratice the basics of React as well as state management. This was also my first time building a calculator application.
This tutorial helped me get started in React by practicing re-renders, state management, and breaking down code into components. Additionally, the userReducer hook was used to handle the state transitions based on different actions. The reducer takes the current state and an action as input and returns the new state. I watched the video 'Learn useReducer In 20 Minutes' by WebDevSimplified to help me understand this new concept. A common approach for handling different action types are switch-case statements, although it can also be implemented with other techniques or patterns.
Calculator is able to add, subtract, multiply, and divide multiple step equations. DEL (delete) deletes a single digit and AC (all clear) clears all digits and calculations.
Edge cases addressed:
- Only one zero is permitted before decimals, and each operand can only have one decimal.
- Newly typed digits overwrite previous calcuations. (example: I calculate 10+2=12, when I type 3 the display reads '3' not '123')
- Integer values are formatted with commas. (Decimals do not receive additional formatting.)
- Email [email protected]
- LinkedIn https://www.linkedin.com/in/elizabetholsavsky/
- Portfolio https://elizabetholsavsky.com/
- Hashnode Blog https://blog.elizabetholsavsky.com/
- Twitter @elizavsky