Building a Calculator with JavaScript

There should also be an appendNumber() and appendOperator() functions that append new digits to displayValue. Lastly, you need a calculate() function that executes the mathematical expression and returns the value.

And of course, there are other functions such as clearDisplay(), toggleSign(), and percent().

Adding styles

Next, you should add some styles so that our calculator actually looks like a calculator.

First of all, the .buttons should be a grid layout with 4 columns and 5 rows. As an example, we are making each cell to be 100px wide, and with a 5px gap in between.

1.buttons {
2  display: grid;
3  grid-template-columns: 100px 100px 100px 100px;
4  gap: 5px;
5}

And then, customize the individual buttons to make them look more pleasing.

1.button {
2  padding: 20px 0px;
3  text-align: center;
4}
5
6.function {
7  background-color: coral;
8}
9
10.number {
11  background-color: bisque;
12}

The number 0 is a special case, as it spans over multiple columns. This can be achieved using the grid-column-start and grid-column-end properties.

1<div class="button number" id="Num0" onclick="appendNumber('0')">0</div>

1#Num0 {
2  grid-column-start: 1;
3  grid-column-end: 3;
4}

As for the display, it may be designed however you like, as long as it looks good to you. Here is what I did:

1.calculator {
2  width: fit-content;
3}
4
5.display {
6  border: 1px solid;
7  margin-bottom: 5px;
8  padding: 15px 10px;
9  text-align: right;
10  font-family: "Courier New", Courier, monospace;
11  font-size: xx-large;
12}

Adding scripts

And finally, for the most important part, the scripts. First of all, as we've discussed before, you need a global variable to store the value that will be displayed, as well as a helper function that updates the display based on the variable.

1let displayValue = "";
2
3function updateDisplay() {
4  if (displayValue === "") {
5    document.getElementById("display").innerHTML = "0";
6  } else {
7    document.getElementById("display").innerHTML = displayValue;
8  }
9}

Here, we are using the id selector getElementById("display"), so make sure your display element has the correct id as well.

1<div class="calculator">
2  <div class="display" id="display">0</div>
3  <div class="buttons">. . .</div>
4</div>

innerHTML points to the content of the selected HTML node.

In this example, if the displayValue is empty, 0 will be displayed. If not, the actual value will be displayed.

appendNumber() and appendOperator()

Next, you need an appendNumber() function that updates the displayValue by appending new numbers and also updates the display afterward.

1function appendNumber(number) {
2  displayValue += number;
3  updateDisplay();
4}

And, of course, the appendOperator() function does the same thing, but with the operator keys.

1function appendOperator(operator) {
2  if (
3    displayValue !== "" &&
4    !isNaN(displayValue.charAt(displayValue.length - 1))
5  ) {
6    displayValue += operator;
7    updateDisplay();
8  }
9}

However, this function is a bit trickier for two reasons.

First, you can't have two consecutive operators. For example, the equation 12 */--+ 21 doesn't make any sense. So before adding a new operator digit, you must check that the last digit of displayValue is not an operator.

In this example, displayValue.charAt(displayValue.length - 1) retrieves the last digit of displayValue, isNaN() returns true if the given value is NOT a number, and ! flips the given value. Putting them together, line 4 returns true if the last digit of displayValue is a number.

And second, an equation should not start with an operator, so you have to ensure displayValue is not empty before adding an operator (displayValue !== "").

calculate()

1function calculate() {
2  if (
3    displayValue !== "" &&
4    !isNaN(displayValue.charAt(displayValue.length - 1))
5  ) {
6    try {
7      const result = eval(displayValue);
8      displayValue = result.toString();
9      updateDisplay();
10    } catch (error) {
11      displayValue = "Error";
12      updateDisplay();
13    }
14  }
15}

The calculate() function is at the heart of this project, but it is actually rather easy to understand. We are using the built-in function eval() to do all the heavy lifting.

You simply pass the displayValue to the function eval(), and it will return the result. However, you should remember to catch the potential errors, just in case the equation doesn't evaluate to a result that makes sense.

In practice, it is not recommended to use eval() in the production environment, as it evaluates all JavaScript expressions given to it without proper validation, and this opens the door to code injection attacks.

The source code for this article implemented a more production-ready solution, and it is available for free here.

clearDisplay()

1function clearDisplay() {
2  displayValue = "";
3  updateDisplay();
4}

Lastly, the clearDisplay() function resets displayValue to an empty string.

A challenge

You may have noticed we neglected two functions, toggleSign() and percent(). The exact implementation of these functions is available in the source code, which you can download for free. But if you prefer implementing your own version, here is a hint:

• The toggleSign() function should examine the first digit of displayValue. If it is a number, add a - sign in the front. If it is not a number, that means displayValue is already a negative value, so simply remove it.
• The percent() function should first convert displayValue into a number, and then calculate displayValue / 100.