Create a calculator in HTML and CSS

Creating a calculator can be a fun way to learn Javascript.

Before you jump into the Javascript side of things, consider the HTML and CSS.

A calculator is also a great project for learning CSS.

We will walk through not only creating the calculator in HTML and CSS but I will also point out some different design options for a beautiful calculator that stands out.

Get ready to learn a little HTML, CSS, and design that you will be able to take with you as you work on this and other projects in the future.

The HTML Structure

To get started, let’s create the HTML structure for your calculator.

In addition, let’s create the class names that we will use to style the calculator.

For this project we will use the BEM naming methodology.

Since BEM is arguably the most popular naming methodology, if you're new to it this will be a great opportunity to begin to learn it and see it in action.

The Calculator Wrapper

Okay, let's get started!

Depending on where you’re going to be placing your calculator, you may want to use some semantic HTML elements like <section> or <aside> to wrap your calculator.

This really depends on where you’re putting the calculator and what else is on the page.

I’ve opted to keep it very vague and stick with a general <div> element as the container for our calculator:

html
1<div class="calculator">
2  <... claculator output and keys go here ..>
3</div>

The Calculator Output

The area where the calculation results are shown should be along the top. So, that’s the next element to include:

html
1<div class="calculator">
2  <div class="calculator__output">0</div>
3  <... claculator keys go here ..>
4</div>

You can see BEM naming methodology in action with the class name we're using for the calculator output area.

The block is obviously the calculator. The first element of the calculator is the output, hence calculator__output for the class name following BEM naming conventions.

The Calculator Keys

The last bit of the HTML that we need to include is the keys of the calculator.

We need the numbers 0-9, a period, the enter key, and the operator (addition, subtraction, multiplication, and division) keys. We will also need a key to clear the output.

We will need to lay these out separately from the main calculator structure. To do this, we’ll simply wrap all these keys together in an HTML element. In this case, another general <div> element.

Additionally, each key will be a button element.

html
1<div class="calculator">
2  <div class="calculator__output">0</div>
3  <div class="calculator__keys">
4    <button class="calculator__key calculator__key--operator">+</button>
5    <button class="calculator__key calculator__key--operator">-</button>
6    <button class="calculator__key calculator__key--operator">&times;</button>
7    <button class="calculator__key calculator__key--operator">÷</button>
8    <button class="calculator__key">7</button>
9    <button class="calculator__key">8</button>
10    <button class="calculator__key">9</button>
11    <button class="calculator__key">4</button>
12    <button class="calculator__key">5</button>
13    <button class="calculator__key">6</button>
14    <button class="calculator__key">1</button>
15    <button class="calculator__key">2</button>
16    <button class="calculator__key">3</button>
17    <button class="calculator__key">0</button>
18    <button class="calculator__key">.</button>
19    <button class="calculator__key">AC</button>
20    <button class="calculator__key calculator__key--enter">=</button>
21  </div>
22</div>

The next BEM element is the calculator__keys. This wraps all the keys and is a sort of container for the keys.

More interesting is the calculator__key. Every key gets this class name. However, some keys are different. In BEM these are called modifiers.

Our modifiers are the operator keys and the enter key.

These unique keys are given the general class of calculator__key since they're still a key. But, they're also given a class name of calculator__key--operator for the operator keys and calculator__key--enter for the enter key.

Based on these class names we can now style the calculator. Here's the CSS selectors we will be using:

css
1.calculator {
2}
3.calculator__output {
4}
5.calculator__keys {
6}
7.calculator__key {
8}
9.calculator__key--operator {
10}
11.calculator__key--enter {
12}

You can see how clean and organized the stylesheet is with BEM naming in place.

Additionally, it'll be easy to read through and understand your stylesheet. This is nice when you come back to a project after some time and you need to make some changes.

It should be really clear what each CSS selector is targeting.

Okay, with this structure in place we should be able to style the calculator. Right now, this is how it looks:

I have added some styles to make the calculator centered in the box above.

To start I’ve assigned the box to be 10rem’s tall. I did this purely for display purposes.

With that in place I was able to easily center the calculator horizontally and vertically using the following CSS:

css
1height: 10rem;
2display: grid;
3justify-content: center;
4align-items: center;

You may not want or need this CSS. But, in case you were wondering or you would like to accomplish something similar I decided to make clear why everything is centered in the box above.

Laying out the Calculator

The first thing we need to do is make sure the calculator doesn't go too wide. Once we add styles to the output and calculator buttons this is likely to happen.

css
1.calculator {
2  max-inline-size: 22rem; /* This is the Logical Property for max-width and has very good browser support */
3}

The next few styles we will add are for design reasons and are completely optional.

First, let's turn the squared corners to be slightly rounded. And then we're going to make sure that all the elements below (the output and the buttons) don't overflow outside these corners.

css
1border-radius: 10px;
2overflow: hidden;

Second, let's give the calculator a slight shadow to give it a little depth. This will make it appear as if it were coming off the page slightly.

css
1.calculator {
2  max-inline-size: 22rem; /* This is the Logical Property for max-width and has very good browser support */
3  border-radius: 10px; /* Round the edges */
4  overflow: hidden; /* don't let other elements go outside the calculator */
5  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.12); /* Give the calculator some depth off the page */
6}

It doesn't look much better yet...

Style the Output

Now let's focus on making the calculator output look good.

The output area is where the output of any calculation will go. It defaults to 0.

If you look at a calculator you will notice that number is right aligned in the output area. The other thing you’ll notice is that the font size is larger than all the other text on the calculator.

Let’s make those changes on our calculator:

css
1.calculator__output {
2  font-size: 2rem;
3  text-align: end; /* This is the Logical Property for text-align: right; and has very good browser support. */
4}

Let's also add a little bit of styling to the calculator to make it look good:

css
1.calculator__output {
2  font-size: 2rem;
3  text-align: end; /* This is the Logical Property for text-align: right; and has very good browser support. */
4  background: hsl(202, 11%, 29%); /* background color */
5  color: hsl(255, 100%, 100%); /* text color */
6  padding-block-start: 0.25rem; /* Logical Property for padding-top */
7  padding-block-end: 0.25rem; /* Logical Property for padding-bottom */
8  padding-inline-end: 0.75rem; /* Logical Property for padding-right */
9}

Up to this point you've seen a few Logical Properties. If you're not familiar and comfortable with Logical Properties and would like to stay current with CSS changes. You can learn everything you need to know about Logical Properties with this complete guide and cheatsheet.

With those changes this is what our calculator looks like now:

It's looking better. Let's move onto laying out and styling the buttons.

All the Buttons and Directions you can go

The first thing we need to do is get the buttons into the correct layout.

To start, we will put the buttons into a grid layout with four equal columns:

css
1.calculator__keys {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4}

And we will move the equals button to the fourth column and let it span four rows.

css
1.calculator__key--enter {
2  grid-column: 4 / 5; /* Start at column #4 and end at column #5 (the very right edge). */
3  grid-row: 2 / span 4; /* Start at row #2 and span 4 rows */
4}

Our calculator now looks like this:

Now that we have it laid out correctly, let's add some styles so that it looks good!

We also want to make sure to add styles that give the correct feedback you’d expect for a calculator.

Key Style Clean Up

To begin, let’s remove the border around the keys and give them a little bit of white space:

css
1.calculator__key {
2  border: none;
3  padding-block-start: 0.5rem; /* Logical Property for padding-top */
4  padding-block-end: 0.5rem; /* Logical Property for padding-bottom */
5  padding-inline-start: 1.25rem; /* Logical Property for padding-left */
6  padding-inline-end: 1.25rem; /* Logical Property for padding-right */
7  font-size: 1.5rem;
8}

Let’s add a clean line around each button so that it's clear where each begins and ends.

Instead of using a border around each button, what we’re going to do is add a background color to the keys area and then add a small grid gap so that the border shows through.

css
1.calculator__keys {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-gap: 1px;
5  background: hsl(208, 24%, 74%);
6}

Look at what this one small change has on the calculator:

Buttons Polish

Let’s do some finishing touches.

First, let’s differentiate the operators from the numbers.

css
1.calculator__key--operator {
2  background: hsl(208, 25%, 86%);
3}

Second, lets differentiate the equals button.

css
1.calculator__key--enter {
2  grid-column: 4 / 5;
3  grid-row: 2 / span 4;
4  background: hsl(357, 100%, 72%);
5}

And lastly, let’s make it look like the button is being pushed in when it is clicked. To do this we need to add an inset box shadow. That’s basically, a box shadow on the inside of the button. This is what gives it the impression of being pushed in.

css
1box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;

With those finishing touches in place, here's our calculator:

The complete CSS for this calculator looks like this:

css
1.calculator {
2  border-radius: 10px;
3  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
4  margin-inline-start: auto;
5  margin-inline-end: auto;
6  margin-block-start: 2em;
7  max-inline-size: 22rem;
8  overflow: hidden;
9}
10.calculator__output {
11  background: hsl(202, 11%, 29%);
12  color: hsl(255, 100%, 100%);
13  font-size: 2rem;
14  padding-block-start: 0.5rem;
15  padding-block-end: 0.5rem;
16  padding-inline-end: 0.75rem;
17  text-align: end;
18}
19.calculator__keys {
20  display: grid;
21  grid-template-columns: repeat(4, 1fr);
22  grid-gap: 1px;
23  background: hsl(207, 19%, 61%);
24}
25.calculator__key {
26  background: hsl(210, 25%, 95%);
27  border: none;
28  padding-block-start: 1rem;
29  padding-block-end: 1rem;
30  padding-inline-end: 1.25rem;
31  padding-inline-start: 1.25rem;
32  font-size: 1.5rem;
33}
34.calculator__key:active,
35.calculator__key:focus {
36  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3) inset;
37  outline: none;
38}
39.calculator__key--operator {
40  background: hsl(208, 25%, 86%);
41}
42.calculator__key--operator:active {
43  background: hsl(208, 24%, 80%);
44}
45.calculator__key--enter {
46  grid-column: 4 / 5;
47  grid-row: 2 / span 4;
48  background: hsl(357, 100%, 72%);
49}

Let’s make this calculator a little more playful

Now that we have a base style to work with we can quickly make a few small changes and completely change the look of our calculator.

Let’s make our calculator a little more playful feeling by turning our buttons into circles instead of rectangles.

To do this all we need to do is change a few lines of CSS.

First, let's make our buttons into circles.

To do this we want to make sure they are the same height and width. We can't rely on padding for this because each number and character is slightly different in size and can cause some inconsistencies.

So, remove the padding and add in a width (inline-size) and height (block-size). Then add a border-radius of 40px.

css
1.calculator__key {
2  background: hsl(210, 25%, 95%);
3  border: none;
4  font-size: 2rem;
5  /* Playful Styles: */
6  inline-size: 60px;
7  block-size: 60px;
8  border-radius: 40px;
9}

This changes our calculator to look like this:

It's pretty clear that we need to add some white space around the buttons.

The other thing we need to fix is the equals button. It should span four rows but it's not doing that right now because we limited the height (aka the block-size) to 60px. To fix this we can change it's height to auto.

With those two changes the CSS looks like this:

css
1.calculator__keys {
2  padding: 0.5rem; /* Add some whitespace around the keys */
3  display: grid;
4  grid-template-columns: repeat(4, 1fr);
5  grid-gap: 1px;
6  background: hsl(207, 19%, 61%);
7}
8.calculator__key {
9  background: hsl(210, 25%, 95%);
10  border: none;
11  font-size: 2rem;
12  /* Playful Styles: */
13  inline-size: 60px;
14  block-size: 60px;
15  border-radius: 40px;
16  margin: 0.25rem;
17}
18.calculator__key--enter {
19  grid-column: 4 / 5;
20  grid-row: 2 / span 4;
21  background: hsl(357, 100%, 72%);
22  height: auto; /* Allow the key to span the four rows */
23}

And our Calculator looks really good.

It's close but if you notice that the output isn't the focus of this design anymore. We need to fix that.

The other thing that is slightly strange is that the output and the background behind the buttons are different colors.

Let's make both of those changes:

css
1.calculator {
2  color: hsl(202, 11%, 29%); /* Text color for calculator */
3}
4.calculator__output {
5  background: hsl(255, 100%, 100%); /* Background color to white */
6  padding-block-start: 2rem; /* Add white space above the output text */
7  padding-inline-end: 1.25rem; /* Add a little more padding to the right side of the text */
8}
9.calculator__keys {
10  background: hsl(255, 100%, 100%); /* Background behind the keys to white */
11}

With just a few changes to our CSS we have changed the design of our calculator.

Here's the complete CSS for this calculator:

css
1.calculator {
2  border-radius: 10px;
3  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
4  margin-inline-start: auto;
5  margin-inline-end: auto;
6  margin-block-start: 2em;
7  max-inline-size: 22rem;
8  overflow: hidden;
9  color: hsl(202, 11%, 29%);
10}
11.calculator__output {
12  background: hsl(255, 100%, 100%);
13  font-size: 4.2rem;
14  padding-block-start: 3rem;
15  padding-block-end: 0.5rem;
16  padding-inline-end: 1.25rem;
17  text-align: end;
18}
19.calculator__keys {
20  display: grid;
21  grid-template-columns: repeat(4, 1fr);
22  grid-gap: 1px;
23  background: hsl(255, 100%, 100%);
24  padding: 0.5rem;
25}
26.calculator__key {
27  background: hsl(210, 25%, 95%);
28  border: none;
29  padding-block-start: 1rem;
30  padding-block-end: 1rem;
31  padding-inline-end: 1.25rem;
32  padding-inline-start: 1.25rem;
33  font-size: 1.5rem;
34  /* Playful Styles */
35  inline-size: 70px;
36  block-size: 70px;
37  margin: 0.25rem;
38  border-radius: 40px;
39}
40.calculator__key:active,
41.calculator__key:focus {
42  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3) inset;
43  outline: none;
44}
45.calculator__key--operator {
46  background: hsl(208, 25%, 86%);
47}
48.calculator__key--operator:active {
49  background: hsl(208, 24%, 80%);
50}
51.calculator__key--enter {
52  grid-column: 4 / 5;
53  grid-row: 2 / span 4;
54  background: hsl(357, 100%, 72%);
55  height: auto;
56}

Dark Mode

Turning this light calculator design into dark mode is simply a few color changes:

css
1.calculator__output {
2  background: hsl(207, 19%, 61%); /* Change the background to a dark gray */
3}
4.calculator__keys {
5  background: hsl(207, 19%, 61%); /* Change the background to a dark gray */
6}
7.calculator__key {
8  background: hsl(206, 14%, 41%); /* Change the keys to a darker gray */
9  color: hsl(255, 100%, 100%); /* Change the text color to white */
10}

Minimal Calculator Design

With one more very small change you could turn your calculator into a minimal design.

Just change the color of the keys to be the same as the background.

The same is true with the dark mode:

The Next Step

Congratulations you have created a beautiful calculator in HTML and CSS!

Not only do you now understand the CSS behind creating the calculator but you are also equipped with some design ideas for future projects.

The next step is to make the calculator work. :)

I’ve got you covered there too. Here is a great 3 part series that will teach you everything you need to know to make the calculator functional using vanilla javascript.