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 ablock
value - Font size: 1.2em
- Reset buttons' default styles:
border
andbackground
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
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.