07 - 05 - Calculating Hooks

[aksnell]

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

• [x] Implement something similar to the example UI using HTML and CSS inside a React app
• [x] As a user, I should be able to add two numbers
• [x] As a user, I should be able to add subtract numbers
• [x] As a user, I should be able to add multiple numbers
• [x] As a user, I should be able to add divide numbers
• [x] The clear button should reset the current calculation

Adventure Mode

• [ ] Show the user their history in a list
• [x] 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.

[aksnell]

https://calculator-theor.netlify.app/ https://github.com/aksnell/calculator

[gstark]

Somehow, just somehow I knew your code would use eval: eval(output) ;)

[aksnell]

Your homework 08 - 01 - Calculating Hooks was marked: Meets Expectations

“Well done!”