Building a Calculator Using HTML & CSS

For the second practice project of our course, we are going to create a calculator using HTML and CSS, but with a different approach compared to our YouTube project.

Let's start by designing the general structure of this calculator. First of all, we are going to need a calculator container. This container can either be a column flexbox, or a single column grid.

Inside the container, there should be a calculator display, which has two child components, a number's section, and a clear button. The display can be a row flexbox, or a two column grid.

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:

1<div>
2  <!-- Display -->
3  <div>
4    <div>12345</div>
5    <svg>. . .</svg>
6  </div>
7
8  <!-- Number pad -->
9  <div>
10    <div>7</div>
11    <div>8</div>
12    <div>9</div>
13    <div>/</div>
14
15    <div>4</div>
16    <div>5</div>
17    <div>6</div>
18    <div>*</div>
19
20    <div>1</div>
21    <div>2</div>
22    <div>3</div>
23    <div>-</div>
24
25    <div>0</div>
26    <div>.</div>
27    <div>=</div>
28    <div>+</div>
29  </div>
30</div>

Removing default styles

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

1* {
2  padding: 0px;
3  margin: 0px;
4  box-sizing: border-box;
5}