Build a simple calculator with HTML, CSS, and JavaScript

In this tutorial, we will build a simple calculator which will allow us to perform basic operations such as :

• subtraction
• addition
• multiplication
• division

We will use HTML, CSS, and JavaScript to design the calculator and implement the various operations functionality. The calculator will have a display and several buttons. 

By the end of this tutorial, you should have a fully functioning calculator which looks like this:

Start With the HTML and CSS

We will start by building the interface with HTML and CSS. In your index.html file, define the structure. We will have an outer grid-container div element to house the entire layout. The container will use a grid layout, allowing us to align our content in rows and columns and providing flexibility.

Inside the grid-container, create another div called calculator-grid containing the textarea display and all the button elements.

1

<div class = "grid-container">

2

    <div class = "calculator-grid ">

3

        <textarea type="text" id = "inputtext" placeholder="0"></textarea>

4

        <button>C</button>

5

        <button>DEL</button>

6

        <button></button>

7

        <button>+</button>

8

        <button>7</button>

9

        <button>8</button>

10

        <button>9</button>

11

        <button>-</button>

12

        <button>4</button>

13

        <button>5</button>

14

        <button>6</button>

15

        <button>*</button>

16

        <button>1</button>

17

        <button>2</button>

18

        <button>3</button>

19

        <button>/</button>

20

        <button>00</button>

21

        <button>0</button>

22

        <button>.</button>

23

        <button>=</button>

24

    </div>

25

    </div>

Styling the Calculator with CSS

Apply the display:grid attribute to make the grid-container a grid. align-items: center and justify-content: center will ensure that the contents will be centered horizontally and vertically in the container element.

1

.grid-container {

2

    display: grid;

3

    align-items: center;

4

    justify-content: center; 

5

}

The next step is to style the calculator-grid  div element, which contains the buttons and the textarea element. CSS provides the property grid-template-columns which defines the columns and sizes of a grid container. In our case, grid-template-columns: repeat(4, 1fr) means that we will have four columns of equal width and size.  

The grid-gap: 1px; rule together with a background color will create an equal space border between all the cells.

1

.calculator-grid {

2

    display: grid;

3

    grid-template-columns: repeat(4, 1fr);

4

    grid-template-rows: repeat(6, 1fr);

5

    grid-gap: 1px;

6

    background-color: #999;

7

} 

Styling the Buttons

Let’s apply the following styles to the buttons to make them more appealing. We’re using the DM Mono font from Google for this interface, to give us a genuine calculator feel.

1

.calculator-grid button {

2

    font-family: 'DM Mono', monospace;

3

    font-size: 25px;

4

    background-color: #fff;

5

    border: none;

6

    cursor: pointer;

7

} 

Styling the Display

We want the display to span the entire width of 4 columns, and the text aligned at the end. We also apply a background color to give visible separation with the buttons.

1

textarea {

2

    grid-column: span 4;

3

    font-family: 'DM Mono', monospace;

4

    font-size: 25px;

5

    text-align: end;

6

    background-color: #fad3cb;

7

    padding: 15px;

8

    border: none;

9

}

We also want the 4 buttons at the bottom to have a different background color.

1

.calculator-grid  button:nth-child(n+18) {

2

    background-color: tomato; 

3

}

We also want to apply a dark background color when the buttons are hovered.

1

button:hover,

2

.calculator-grid button:nth-child(n+18):hover {

3

    background-color: #440b15;

4

    color: white;

5

    transition: 0.2s;

6

}

Mathematical Operations Functionality with JavaScript

We’re now done with the interface, so let’s add the JavaScript to make the calculator functional. We’ll start by selecting the #inputtext element and the buttons.

1

const input = document.getElementById('inputtext');

2

const buttons = document.querySelectorAll('button');

Next, let’s create a function called operation that will take the value of the button clicked as an argument and do the following:

• if the value is C, we will clear the contents of the input element.
• if the value is DEL, we will remove the last character from the input element. For example, if the current value in the input is 123, clicking the DEL button will remove 3; if you click the DEL button again, the value 2 will be removed, and so on.
• if the value is =, we will apply another function that will return the result of the expression.

The Operation Function

Let’s create the operation() function. 

1

function operation(buttonValue) {

2

    if (buttonValue === 'C') {

3

        input.value = '';

4

    } else if (buttonValue === 'DEL') {

5

        input.value = input.value.slice(0, -1);

6

    } else if (buttonValue === '=') {

7

        input.value = calculate(input.value);

8

    } else {

9

        input.value += buttonValue;

10

    }

11

}

The Calculate Function

The calculate() function takes the expression as an argument. Inside the calculate() function, we create a new function with the Function() constructor. The new function returns the result of evaluating the expression. Then, we call the function to execute the expression. If the expression cannot be evaluated, we return “Malformed Operation”.

1

function calculate(expression) {

2

    console.log(expression);

3

    try {

4

        return new Function('return ' + expression)();

5

    } catch (error) {

6

        return 'Malformed Operation';

7

    }

8

}

Lastly, for each button, we will get its  value, add an event listener that will listen for clicks, and apply the operation function().

1

buttons.forEach(button=> { 

2

    let buttonValue = button.innerText;

3

    button.addEventListener('click', function(){operation(buttonValue)})

4

5

});

Full JavaScript Code

The full JavaScript code looks like this:

1

const input = document.getElementById('inputtext');

2

const buttons = document.querySelectorAll('button');

3

4

function calculate(expression) {

5

    console.log(expression);

6

7

    try {

8

        return new Function('return ' + expression)();

9

    } catch (error) {

10

        return 'Malformed Operation';

11

    }

12

}

13

14

15

function operation(buttonValue) {

16

    if (buttonValue === 'C') {

17

        input.value = '';

18

    } else if (buttonValue === 'DEL') {

19

        input.value = input.value.slice(0, -1);

20

    } else if (buttonValue === '=') {

21

        input.value = calculate(input.value);

22

    } else {

23

        input.value += buttonValue;

24

    }

25

}

26

27

buttons.forEach(button => {

28

    let buttonValue = button.innerText;

29

    button.addEventListener('click', function () {

30

        operation(buttonValue);

31

    });

32

});

As a reminder, see our calculator in action below:

Conclusion

This tutorial has covered how to build a basic calculator. Now, it’s your turn to give it a try and create your own! Have fun building!