Practicing 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 components
practice implementing a UI wireframe
Requirements
Create a simple calculator that allows the user to add, multiply, subtract and divide two numbers. You implement this UI:
Explorer Mode
[ ] Implement the Above 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. As in, the user should be able to input 2 + 3 - 4 + 5 and get an 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, orders of operations, etc.
Notes
Take this in small steps just like we did in class. Start with the HTML, then CSS, then with basic functionality
CelesteSippel
commented
4 years ago
Calculator Fun
Practicing 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. You implement this UI:
Explorer Mode
Adventure Mode
2 + 3 - 4 + 5and get an answerEpic Mode
Notes