Build a Simple Calculator with HTML, CSS, and JavaScript

We’ll 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 Designing the Calculator With HTML and CSS

We’ll start by building the interface of the calculator with HTML and CSS. In your index.html file, define the structure. To house the entire layout, we’ll have an outer grid-container div element. 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

Now, let’s style the calculator with CSS.

Apply the display:grid attribute to make the grid-container a grid. Using align-items: center and justify-content: center will ensure that the contents are 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.

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. Let’s 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

}

Now, we 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

}

Finally, let’s add 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 calculator JavaScript code to make it 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’ll clear the contents of the input element.
• if the value is DEL, we’ll 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 using JavaScript code for a calculator.

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 one with the Function() constructor.

The new function returns the result of evaluating the expression. Then, we call the function to execute the expression. If said expression can’t 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’ll 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 JS calculator 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 JavaScript + HTML + CSS calculator in action below:

Conclusion

This tutorial has covered how to build a basic JavaScript + CSS + HTML calculator. If you’re looking for more inspiration or pre-made calculator templates, check out Envato Elements!

Now, it’s your turn to give it a try and create your own. Have fun building!

• 

  How to Create a 2D Digital Clock with HTML, CSS, and Vanilla JavaScript

  

  Esther Vaati

  01 Mar 2024

• 

  Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

  

  Esther Vaati

  18 Jan 2024

• 

  How to Create a Simple Tip Calculator with HTML, CSS, and Vanilla JavaScript

  

  Esther Vaati

  12 Mar 2024

• 

  Build a Simple Weather App With Vanilla JavaScript

  

  George Martsoukos

  03 Jul 2024

• 

  Keyboard Accessibility Tips Using HTML and CSS

  

  Anna Monus

  12 Jan 2024

• 

  The Best CSS and JavaScript Carousel Tutorials on Tuts+

  

  George Martsoukos

  26 Jan 2024