Skip to content

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).
Loading