UI/UX: App Interface Design
Closed Jan 14, 2020
100% complete
***Use flex display mode for App, Display and ButtonPanel components
- The Calculator width should be 700px.
Style the Display component
- It should have a gray background.
- It should have a height set to 100px.
- The result should be presented with a white and bold text.
- The result should have padding from the edges.
- The result should be aligned to the right.
***Use flex display mode for App, Display and ButtonPanel components
- The Calculator width should be 700px.
Style the Display component
- It should have a gray background.
- It should have a height set to 100px.
- The result should be presented with a white and bold text.
- The result should have padding from the edges.
- The result should be aligned to the right.
**Style the ButtonPanel component
- Each row (display and group buttons) should have a height of 100 px.
- The Button groups should be displayed horizontally in rows.
**Style the Button component
- Button should take 25% of the container width, except for the button that represents the “0” (zero).
- The text in the buttons should be centered and displayed in black color.
_ Each button should have a border.
**Pass “color” and “wide” props to the Button
- The color prop should be used to customize the color of the button. If it is not passed, the button should have an orange background by default.
- The wide prop should accept a boolean to indicate that the button should have twice the standard width (used for the “0” button).