[For Beginners] Let's Build a Web Calculator App! A Copy-Paste Guide to Your First Project

To run Python from the command prompt or PowerShell on your PC, you need to download and install Python.
If you haven’t installed it yet, please refer to the article Setting Up Python and Development Environment to install Python.

"I've started programming, but I don't know what to make..."

Hello! Just a few months ago, I was a complete beginner just like you. While building two websites from scratch with the help of AI, I realized that "the fastest way to learn is to just build something and see it work!"

So, this time, we're going to build a "calculator app"—a very popular first project—using web technologies (HTML, CSS, JavaScript). The goal of this article is simple.

To give you the successful experience of "I built an app that works in my browser just by copying and pasting!"

I'll break down technical terms as much as possible. Now, let's enjoy the world of creation together!

Screenshot of the completed web calculator app — By the end of this article, a calculator app like this will be running in your browser!

Step 1: Building the Calculator's Skeleton with HTML

First, let's create the structure, or "skeleton," of the calculator using HTML. HTML is the language that defines the structure of a webpage. We'll place elements like the display screen and buttons.

The following HTML code defines all the parts of our calculator.

<!-- HTML: Defines the calculator's skeleton -->
<div class="calculator">
    <input type="text" class="display" id="display" readonly>
    <div class="buttons">
        <button onclick="clearDisplay()" class="clear">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()" class="operator">⌫</button>
        
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('-')" class="operator">-</button>

        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('+')" class="operator">+</button>

        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

Code Explanation

<div class="calculator">: This is the main container that wraps the entire calculator.
<input type="text" id="display" readonly>: This is the screen where numbers and results are displayed. The readonly attribute prevents direct input from the keyboard.
<div class="buttons">: A container for all the buttons.
<button onclick="...">: These are the clickable buttons. The onclick attribute specifies the JavaScript function (which we'll create later) to run when the button is pressed.

At this point, it looks like a mere collection of parts without any design or functionality.

Step 2: Designing the Appearance with CSS

Next, let's use CSS to give it a cool design. CSS is the language that styles the "look" of a webpage. We'll add color and layout to the skeleton we built with HTML.

The following CSS code defines the calculator's design.

/* CSS: Styles the calculator's appearance */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}
.calculator {
    background-color: #444;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
    width: 100%;
    height: 70px;
    background-color: #222;
    color: white;
    font-size: 2.5em;
    /* ...other styles... */
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
button {
    height: 70px;
    font-size: 1.5em;
    border-radius: 10px;
    /* ...other styles... */
}
.operator {
    background-color: #f0ad4e;
}
.clear {
    background-color: #d9534f;
}

Code Explanation

.calculator { ... }: Specifies the design for the container (`div`) with class="calculator".
.display { ... }: Styles the display screen, making the text larger and the background black.
.buttons { display: grid; ... }: This is the key to the layout! display: grid is a powerful feature for arranging items in a grid, like cells in a spreadsheet. grid-template-columns: repeat(4, 1fr); commands it to "create four columns of equal width."
.operator and .clear: These apply special colors only to buttons with these specific class names.

Step 3: Bringing the Calculator to Life with JavaScript

Finally, let's create the "brain" of the calculator with JavaScript. JavaScript is the programming language that adds interactivity and functionality to webpages. We'll define the specific actions, like what happens when a button is pressed.

// JavaScript: This is the brain of the calculator
const display = document.getElementById('display');

function appendToDisplay(value) {
    display.value += value;
}

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

function deleteLast() {
    display.value = display.value.slice(0, -1);
}

function calculateResult() {
    try {
        const result = eval(display.value);
        if (result === undefined || result === null || isNaN(result)) {
            display.value = 'Error';
        } else {
            display.value = result;
        }
    } catch (error) {
        display.value = 'Error';
    }
}

Code Explanation

const display = ...: Gets the display screen element from the HTML and stores it in a variable named display.
appendToDisplay(value): Called when a number or operator button is pressed, it appends the new character to the string in the display.
clearDisplay(): For the "C" button. It empties the display.
calculateResult(): For the "=" button. It uses a handy function called eval() to calculate the mathematical expression (a string) in the display and replaces it with the result. The try...catch is a safeguard to display an error if an invalid expression is entered.

Bonus: The Complete Code and How to "Show" It

Now, the complete, working calculator is what you get when you combine the HTML, CSS, and JavaScript into a single file. In case you want to show this awesome code to someone or feature it on your blog, we've prepared both the "Final Product" and the "Escaped Code for Display."

💡 Final Product (Save as .html and use directly)

Copy this entire code, save it as calculator.html, and open it in your browser to see a working calculator.

📜 For Display (Embed this in a blog post, etc.)

This is the same code as above, but with characters like < and > converted (escaped) so they can be safely displayed in HTML. Paste this inside the <pre><code> tags in your blog post.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Calculator</title>
    <style>
        /* CSS: Styles the calculator's appearance */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
            font-family: sans-serif;
            margin: 0;
        }
        .calculator {
            background-color: #444;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .display {
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
            text-align: right;
            font-size: 2.5em;
            padding: 10px;
            box-sizing: border-box;
            border: 2px solid #555;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            height: 70px;
            font-size: 1.5em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background-color: #e9e9e9;
            color: #333;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #ddd;
        }
        .operator {
            background-color: #f0ad4e;
            color: white;
        }
        .operator:hover {
            background-color: #ec9a29;
        }
        .clear {
            background-color: #d9534f;
            color: white;
        }
        .clear:hover {
            background-color: #c9302c;
        }
    </style>
</head>
<body>

    <!-- HTML: Defines the calculator's skeleton -->
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()" class="clear">C</button>
            <button onclick="appendToDisplay('/')" class="operator">/</button>
            <button onclick="appendToDisplay('*')" class="operator">*</button>
            <button onclick="deleteLast()" class="operator">⌫</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('-')" class="operator">-</button>

            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('+')" class="operator">+</button>

            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

            <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
            <button onclick="appendToDisplay('.')">.</button>
        </div>
    </div>

    <script>
        // JavaScript: This is the brain of the calculator
        const display = document.getElementById('display');

        function appendToDisplay(value) {
            display.value += value;
        }

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

        function deleteLast() {
            display.value = display.value.slice(0, -1);
        }

        function calculateResult() {
            try {
                // 'eval' evaluates a string as a mathematical expression.
                // It's not recommended for real websites due to security concerns,
                // but it's simple and effective for this self-contained example.
                const result = eval(display.value);
                if (result === undefined || result === null || isNaN(result)) {
                    display.value = 'Error';
                } else {
                    display.value = result;
                }
            } catch (error) {
                display.value = 'Error';
            }
        }
    </script>

</body>
</html>

[For Beginners] Let's Build a Web Calculator App! A Copy-Paste Guide to Your First Project

Step 1: Building the Calculator's Skeleton with HTML

Code Explanation

Step 2: Designing the Appearance with CSS

Code Explanation

Step 3: Bringing the Calculator to Life with JavaScript

Code Explanation

Bonus: The Complete Code and How to "Show" It

💡 Final Product (Save as .html and use directly)

📜 For Display (Embed this in a blog post, etc.)

Related Templates