Calculator in JavaScript

Published in: 2025-03-11 15:42:51 Author: SunshineIHCTS Section: JavaScript

Creating a simple calculator using JavaScript is an excellent way to practice JavaScript core programming concepts like functions, event handling, and DOM manipulation. Let me walk you through building a basic calculator that can perform addition, subtraction, multiplication, and division. This is a good projects idea for beginners learning JavaScript and want to test themselves with an actual project.

Step 1: Setting Up the HTML Structure

First, we need a basic HTML structure to hold our calculator's interface. Here's a simple layout:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator in JavaScript</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="appendToDisplay('/')">/</button>
            <button onclick="appendToDisplay('*')">*</button>
            <button onclick="appendToDisplay('-')">-</button>
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('+')">+</button>
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculate()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This creates a simple calculator layout with a display field and buttons for numbers, operators, and actions.

Step 2: Adding Some Basic CSS

Let's make it look decent with some CSS (save this as styles.css):

.calculator {

    width: 300px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#display {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 20px;
    box-sizing: border-box;
}

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

button {
    padding: 15px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
}

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

This gives us a clean, grid-based calculator layout.

Step 3: JavaScript Functionality

Now, let's add the logic in script.js:

function appendToDisplay(value) {

    document.getElementById('display').value += value;
}

function clearDisplay() {
    document.getElementById('display').value = '';
}

function calculate() {
    try {
        let result = eval(document.getElementById('display').value);
        document.getElementById('display').value = result;
    } catch (error) {
        document.getElementById('display').value = 'Error';
    }
}

Here's what each function does:

appendToDisplay(value): Adds the clicked button's value (number or operator) to the display.
clearDisplay(): Resets the display to empty.
calculate(): Uses JavaScript's eval() function to compute the result of the expression in the display. The try-catch block handles potential errors (like invalid expressions).

How It Works

When you click a number or operator button, appendToDisplay() adds it to the input field.
Clicking "C" clears the display with clearDisplay().
Clicking "=" triggers calculate(), which evaluates the expression and shows the result.

For example, clicking "2", "+", "3", then "=" will display "5".

Notes and Improvements

Security: In a real application, avoid using eval() due to security risks (it can execute arbitrary code). Instead, write a custom parser for safe calculations.
Enhancements: You could add features like:
- Keyboard support
- Decimal precision control
- Memory functions (M+, M-, MR)
- Backspace to delete last character

Conclusion

Building a calculator in JavaScript is a fun and practical project that reinforces fundamental web development skills. With just HTML, CSS, and a bit of JavaScript, you can create a functional tool that handles basic arithmetic. Try experimenting with the code, add your own features or style it differently and share your result in the comments section below.

Comments section

You need to be logged in to comment, Login or Register.

Approved comments:

No comments yet! be the first to comment

Description

A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.

Connect

+234 913 649 5670

hi@sunshineihcts.me

SwiftLinks

About
Privacy policy
Terms and Conditions
Contact