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
displayproperty with ablockvalue - Font size: 1.2em
- Reset buttons' default styles:
borderandbackgroundproperties - Specify a cursor using a property of the same name with a
pointervalue - 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
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.