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!

Please create an account to access this content.

From HTML & CSS to JavaScript, from basic language syntaxes to web development frameworks, from the frontend to the backend, we'll guide you through every step of your coding journey.

🎉 Create an Account 🎉