Building a Calculator with JavaScript

In the previous chapter on HTML and CSS, we created a calculator. It has the right layout and look, but doesn't function. After spending so much time discussing JavaScript, we are finally ready to fix that problem.

Creating the calculator layout

As usual, let's start by creating the HTML skeleton.

html

1<div class="calculator">
2  <div class="display">0</div>
3  <div class="buttons">
4    <div class="button function">AC</div>
5    <div class="button function">+/-</div>
6    <div class="button function">%</div>
7    <div class="button function">/</div>
8
9    <div class="button number">7</div>
10    <div class="button number">8</div>
11    <div class="button number">9</div>
12    <div class="button function">*</div>
13
14    <div class="button number">4</div>
15    <div class="button number">5</div>
16    <div class="button number">6</div>
17    <div class="button function">-</div>
18
19    <div class="button number">1</div>
20    <div class="button number">2</div>
21    <div class="button number">3</div>
22    <div class="button function">+</div>
23
24    <div class="button number">0</div>
25    <div class="button function">.</div>
26    <div class="button function">=</div>
27  </div>
28</div>

.calculator is a container that wraps around the whole calculator.
.display shows the user input, as well as the output of the calculation.
.buttons contains both the .number buttons (0-9) and the .function buttons (+, -, *...).

And, of course, you must set up the event listeners so that when a button is clicked, the corresponding JavaScript function is executed.

html

1<div class="calculator">
2  <div class="display" id="display">0</div>
3  <div class="buttons">
4    <div class="button function" onclick="clearDisplay()">AC</div>
5    <div class="button function" onclick="toggleSign()">+/-</div>
6    <div class="button function" onclick="percent()">%</div>
7    <div class="button function" onclick="appendOperator('/')">/</div>
8
9    <div class="button number" onclick="appendNumber('7')">7</div>
10    <div class="button number" onclick="appendNumber('8')">8</div>
11    <div class="button number" onclick="appendNumber('9')">9</div>
12    <div class="button function" onclick="appendOperator('*')">*</div>
13
14    <div class="button number" onclick="appendNumber('4')">4</div>
15    <div class="button number" onclick="appendNumber('5')">5</div>
16    <div class="button number" onclick="appendNumber('6')">6</div>
17    <div class="button function" onclick="appendOperator('-')">-</div>
18
19    <div class="button number" onclick="appendNumber('1')">1</div>
20    <div class="button number" onclick="appendNumber('2')">2</div>
21    <div class="button number" onclick="appendNumber('3')">3</div>
22    <div class="button function" onclick="appendOperator('+')">+</div>
23
24    <div class="button number" id="Num0" onclick="appendNumber('0')">0</div>
25    <div class="button function" onclick="appendOperator('.')">.</div>
26    <div class="button function" onclick="calculate()">=</div>
27  </div>
28</div>

Before we start coding, we also need to discuss the general structure of this project.

First of all, there should be a global variable (displayValue) to store the displayed value, as well as a helper function (updateDisplay()) that updates the .display based on the variable. The function selects the display element and updates its content.

Wait, there is more!

You need an account to access the rest of this lesson. Our course is 50% off for limited time only! Don't miss the opportunity!

🎉 Create an Account 🎉