Practice is key to gaining the mileage needed to conquer programming. A very common practice problem is to recreate a working calculator. A basic calculator is a good exercise in using state, effects, and components to create a powerful and robust UI.
Objectives
Practice using functional components with hooks
Practice implementing a UI wire-frame
Requirements
Create a simple calculator that allows the user to add, multiply, subtract, and divide two numbers. Here is a sample UI:
Notes
Take this in small steps just like we did in class. Start with the HTML, then CSS, then with basic functionality.
Explorer Mode
[ ] Implement something similar to the example UI using HTML and CSS inside a React app
[ ] As a user, I should be able to add two numbers
[ ] As a user, I should be able to add subtract numbers
[ ] As a user, I should be able to add multiple numbers
[ ] As a user, I should be able to add divide numbers
[ ] The clear button should reset the current calculation
Adventure Mode
[ ] Show the user their history in a list
[ ] Be able to chain together results. For example, the user should be able to input 2 + 3 - 4 + 5 and get the correct answer
[ ] Let the user use their keyboard in addition to the mouse
Epic Mode
[ ] Using your systems calculator app as inspiration, implement as many features as you can, including, but not limited to scientific mode, exponents, and the order of operations.
Practice is key to gaining the mileage needed to conquer programming. A very common practice problem is to recreate a working calculator. A basic calculator is a good exercise in using state, effects, and components to create a powerful and robust UI.
Objectives
Requirements
Create a simple calculator that allows the user to add, multiply, subtract, and divide two numbers. Here is a sample UI:
Notes
Explorer Mode
Adventure Mode
2 + 3 - 4 + 5and get the correct answerEpic Mode