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}Creating the layout
Next, we are going to define the container as a flexbox in the column direction, so we'll need 2 classes:
1.flex {
2 display: flex;
3}
4
5.flex-col {
6 flex-direction: column;
7}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 also be reused for the calculator display, which should also be a flex layout.
1<div class="flex flex-col">
2 <!-- Display -->
3 <div class="flex">
4 <div>12345</div>
5 <svg></svg>
6 </div>
7
8 <!-- Number pad -->
9 <div class="">. . .</div>
10</div>The number pad, on the other hand, should be a grid layout, with 4 columns:
1.grid {
2 display: grid;
3}
4
5.grid-cols-4 {
6 grid-template-columns: auto auto auto auto;
7}To make the calculator's structure more clear, let's also add the borders:
1.border {
2 border: solid 2px;
3}1<div class="flex flex-col border">
2 <!-- Display -->
3 <div class="flex border">
4 <div>12345</div>
5 <svg>. . .</svg>
6 </div>
7
8 <!-- Number pad -->
9 <div class="grid grid-cols-4">
10 <div class="border">7</div>
11 <div class="border">8</div>
12 <div class="border">9</div>
13 <div class="border">/</div>
14
15 . . .
16 </div>
17</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.
1.justify-content-between {
2 justify-content: space-between;
3}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.
1.align-items-center {
2 align-items: center;
3}1<div class="flex flex-col border">
2 <!-- Display -->
3 <div class="flex border justify-content-between align-items-center">
4 <div>12345</div>
5 <svg>. . .</svg>
6 </div>
7
8 <!-- Number pad -->
9 <div class="grid grid-cols-4">. . .</div>
10</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.
1.gap-sm {
2 gap: 5px;
3}
4
5.gap-lg {
6 gap: 10px;
7}
8
9.p-sm {
10 padding: 5px;
11}
12
13.p-md {
14 padding: 10px;
15}
16
17.p-lg {
18 padding: 20px;
19}
20
21.m-md {
22 margin: 10px;
23}1<div class="flex flex-col gap-lg border p-lg m-md">
2 <!-- Display -->
3 <div class="flex justify-content-between align-items-center border p-sm">
4 <div>12345</div>
5
6 <svg>. . .</svg>
7 </div>
8
9 <!-- Number pad -->
10 <div class="grid grid-cols-4 gap-lg">
11 <div class="border p-lg">7</div>
12 <div class="border p-lg">8</div>
13 <div class="border p-lg">9</div>
14 <div class="border p-lg">/</div>
15
16 . . .
17 </div>
18</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.
1.w-fit {
2 width: fit-content;
3}1<div class="flex flex-col gap-lg border p-lg m-md w-fit">
2 <!-- Display -->
3 <div class="flex justify-content-between align-items-center border p-sm">
4 . . .
5 </div>
6
7 <!-- Number pad -->
8 <div class="grid grid-cols-4 gap-lg">. . .</div>
9</div>
Add colors and customizing font
Finally, now you have a skeleton for the calculator. Let's then add some decorative styles so our calculator looks better.
1.border-orange {
2 border-color: orange;
3}
4
5.border-crimson {
6 border-color: crimson;
7}
8
9.bg-antiquewhite {
10 background-color: antiquewhite;
11}
12
13.bg-lightpink {
14 background-color: lightpink;
15}1.font-mono {
2 font-family: "Courier New", Courier, monospace;
3}
4
5.font-bold {
6 font-weight: 700;
7}
8
9.font-lg {
10 font-size: 1.75rem;
11}And this will be our final result:
1<div
2 class="flex flex-col gap-lg border p-lg w-fit font-mono font-bold font-lg m-md">
3 <!-- Display -->
4 <div class="flex justify-content-between align-items-center border p-sm">
5 <div>12345</div>
6
7 <svg>. . .</svg>
8 </div>
9
10 <!-- Number pad -->
11 <div class="grid grid-cols-4 gap-lg">
12 <div class="border p-lg bg-antiquewhite border-orange">7</div>
13 <div class="border p-lg bg-antiquewhite border-orange">8</div>
14 <div class="border p-lg bg-antiquewhite border-orange">9</div>
15 <div class="border p-lg bg-lightpink border-crimson">/</div>
16
17 <div class="border p-lg bg-antiquewhite border-orange">4</div>
18 <div class="border p-lg bg-antiquewhite border-orange">5</div>
19 <div class="border p-lg bg-antiquewhite border-orange">6</div>
20 <div class="border p-lg bg-lightpink border-crimson">*</div>
21
22 <div class="border p-lg bg-antiquewhite border-orange">1</div>
23 <div class="border p-lg bg-antiquewhite border-orange">2</div>
24 <div class="border p-lg bg-antiquewhite border-orange">3</div>
25 <div class="border p-lg bg-lightpink border-crimson">-</div>
26
27 <div class="border p-lg bg-antiquewhite border-orange">0</div>
28 <div class="border p-lg bg-lightpink border-crimson">.</div>
29 <div class="border p-lg bg-lightpink border-crimson">=</div>
30 <div class="border p-lg bg-lightpink border-crimson">+</div>
31 </div>
32</div>