Go back

Posted 2 years ago|7 mins read

How to Build a Calculator App with HTML, CSS, and JavaScript (Part 1)

This is the first part of our 7 Projects Blogging Series for your portfolio and it's tailored to help beginner and intermidate level developers who are looking to upskill their development career and build out a portfolio while learning.

In this tutorial series, we will be developing different web applications from scratch using technologies like HTML, CSS, Javascript, Tailwind, Vite, React, Next.js, Firebase etc. You’re going to learn a lot about these libraries and tools while developing series of real-world web applications.

Let's take a look at the apps we will be developing:

An Online Calculator
A Cryptocurrency Price Tracker
Linktree Clone
Personal Portfolio Website
Reponsive Landing Page
Mini Ecommerce Store
Real-time Chat App

If you wish to take the projects built in this series further by adding new features that I didn't covered in these tutorials, feel free to do that and share it with the community.

Objectives

At the end of this tutorial, you will:

Know how to work with css selectors
Learn about html data attributes
Be aquinted with classes
Learn how to work with css grid layout
Have a beautify UI for your calculator App

Requirements

To ensure you have a suitable development environment for this project, here a few requirements:

Basic Knowledge of HTML, CSS and Javascript

Introduction

In this tutorial build, we will be focusing on the UI of our calculator app and in part 2 we will get into the functional aspect of our calculator project using javascript. Take a look at the live version of what we will be developing here An Online Calculator

Project Setup

To begin, create a new folder called Calculator App in any directory of your choice, then create 3 files inside the newly created 'Calculator App' folder. These file should be index.html, style.css and app.js respectively. After you must have finished the file creation, next, open up the Calculator App folder inside your VSCODE or any other preferred code editor.

After you must have been done with your project setup, you should have a project structure that look like this on Visual Studio:

Define HTML Page Structure

Next, after you are done with the folder structure above, we need to define the structure of our html page by defining the default html structure of our page like this:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Calculator App</title>
</head>
<body>

</body>
</html>

Next, we need to link our html to the css file and likewise the javascript file that we created earlier. To link our stylesheet, add the below code snippet as the last child of the head tag before the closing tag </head>:


<link rel="stylesheet" type="text/css" href="./style.css">

Then add this after the closing </body> tag to link our html page to the javascript file.


<script type="text/javascript" src="./app.js"></script>

Next, we want to define the operands and number that we will be interracting with on the frontend. In other to do that we will be writing some html code inside the <body> tag as follows:


<div class="calculator-grid">
  <div class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div data-current-operand class="current-operand"></div>
  </div>
  <button data-all-clear class="span-two">AC</button>
  <button data-delete>DEL</button>
  <button data-operation>/</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-operation>*</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-operation>+</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-operation>-</button>
  <button data-number>.</button>
  <button data-number>0</button>
  <button data-equals class="span-two">=</button>
</div>

Noticed we are using data-attributes instead of id's on our buttons and divs. This is another way to select elements in the dom other than using id's or classes.

Here's the complete code snippet:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Calculator App</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <div class="calculator-grid">
    <div class="output">
      <div data-previous-operand class="previous-operand"></div>
      <div data-current-operand class="current-operand"></div>
    </div>
    <button data-all-clear class="span-two">AC</button>
    <button data-delete>DEL</button>
    <button data-operation>/</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation>+</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-equals class="span-two">=</button>
  </div>
</body>
<script type="text/javascript" src="./app.js"></script>
</html>

This is all we need in our HTML file index.html for this calculator. Next we need to style our calculator to look nice. Here's the current look of our calculator App:

Styling Our App

Now we are done with our html file, we need to add styling to our calculator App to make it look presentable so that our users can make use of it.

We will start by setting font-family, box-sizing and font-weight to our web based calculator app, by adding the following CSS code snippet to our style.css file:


*, *::before, *::after {
  box-sizing: border-box;
  font-family: Gothan Rounded, sans-serif;
  font-weight: normal;
}

Next, we want to add a background color and remove all the margins and padding around the app container. We will be making use of linear-gradient to set our background color:


body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00aaff, #00ff6c);
}

After adding the background color, we need to style the calculator-grid class container to reflect the look of a calculator. Add this css snippet to style.css:


.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

Here is the current look of our calculator app:

Next, we need to style the buttons on the calculator to look like the final build. To do that we will make use of .calculator-grid > button selector to select all the buttons in our app and give them a default style.


.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background: rgba(255, 255, 255, 0.75);
}

We also want to add a hover effect on the buttons to change the background on hover. To do that we will make use of .calculator-grid > button:hover selector:


.calculator-grid > button:hover {
  background: rgba(255, 255, 255, 0.9);
}

After completing the styling for the buttons, here is what our App looks like:

Next, we need to style two buttons separately from the others. I guess you must have figured out those buttons; <button data-all-clear class="span-two">AC</button> and <button data-equals class="span-two">=</button>. Notice they have a class span-two on them. Add the following to your css:


.span-two {
  grid-column: span 2;
}

Now that we are done with the buttons, we also need to style the output container where the operations will be carried out. Add the follow css snippet to your style.css to style the output class:


.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

Next, we need to style the current-operand and previous-operand as well to reflect different font sizes:


.output .previous-operand {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}

Here is what the content of your style.css should be. Kindly cross check to ensure you are on track with what I have:


*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Gothan Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00aaff, #00ff6c);
}

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background: rgba(255, 255, 255, 0.75);
}

.calculator-grid > button:hover {
  background: rgba(255, 255, 255, 0.9);
}

.span-two {
  grid-column: span 2;
}

.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

.output .previous-operand {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}

After completing all the above processes successfully, here is what the final look of our calculator app should look like and then we are ready to go into the part 2 of the development which is the most interesting part and that is the javascript section of the build.

Conclusion

In conclusion, we have been able to finish the UI of our calculator app, and we covered several topic like classes, data attributes, selectors, grid and many others. I'm sure you enjoyed the build for today by working on such a beautify UI for your calculator App ready to be shown to your friends.

Currently there's no interactivity on the calculator app at the moment, because the engine house hasn't been built yet and if you are eager to get that done, then let's get over to part 2 of this build, where we will be developing the engine of our application that will aid us to carry out mathematical operations and display the result.

If you wish to make a change to look of your app, feel free to share the final look with us and let's see what you were able to come up with.

HTML

CSS

Javascript

Calculator

Project Series

Frontend