- You will create a React app that mimics a simple calculator
- Please use
create-react-app
to generate your project - Break your application down to necessary components
- Your app should look, feel and work like this: Live Example
- AC: Clears all of the data in the screen
- C: Clears only what is being displayed
- %: Converts the current value into a percentage. So just
x / 100
- ±: Toggles between negative and positive number
- . : Adds decimal point to the current number
- Operations: Queues the operation
- Equal to: Invokes the operation to happen
- Play around with the Live Example
You can use the following state:
{
displayValue: '0',
previousValue: null,
operation: null,
waitingForNewValue: false
}
-
Center your calculator so it takes up
50%
of the screen -
You may use the following button css to get started quickly:
.button { background-color: #E0E0E6; font-size: 40px; text-align: center; color: #666666; border-left: 1px solid #666666; border-bottom: 1px solid #666666; user-select: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); display: block; } button:active { box-shadow: inset 0px 0px 80px 0px rgba(0,0,0,0.25); } .orange { background-color: #EE9B3E; color: #fff; }
-
Try your best to make it look like the example