HTML: Calculator

Last update: 25 Jul 00:28

Create a calculator using the following layout:

CSS calc

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


  • 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.


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: ×


  • 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.

Get access
hours of theory