In this tutorial, we will learn the three main frontend development frameworks: HTML, CSS, and JavaScript by building a calculator app. Finally, we wrap it with Django as the backend.
This full-stack web development project tutorial is going to be an interesting one. We will learn, among other things:
- How Django combines the frontend frameworks to build a nice and interactive web page;
- How to style web pages using CSS;
- How to manipulate the JavaScript DOM.
You will benefit greatly from mastering the basic knowledge of HTML, CSS, and JavaScript. I will try to explain things as best as I can, but you are expected to have a basic knowledge of Python.
This is part 1 of the series:
The HTML
Create a folder for this project. Inside the folder create a file named index.html. The file will be in that folder for now. Later, we will keep it in its rightful place.
<div class="calculator">
<input type="text" class="calculator-screen" value="0" disabled />
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign operator" value="=">=</button>
</div>
</div>
This is the HTML code for the calculator app. Later, we will adjust this code by adding a boilerplate. For now, our focus is on designing the app. We use the div tag first to wrap the entire calculator and another div to wrap the keys. This makes it easy to apply CSS styles to all the elements at the same time.
Of course, we can still apply styling to individual elements. That’s why the class attributes are specified.
The input tag will serve as the calculator screen. It is disabled for now. This means it will remain unusable until JavaScript is added. The × and ÷ are multiplication and division symbols in HTML.
Notice that some tags have the same name set as class attributes. This makes it easy to apply CSS styles to those elements.
The value attribute specifies the initial text, number or symbol we want to be in the element. In some cases, it is subject to change as we would see in the input element.
Styling the HTML elements using CSS
In this section, we will learn how to build a simple calculator layout by applying CSS grid. Create another file, styles.css and write the following CSS code.
html {
font-size: 62.5%;
box-sizing: border-box;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
We set the font-size and box-sizing for everything inside the html element. This includes all the HTML elements in the previous section. As I said earlier, we will make adjustment to the code by adding a boilerplate. For now, the html tag is not obvious.
The box-sizing property defines how we want the width and height of an element to be calculated. By setting it to border-box, we have included the padding and border in calculating the width and height.
The asterisk symbol (*) applies styling to all the HTML elements. It is called a universal selector. The ::before and ::after selectors apply the styling before and after the content of the selected element. By using a comma, we combine multiple selectors and save ourselves a lot of code.
We are in effect saying that we want all the elements before and after to have their margin and padding set to 0, and to inherit the value of the border-box property of the above parent (html). This is to ensure they no longer increase with the width.
.calculator {
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
top: 20%;
left: 30%;
width: 400px;
}
Here comes our first usage of a class selector.
Remember, it’s for the first div tag. We set the color of the border using a color code to make it light gray. To learn more about the color code, check out this article.
The border-radius rounds the four corners of the div element according to the specified size.
The position property sets how we want the element to be positioned in a document. By setting it to absolute, we remove it from the normal document flow and position it relative to its closest element. Since no space is created for the element in the page layout, the values of top and left determine its final position.
Styling the Calculator Screen
.calculator-screen {
width: 100%;
font-size: 5rem;
height: 80px;
border: none;
background-color: #252525;
color: #fff;
text-align: right;
padding-right: 20px;
}
We give the calculator screen a black background color which is quite common in many calculators. As such, we have to set the number to white color to make it visible.
We also increase the font-size to 5rem. To understand what root em means and how it is calculated, check this article. We then align the number to the right.
Open a text editor, preferably Atom. Create a new folder and move the HTML and CSS files to the folder. In calc.html, once you type the html tag and hit the Enter key, a boilerplate will be generated.
It’s something like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Add the HTML code for the calculator under the body element. Under the head element, add a link to your CSS file.
<link rel="stylesheet" href="styles.css">
After saving the file, hit Ctrl + Shift + C keys to copy the path to the file. Mine is something like this:
👉 C:\Users\Jonathan\Documents\Templates\invoice_1.html
Enter it in your browser, and you will be seeing the progress we are making in designing the calculator layout.
You can see the padding is the little space after the 0.
The Buttons
button {
height: 60px;
background-color: #fff;
border-radius: 3px;
border: 1px solid #c4c4c4;
background-color: transparent;
font-size: 2rem;
color: #333;
}
button:hover {
background-color: #eaeaea;
}
.operator {
color: #337cac;
}
.all-clear {
background-color: #f0595f;
border-color: #b0353a;
color: #fff;
}
.all-clear:hover {
background-color: #f17377;
}
.equal-sign {
background-color: #2e86c0;
border-color: #337cac;
color: #fff;
}
.equal-sign:hover {
background-color: #4e9ed4;
}
I won’t be explaining everything here to save reading time. The color of the button changes whenever you hover the arrow key around it. This was made possible using the CSS selector, :hover.
We change the operator signs, AC and equal sign to different colors using their respective classes. Notice that the edges of the buttons are slightly curved. That’s the border-radius set to 3px.
Arranging the Buttons using CSS Grid
The div tag with calculator-keys as its class name is the container holding the buttons. To arrange the buttons, we need to set its display property to grid to make it a grid container.
.calculator-keys {
display: grid;
}
With that, we can work on other properties to adjust this to the style we want.
💡 Remember: Everything inside an HTML element is a box. It’s even quite obvious from the screenshot above. But it’s only one column with several rows. We want the overall box (the grid container) to have several columns, taking the shape of a calculator.
To do this, there’s CSS properties that are used once the grid display property is defined. The grid-template rows and grid-template columns properties which are used to define the rows and columns of a grid container.
Let’s apply it using the repeat keyword to form four columns instead of one.
.calculator-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
See 1fr as one-quarter of the space in the grid container. The calculator layout is forming gradually. However, the buttons are so congested. Let’s space them out so they can stay on their own by using the grid-gap and padding properties.
The grid-gap property space out the columns and rows while the padding space out the edges.
.calculator-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 20px;
}
The position of the equal sign button is not where it’s supposed to be. Also, the unoccupied spaces have to be filled. We want the equal sign button to move to the last column and to span several rows.
To accomplish this, we use the grid-row-start, grid-row-end properties.
If we set the grid-row-start of the equal sign to 2, for example, it will occupy the position of 7 in the grid which is the second row of the grid container. If we also set the grid-row-end to 6 and make the height 100%, it will span several rows all the way down to the last row.
See it in action.
.equal-sign {
background-color: #2e86c0;
border-color: #337cac;
color: #fff;
grid-row-start: 2;
grid-row-end: 6;
height: 100%;
}
Note that without specifying the height, the unoccupied spaces will remain and be moved together with the equal sign to the first column. Thus, the height property has helped to fill the spaces. But it is not ideal to keep the equal sign at the left side of a calculator. It mostly appears on the right side.
To solve this, we will use another CSS properties, grid-column-start and grid-column-end.
.equal-sign {
background-color: #2e86c0;
border-color: #337cac;
color: #fff;
grid-row-start: 2;
grid-row-end: 6;
height: 100%;
grid-column-start: 4;
}
Even though we did not specify the grid-column-end, it automatically applies it to the grid container.
Can you guess what the value will be? Yeah, 5, you are correct. To know what value the grid-row-end and the other properties will be, check developer tools in your browser (if it has one), or you test them out using different numbers.
Conclusion
In the first part of this project tutorial, we have learned the basic of HTML and CSS. We have seen how we can use CSS grid to build layout of the calculator app. Of course, there is more to CSS grid than we covered.
The code for this project is on my GitHub page. Our calculator app is not yet active. We need JavaScript to ‘wake’ it up from its long slumber. This we will do in the second part of this series:
💡 Recommended: How I Created a Calculator App Using Django – Part 2