How to Build a Simple Calculator Using JavaScript

Creating a calculator is one of the most exciting projects for beginners in programming. It’s a great way to practice and apply the skills you’ve learned in JavaScript, HTML, and CSS. Whether you are new to web development or looking to improve your JavaScript skills, building a calculator is a fun and useful challenge. In this article, we’ll guide you step-by-step on how to build a basic calculator using JavaScript.

Before we dive into the code, let's first consider what kind of functionality our calculator should have. Typically, a basic calculator will be able to perform operations like addition, subtraction, multiplication, and division. We will also add the ability to clear the screen and reset the calculator.

Setting Up the Project

To build a calculator, you’ll need three things:

• HTML: For the structure of the calculator.
• CSS: For styling the calculator’s appearance.
• JavaScript: For the logic and functionality of the calculator.

Let’s start by creating a simple HTML structure for the calculator interface.

    
    
    
    


    

        
        

            7
            8
            9
            +

            4
            5
            6
            -

            1
            2
            3
            *

            0
            C
            =
            /
        
    
    

This HTML structure creates a basic calculator with number buttons, operator buttons, and a display screen. Next, we need to style it using CSS.

Styling the Calculator with CSS

Now, let’s add some basic styles to make our calculator look nice. You can save the following code in a file named style.css:

#calculator {
    width: 200px;
    margin: 100px auto;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

#display {
    width: 100%;
    height: 40px;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

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

.button {
    padding: 20px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    background-color: #f1f1f1;
    border: none;
    border-radius: 5px;
}

.operator {
    background-color: #ff8c00;
    color: white;
}

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

With these styles, your calculator will have a neat and modern look, with buttons that respond to mouse hover.

Adding JavaScript Functionality

Finally, it’s time to add the JavaScript logic to make our calculator functional. Here’s a simple way to handle the operations:

let currentInput = "";
let operator = null;
let firstOperand = null;

function appendNumber(number) {
    currentInput += number;
    document.getElementById("display").value = currentInput;
}

function setOperator(op) {
    if (firstOperand === null) {
        firstOperand = parseFloat(currentInput);
        operator = op;
        currentInput = "";
    }
}

function clearDisplay() {
    currentInput = "";
    operator = null;
    firstOperand = null;
    document.getElementById("display").value = "";
}

function calculate() {
    if (operator === null || currentInput === "") return;

    let secondOperand = parseFloat(currentInput);
    let result = 0;

    switch (operator) {
        case "+":
            result = firstOperand + secondOperand;
            break;
        case "-":
            result = firstOperand - secondOperand;
            break;
        case "*":
            result = firstOperand * secondOperand;
            break;
        case "/":
            if (secondOperand !== 0) {
                result = firstOperand / secondOperand;
            } else {
                alert("Cannot divide by zero!");
                return;
            }
            break;
    }

    document.getElementById("display").value = result;
    currentInput = result.toString();
    operator = null;
    firstOperand = null;
}

Let’s break down the code:

• appendNumber: Adds the number to the current input.
• setOperator: Sets the operator for the calculation.
• clearDisplay: Clears the input and resets the calculator.
• calculate: Executes the operation based on the selected operator.

This JavaScript code keeps track of the current input, the first operand, and the operator. It also handles calculations and displays the result in the input field. Now, when you click the buttons, the calculator will perform basic arithmetic operations!

Testing the Calculator

Once you have the HTML, CSS, and JavaScript set up, open the HTML file in a browser and try out your calculator! You can test addition, subtraction, multiplication, and division. The calculator should display the result after clicking the equals button.

Enhancing the Calculator

While this calculator is simple and functional, there are many ways to enhance it. Here are a few ideas:

• Add support for more advanced mathematical operations like square roots, powers, and logarithms.
• Implement keyboard support so that users can use the keyboard to input numbers and operators.
• Style the calculator further by adding animations or transitions when buttons are clicked.
• Improve error handling for edge cases such as invalid inputs or multiple consecutive operators.

Conclusion

Congratulations! You’ve just built a functional calculator using JavaScript, HTML, and CSS. This is a great project to practice your web development skills and a perfect starting point for more advanced projects. We hope you enjoyed the process and learned something new today. Keep experimenting with your code, and feel free to add more features to your calculator. Happy coding!