MC, 2025

How to Build Calculator Using JavaScript: Step-by-Step Guide

Are you curious about how to build a calculator using JavaScript? Well, you’ve come to the right place! In this guide, we’ll explore how to create a basic yet functional calculator using only JavaScript, HTML, and CSS. Whether you're a beginner or someone with a bit more experience in coding, this project will help you sharpen your skills and learn how to bring an interactive tool to life with just a few lines of code.

Why Create a Calculator in JavaScript?

Building a calculator might sound simple, but it offers a fantastic way to practice many essential programming concepts. You’ll work with variables, functions, event listeners, and the Document Object Model (DOM) in a fun and practical way. Plus, you’ll gain valuable experience in creating interactive web applications. By the end of this tutorial, you’ll have your very own calculator that you can continue to expand with more advanced features.

Setting Up the Project

Before we jump into the code, let’s take a moment to set up our project structure. You'll need the following:

1 HTML file (for the structure of the calculator)
1 CSS file (for styling the calculator)
1 JavaScript file (for the functionality)

Now, let’s start by creating the basic structure of our calculator. First, create an HTML file and a CSS file, and link them together. Next, we’ll add the JavaScript functionality to make the calculator work. Here’s what the HTML will look like:




    
    
    JavaScript Calculator

Styling the Calculator

Now that we have our basic HTML structure in place, let’s move on to styling the calculator. We'll use some basic CSS to ensure the calculator looks clean and user-friendly. Add the following styles to your CSS file:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.calculator {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    width: 260px;
}

#display {
    width: 100%;
    height: 50px;
    font-size: 2em;
    text-align: right;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.button {
    padding: 20px;
    font-size: 1.5em;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #e0e0e0;
}

#equals {
    background-color: #4CAF50;
    color: white;
}

#equals:hover {
    background-color: #45a049;
}

#clear {
    background-color: #f44336;
    color: white;
}

#clear:hover {
    background-color: #e53935;
}

Adding Functionality with JavaScript

Now that we have the basic layout and styling set up, let’s move on to adding the functionality with JavaScript. The goal is to make the buttons interactive, so that when clicked, they display numbers, perform calculations, and show the result on the screen. Here's how we can achieve this:

// Get elements
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.button');
const equalsButton = document.getElementById('equals');
const clearButton = document.getElementById('clear');

let currentInput = '';
let previousInput = '';
let operator = '';

// Add event listener to each button
buttons.forEach(button => {
    button.addEventListener('click', (e) => {
        const buttonText = e.target.textContent;
        if (buttonText === 'C') {
            currentInput = '';
            previousInput = '';
            operator = '';
            display.value = '';
        } else if (buttonText === '=') {
            if (previousInput && currentInput) {
                display.value = eval(previousInput + operator + currentInput);
                previousInput = '';
                currentInput = display.value;
            }
        } else if (['+', '-', '*', '/'].includes(buttonText)) {
            if (currentInput) {
                previousInput = currentInput;
                currentInput = '';
                operator = buttonText;
            }
        } else {
            currentInput += buttonText;
            display.value = currentInput;
        }
    });
});

With this JavaScript code, we handle button clicks, store inputs, and perform calculations when the equals button is pressed. The clear button resets everything, while the operator buttons allow for basic arithmetic operations. The result is shown in the display input field.

Testing Your Calculator

After saving all your files (HTML, CSS, and JavaScript), you can open your HTML file in a browser to see the calculator in action! You should be able to click the buttons to input numbers and perform arithmetic operations. If everything works as expected, congratulations – you've successfully built your first calculator with JavaScript!