Html: Calculator

Create a calculator using the following layout:

The calculator is centered on all axes in the template. You will learn more about this in the Flex course.

Wrapper

• Width: 300 pixels
• Background color: #2c3e50
• Font: Roboto Mono. Fonts are in the assets directory

Block with the calculated output

• Paddings: 30 pixels each
• Text color: white
• Background color: #505c68
• Right-align

It contains two paragraphs. The expression has #ced4d9 color and 80% font size. The result of the calculation has a font size of 3em. Paragraphs have 5 pixels margins at the top and bottom.

Buttons

Create a wrapper for each row of buttons. A row contains 4 evenly placed elements.

• Button height: 75px
• Button is a block-level element. Use a display property with a block value
• Font size: 1.2em
• Reset buttons' default styles: border and background properties
• Specify a cursor using a property of the same name with a pointer value
• When you hover over the button, its background color changes to #364c63
• Delete button has 80% font size

Every fourth button in a row should be blue. For this purpose, we have styles for the .bg-blue class.

Use HTML special characters to embed the proper ones. Write special sequences that tell a browser to display a character unavailable in the standard keyboard layout. These characters are inserted directly into the HTML markup. Each special character has a specific syntax, it begins with an ampersand & and ends with a semicolon ;.

• Minus sign: −
• Plus-minus sign: ±
• Division sign: ÷
• Multiplication sign: ×

Tips

• Note the available classes in the app.css. Some of them may come in handy
• Use a special tag <button> for buttons. It'll ensure proper semantics and accessibility