Table of Contents

Building a Calculator Using HTML & CSS

Code Playground is only enabled on larger screen sizes.

For the second practice project of our course, we are going to design a calculator using HTML and CSS.

Let's start by designing the general structure of this calculator.

First of all, we are going to need a calculator container, which can be either be a column flexbox, or a single column grid.

Inside the container, there should be a calculator display with two child components, a number's section, and a clear button.

Lastly, there should be a 4x4 grid, containing the number keys (1, 2, 3, and so on), as well as the functional keys (+, -, *, and so on).

So here is the HTML structure:

html

<div>
  <!-- Display -->
  <div>
    <div>12345</div>
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>/</div>
 
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>*</div>
 
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>-</div>
 
    <div>0</div>
    <div>.</div>
    <div>=</div>
    <div>+</div>
  </div>
</div>

Removing default styles

Again, we should start by removing the default paddings and margins, and set box-sizing to border-box.

css

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

Creating the layout

Next, we are going to define the container as a column flexbox:

css

.flex {
  display: flex;
}
 
.flex-col {
  flex-direction: column;
}

The good thing about this utility class approach is that you can reuse the defined classes anywhere you want.

For example, the .flex class can be reused for the calculator display:

html

<div class="flex flex-col">
  <!-- Display -->
  <div class="flex">
    <div>12345</div>
    <svg></svg>
  </div>
 
  <!-- Number pad -->
  <div class="">. . .</div>
</div>

The number pad, on the other hand, should be a grid layout, with 4 columns:

css

.grid {
  display: grid;
}
 
.grid-cols-4 {
  grid-template-columns: auto auto auto auto;
}

To make the calculator's structure more clear, let's also add the borders:

css

.border {
  border: solid 2px;
}

html

<div class="flex flex-col border">
  <!-- Display -->
  <div class="flex border">
    <div>12345</div>
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4">
    <div class="border">7</div>
    <div class="border">8</div>
    <div class="border">9</div>
    <div class="border">/</div>
 
    . . .
  </div>
</div>

As you can see, the number display and the clear button are too close together. We can use the justify-content property to make sure that the two elements stick to the opposite ends of the flexbox container.

css

.justify-content-between {
  justify-content: space-between;
}

And also make sure the flex items are vertically centered, which is in the direction that is perpendicular to the main axis of the flexbox, so we need to use the align-items property.

css

.align-items-center {
  align-items: center;
}

html

<div class="flex flex-col border">
  <!-- Display -->
  <div class="flex border justify-content-between align-items-center">
    <div>12345</div>
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4">. . .</div>
</div>

Add spacing

Next, we don't want the number pad and the display to be too close to each other, so let's add some spacing between them.

css

.gap-sm {
  gap: 5px;
}
 
.gap-lg {
  gap: 10px;
}
 
.p-sm {
  padding: 5px;
}
 
.p-md {
  padding: 10px;
}
 
.p-lg {
  padding: 20px;
}
 
.m-md {
  margin: 10px;
}

html

<div class="flex flex-col gap-lg border p-lg m-md">
  <!-- Display -->
  <div class="flex justify-content-between align-items-center border p-sm">
    <div>12345</div>
 
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4 gap-lg">
    <div class="border p-lg">7</div>
    <div class="border p-lg">8</div>
    <div class="border p-lg">9</div>
    <div class="border p-lg">/</div>
 
    . . .
  </div>
</div>

We also don't want the calculator to span over the entire page on a large screen, so make sure it has the width property set.

css

.w-fit {
  width: fit-content;
}

html

<div class="flex flex-col gap-lg border p-lg m-md w-fit">
  <!-- Display -->
  <div class="flex justify-content-between align-items-center border p-sm">
    . . .
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4 gap-lg">. . .</div>
</div>

Add colors and customizing font

Now you have a skeleton for the calculator. Let's then add some decorative styles so our calculator looks better.

css

.border-orange {
  border-color: orange;
}
 
.border-crimson {
  border-color: crimson;
}
 
.bg-antiquewhite {
  background-color: antiquewhite;
}
 
.bg-lightpink {
  background-color: lightpink;
}

css

.font-mono {
  font-family: "Courier New", Courier, monospace;
}
 
.font-bold {
  font-weight: 700;
}
 
.font-lg {
  font-size: 1.75rem;
}

And this will be our final result:

html

<div
  class="flex flex-col gap-lg border p-lg w-fit font-mono font-bold font-lg m-md">
  <!-- Display -->
  <div class="flex justify-content-between align-items-center border p-sm">
    <div>12345</div>
 
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4 gap-lg">
    <div class="border p-lg bg-antiquewhite border-orange">7</div>
    <div class="border p-lg bg-antiquewhite border-orange">8</div>
    <div class="border p-lg bg-antiquewhite border-orange">9</div>
    <div class="border p-lg bg-lightpink border-crimson">/</div>
 
    <div class="border p-lg bg-antiquewhite border-orange">4</div>
    <div class="border p-lg bg-antiquewhite border-orange">5</div>
    <div class="border p-lg bg-antiquewhite border-orange">6</div>
    <div class="border p-lg bg-lightpink border-crimson">*</div>
 
    <div class="border p-lg bg-antiquewhite border-orange">1</div>
    <div class="border p-lg bg-antiquewhite border-orange">2</div>
    <div class="border p-lg bg-antiquewhite border-orange">3</div>
    <div class="border p-lg bg-lightpink border-crimson">-</div>
 
    <div class="border p-lg bg-antiquewhite border-orange">0</div>
    <div class="border p-lg bg-lightpink border-crimson">.</div>
    <div class="border p-lg bg-lightpink border-crimson">=</div>
    <div class="border p-lg bg-lightpink border-crimson">+</div>
  </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css" />
</head>

<body>
  <div
    class="flex flex-col gap-lg border p-lg w-fit font-mono font-bold font-lg m-md">
    <!-- Display -->
    <div class="flex justify-content-between align-items-center border p-sm">
      <div>12345</div>

      <svg
        fill="#000000"
        height="25px"
        width="25px"
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 493.456 493.456"
        xml:space="preserve">
        <g>
          <g>
            <path
              d="M246.73,0C110.682,0,0.002,110.684,0.002,246.744c0,136.032,110.68,246.712,246.728,246.712
    s246.724-110.68,246.724-246.712C493.454,110.684,382.778,0,246.73,0z M360.258,348.776l-11.112,11.12
    c-2.808,2.836-7.82,2.836-10.644,0l-88.68-88.672c-0.728-0.74-1.704-1.136-2.732-1.136c-1.028,0-2.004,0.4-2.732,1.136
    L155.682,359.9c-2.82,2.836-7.828,2.836-10.648,0l-11.108-11.12c-1.412-1.404-2.196-3.304-2.196-5.3
    c0-2.02,0.784-3.916,2.196-5.344l88.68-88.672c1.508-1.512,1.508-3.948,0-5.452l-88.68-88.68c-1.412-1.416-2.196-3.308-2.196-5.32
    c0-2.02,0.784-3.916,2.196-5.328l11.108-11.108c2.82-2.82,7.828-2.82,10.648,0l88.68,88.672c1.444,1.444,4.016,1.444,5.46,0
    l88.676-88.676c2.824-2.824,7.836-2.824,10.644,0l11.112,11.112c2.928,2.924,2.928,7.716,0,10.648l-88.692,88.676
    c-1.504,1.504-1.504,3.94,0,5.452l88.696,88.672C363.186,341.072,363.186,345.844,360.258,348.776z" />
          </g>
        </g>
      </svg>
    </div>

    <!-- Number pad -->
    <div class="grid grid-cols-4 gap-lg">
      <div class="border p-lg bg-antiquewhite border-orange">7</div>
      <div class="border p-lg bg-antiquewhite border-orange">8</div>
      <div class="border p-lg bg-antiquewhite border-orange">9</div>
      <div class="border p-lg bg-lightpink border-crimson">/</div>

      <div class="border p-lg bg-antiquewhite border-orange">4</div>
      <div class="border p-lg bg-antiquewhite border-orange">5</div>
      <div class="border p-lg bg-antiquewhite border-orange">6</div>
      <div class="border p-lg bg-lightpink border-crimson">*</div>

      <div class="border p-lg bg-antiquewhite border-orange">1</div>
      <div class="border p-lg bg-antiquewhite border-orange">2</div>
      <div class="border p-lg bg-antiquewhite border-orange">3</div>
      <div class="border p-lg bg-lightpink border-crimson">-</div>

      <div class="border p-lg bg-antiquewhite border-orange">0</div>
      <div class="border p-lg bg-lightpink border-crimson">.</div>
      <div class="border p-lg bg-lightpink border-crimson">=</div>
      <div class="border p-lg bg-lightpink border-crimson">+</div>
    </div>
  </div>
</body>
</html>

Open Sandbox

Loading course content...

For the second practice project of our course, we are going to design a calculator using HTML and CSS.

Let's start by designing the general structure of this calculator.

First of all, we are going to need a calculator container, which can be either be a column flexbox, or a single column grid.

Inside the container, there should be a calculator display with two child components, a number's section, and a clear button.

Lastly, there should be a 4x4 grid, containing the number keys (1, 2, 3, and so on), as well as the functional keys (+, -, *, and so on).

So here is the HTML structure:

html

<div>
  <!-- Display -->
  <div>
    <div>12345</div>
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>/</div>
 
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>*</div>
 
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>-</div>
 
    <div>0</div>
    <div>.</div>
    <div>=</div>
    <div>+</div>
  </div>
</div>

Removing default styles

Again, we should start by removing the default paddings and margins, and set box-sizing to border-box.

css

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

Creating the layout

Next, we are going to define the container as a column flexbox:

css

.flex {
  display: flex;
}
 
.flex-col {
  flex-direction: column;
}

The good thing about this utility class approach is that you can reuse the defined classes anywhere you want.

For example, the .flex class can be reused for the calculator display:

html

<div class="flex flex-col">
  <!-- Display -->
  <div class="flex">
    <div>12345</div>
    <svg></svg>
  </div>
 
  <!-- Number pad -->
  <div class="">. . .</div>
</div>

The number pad, on the other hand, should be a grid layout, with 4 columns:

css

.grid {
  display: grid;
}
 
.grid-cols-4 {
  grid-template-columns: auto auto auto auto;
}

To make the calculator's structure more clear, let's also add the borders:

css

.border {
  border: solid 2px;
}

html

<div class="flex flex-col border">
  <!-- Display -->
  <div class="flex border">
    <div>12345</div>
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4">
    <div class="border">7</div>
    <div class="border">8</div>
    <div class="border">9</div>
    <div class="border">/</div>
 
    . . .
  </div>
</div>

css

.justify-content-between {
  justify-content: space-between;
}

And also make sure the flex items are vertically centered, which is in the direction that is perpendicular to the main axis of the flexbox, so we need to use the align-items property.

css

.align-items-center {
  align-items: center;
}

html

<div class="flex flex-col border">
  <!-- Display -->
  <div class="flex border justify-content-between align-items-center">
    <div>12345</div>
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4">. . .</div>
</div>

Add spacing

Next, we don't want the number pad and the display to be too close to each other, so let's add some spacing between them.

css

.gap-sm {
  gap: 5px;
}
 
.gap-lg {
  gap: 10px;
}
 
.p-sm {
  padding: 5px;
}
 
.p-md {
  padding: 10px;
}
 
.p-lg {
  padding: 20px;
}
 
.m-md {
  margin: 10px;
}

html

<div class="flex flex-col gap-lg border p-lg m-md">
  <!-- Display -->
  <div class="flex justify-content-between align-items-center border p-sm">
    <div>12345</div>
 
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4 gap-lg">
    <div class="border p-lg">7</div>
    <div class="border p-lg">8</div>
    <div class="border p-lg">9</div>
    <div class="border p-lg">/</div>
 
    . . .
  </div>
</div>

We also don't want the calculator to span over the entire page on a large screen, so make sure it has the width property set.

css

.w-fit {
  width: fit-content;
}

html

<div class="flex flex-col gap-lg border p-lg m-md w-fit">
  <!-- Display -->
  <div class="flex justify-content-between align-items-center border p-sm">
    . . .
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4 gap-lg">. . .</div>
</div>

Add colors and customizing font

Now you have a skeleton for the calculator. Let's then add some decorative styles so our calculator looks better.

css

.border-orange {
  border-color: orange;
}
 
.border-crimson {
  border-color: crimson;
}
 
.bg-antiquewhite {
  background-color: antiquewhite;
}
 
.bg-lightpink {
  background-color: lightpink;
}

css

.font-mono {
  font-family: "Courier New", Courier, monospace;
}
 
.font-bold {
  font-weight: 700;
}
 
.font-lg {
  font-size: 1.75rem;
}

And this will be our final result:

html

<div
  class="flex flex-col gap-lg border p-lg w-fit font-mono font-bold font-lg m-md">
  <!-- Display -->
  <div class="flex justify-content-between align-items-center border p-sm">
    <div>12345</div>
 
    <svg>. . .</svg>
  </div>
 
  <!-- Number pad -->
  <div class="grid grid-cols-4 gap-lg">
    <div class="border p-lg bg-antiquewhite border-orange">7</div>
    <div class="border p-lg bg-antiquewhite border-orange">8</div>
    <div class="border p-lg bg-antiquewhite border-orange">9</div>
    <div class="border p-lg bg-lightpink border-crimson">/</div>
 
    <div class="border p-lg bg-antiquewhite border-orange">4</div>
    <div class="border p-lg bg-antiquewhite border-orange">5</div>
    <div class="border p-lg bg-antiquewhite border-orange">6</div>
    <div class="border p-lg bg-lightpink border-crimson">*</div>
 
    <div class="border p-lg bg-antiquewhite border-orange">1</div>
    <div class="border p-lg bg-antiquewhite border-orange">2</div>
    <div class="border p-lg bg-antiquewhite border-orange">3</div>
    <div class="border p-lg bg-lightpink border-crimson">-</div>
 
    <div class="border p-lg bg-antiquewhite border-orange">0</div>
    <div class="border p-lg bg-lightpink border-crimson">.</div>
    <div class="border p-lg bg-lightpink border-crimson">=</div>
    <div class="border p-lg bg-lightpink border-crimson">+</div>
  </div>
</div>