How to create a calculator app using HTML, CSS and JavaScript

In this tutorial you will build a calculator app using HTML, CSS and JavaScript.

Before you get started creating your calculator app you need to ensure you have the following tools:

Required Tools:

Code Editor (VS Code Preferred)
Chrome Browser (Preferred)

If you have the above listed requirements in your device, congratulations you are ready to build your first calculator app.

Since you have the required tool, it is time to create the calculator app folder.

App Folder:

The calculator app will be developed using HTML, CSS, and JavaScript. This will include three files namely, index.html,(for HTML) styles.css (for CSS) and script.jS (for JavaScript ).

Follow these steps to create the project folder and files:

Open Vs Code
Create a folder and name it "Calculator"
Create your three files (index.html,(for HTML) styles.css (for CSS) and script.jS) in the calculator folder

Once you are done creating your folder and files you should have something like this in VS code.

At the end of this tutorial this is how your calculator app will look like:

Step 1: Setting up the HTML code

The index.html contains our project html code and to create a calculator app, you need to start by creating the HTML structure. You will use a table to create the layout for the calculator.

Note: Always save your file after adding any block of code or changes so it can reflect on the browser when you refresh the page

Open the index.html file you created and add the HTML code for the calculator and save.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Calculator</title>
</head>

<body>
    <div class="container">
        <h1>Calculator By EKE OLISE</h1>

        <div class="calculator">
            <input type="text" name="screen" id="screen">
            <table>
                <tr>
                    <td><button>(</button></td>
                    <td><button>)</button></td>
                    <td><button>C</button></td>
                    <td><button>%</button></td>
                </tr>
                <tr>
                    <td><button>7</button></td>
                    <td><button>8</button></td>
                    <td><button>9</button></td>
                    <td><button>X</button></td>
                </tr>
                <tr>
                    <td><button>4</button></td>
                    <td><button>5</button></td>
                    <td><button>6</button></td>
                    <td><button>-</button></td>
                </tr>
                <tr>
                    <td><button>1</button></td>
                    <td><button>2</button></td>
                    <td><button>3</button></td>
                    <td><button>+</button></td>
                </tr>
                <tr>
                    <td><button>0</button></td>
                    <td><button>.</button></td>
                    <td><button>/</button></td>
                    <td><button>=</button></td>
                </tr>
            </table>
        </div>
    </div>

</body>
<script src="script.js"></script>

</html>

In this HTML code, I have defined the calculator table with buttons for each number and arithmetic operation.

<table>
                <tr>
                    <td><button>(</button></td>
                    <td><button>)</button></td>
                    <td><button>C</button></td>
                    <td><button>%</button></td>
                </tr>
                <tr>
                    <td><button>7</button></td>
                    <td><button>8</button></td>
                    <td><button>9</button></td>
                    <td><button>X</button></td>
                </tr>
                <tr>
                    <td><button>4</button></td>
                    <td><button>5</button></td>
                    <td><button>6</button></td>
                    <td><button>-</button></td>
                </tr>
                <tr>
                    <td><button>1</button></td>
                    <td><button>2</button></td>
                    <td><button>3</button></td>
                    <td><button>+</button></td>
                </tr>
                <tr>
                    <td><button>0</button></td>
                    <td><button>.</button></td>
                    <td><button>/</button></td>
                    <td><button>=</button></td>
                </tr>
            </table>

I have also added a div with a class of "calculator" to hold the table.

<div class="calculator">

I have added a code that will display the calculator operations in a screen.

<input type="text" name="screen" id="screen">

Finally, we have included links to a CSS file and a JavaScript file that we will create in the next steps.

<link rel="stylesheet" href="styles.css">

<script src="script.js"></script>

Step 2: Styling the calculator with CSS

To make our calculator look visually appealing, we need to style it using CSS. Paste the below code in the styles.css file we created in the calculator folder and save.

.container{
    text-align: center;
    margin-top:23px
}


input{
    border-radius: 21px;
    border: 5px solid #244624;
    font-size:34px;
    height: 65px;
    width: 400px;
}

button{
    border-radius: 20px;
    font-size: 40px;
    background: #0cf07e;
    width: 102px;
    height: 90px;
    margin: 6px;
}

.calculator{ 
    border: 4px solid #13695d;
    background-color: #070707;
    padding: 23px;
    border-radius: 20px;
    display: inline-block;
    
}

h1{
    font-size: 23px;
    font-family: 'Courier New', Courier, monospace;
}

In this CSS code I have styled the calculator, giving it a beautiful look.

The container function is to align the calculator to the center of your device screen. The text is aligned to the center with a well defined margin.

    .container{
    text-align: center;
    margin-top:23px
}

The calculator screen is styled with the input function to display the result of any operation performed in the calculator.

    input{
    border-radius: 21px;
    border: 5px solid #244624;
    font-size:34px;
    height: 65px;
    width: 400px;
}

The button function of the calculator is styled with this line of code.

button{
    border-radius: 20px;
    font-size: 40px;
    background: #0cf07e;
    width: 102px;
    height: 90px;
    margin: 6px;
}

The calculator function is holding the calculator button and screen together for better visual effect. If you run this project in the browser without this section of code you will notice the calculator buttons and screen are apart.

.calculator{ 
    border: 4px solid #13695d;
    background-color: #070707;
    padding: 23px;
    border-radius: 20px;
    display: inline-block;
    
}

The h1 function is styling the HTML h1 tag.

h1{
    font-size: 23px;
    font-family: 'Courier New', Courier, monospace;
}

Step 3: Setting up JavaScript to add interactivity features to the calculator.

To make the calculator respond to command we need to add a JavaScript code to it. Paste the below code in the script.js file we created in the calculator folder and save.

let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
let screenValue = '';
for (item of buttons) {
    item.addEventListener('click', (e) => {
        buttonText = e.target.innerText;
        console.log('Button text is ', buttonText);
        if (buttonText == 'X') {
            buttonText = '*';
            screenValue += buttonText;
            screen.value = screenValue;
        }
        else if (buttonText == 'C') {
            screenValue = "";
            screen.value = screenValue;
        }
        else if (buttonText == '=') {
            screen.value = eval(screenValue);
        }
        else {
            screenValue += buttonText;
            screen.value = screenValue;
        }

    })
}

The Let functions enables the calculator to accept buttons command and displays it on the screen.

let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
let screenValue = '';

The For Loop statement allows the screen to hold commands inputted with the buttons.

for (item of buttons) {
    item.addEventListener('click', (e) => {
        buttonText = e.target.innerText;
        console.log('Button text is ', buttonText);

The conditional statement primarily is to ensure the calculator true value when the right commands are entered.

if (buttonText == 'X') {
            buttonText = '*';
            screenValue += buttonText;
            screen.value = screenValue;
        }
        else if (buttonText == 'C') {
            screenValue = "";
            screen.value = screenValue;
        }
        else if (buttonText == '=') {
            screen.value = eval(screenValue);
        }
        else {
            screenValue += buttonText;
            screen.value = screenValue;
        }

Now we have completed our calculator app project that has a basic design and functionality. This calculator can basic operations like addition, subtraction, multiplication, and division. It also has a clear button to clear the output and an equals button to calculate the result.

If you rightly followed the steps above, congratulations on building your first web development project. Remember the best way to learn is when you build a project.

Happy coding!

PreviousTutorial NextAuthor

Last updated 1 year ago