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}