Build a Simple Calculator Using HTML, CSS, and JavaScript 💻

11/13/2025 06:21:00 AM

In this tutorial, we’ll create a simple yet fully functional calculator using HTML, CSS, and JavaScript. This project is perfect for beginners who want to practice DOM manipulation, event handling, and basic CSS layout techniques.

🎯 What You’ll Learn

How to structure a calculator interface using HTML.
How to style it beautifully using CSS Grid.
How to make it functional using JavaScript.

🧱 Step 1: Create the HTML Structure

Start by writing the basic layout for your calculator. Create a file named index.html and paste the following code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="text" id="display" readonly>

        <div class="keypad">
            <button class="btn" id="AC">AC</button>
            <button class="btn" id="clear">C</button>
            <button class="btn" id="openBracket">(</button>
            <button class="btn" id="closeBracket">)</button>
            <button class="btn">7</button>
            <button class="btn">8</button>
            <button class="btn">9</button>
            <button class="btn" id="divide">/</button>

            <button class="btn">4</button>
            <button class="btn">5</button>
            <button class="btn">6</button>
            <button class="btn" id="multiply">x</button>

            <button class="btn">1</button>
            <button class="btn">2</button>
            <button class="btn">3</button>
            <button class="btn" id="subtract">-</button>

            <button class="btn">0</button>
            <button class="btn" id="decimal">.</button>
            <button class="btn" id="add">+</button>
            <button class="btn" id="equals">=</button>
        </div>
    </div>

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

🎨 Step 2: Style Your Calculator with CSS

Now, let’s make the calculator look clean and modern. Create a file named style.css and add this code:


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

.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: black;
}

#display{
    margin-bottom: 20px;
    height: 60px;
    width: 330px;
    border-radius: 12px;
    text-align: right;
    font-size: 2rem;
    padding: 0 20px;
    outline: none;
    color: white;
    background-color: rgb(0, 0, 0);
    border: 1px solid yellow;
}

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

.btn{
    padding: 20px;
    border-radius: 12px;
    font-size: 1.5rem;
    cursor: pointer;
    border:none;
}

.btn:hover, .btn:focus{
    transform: translateY(-2px) scale(1.04);
    background-color: rgb(229, 226, 226);
}

.btn:active{
    transform: translateY(0);
}

#equals{
    background-color: rgb(203, 255, 125);
}

#AC{
    background-color: yellow;
}

#clear{
    background-color: rgb(252, 229, 187);
}

#add,#multiply,#divide,#subtract,#openBracket,#closeBracket{
    background-color: rgb(236, 189, 244);
}

⚙️ Step 3: Add Functionality with JavaScript

Finally, let’s make it functional. Create a file named script.js and paste this JavaScript code:


const display=document.getElementById("display");
const buttons=document.querySelectorAll(".btn");

buttons.forEach(function(button){
    button.addEventListener("click", function(){
        const value=this.innerText;

        if(value==="AC") display.value="";
        else if(value==="C") display.value=display.value.slice(0,-1);
        else if(value==="x") display.value+="*";
        else if(value==="=") 
            try {
                display.value = eval(display.value);
            } catch {
                display.value = "Error";
            }
        else display.value+=value;
    });
});

🚀 Step 4: Test It Out!

Now open your index.html file in a browser. You’ll see a beautiful calculator ready to perform basic arithmetic operations!

💡 Project Repository

Check out the full collection of beginner-friendly web projects on GitHub: smarttechtip/beginner-web-projects

This repository is designed like a “playlist” of smaller projects using HTML, CSS & JavaScript. Each folder in the repo is a standalone project you can clone, study, and improve.

🎥 Watch the Full Tutorial

If you prefer learning through video, you can watch the full step-by-step tutorial on our YouTube channel: SmartTechTip.

Happy coding! 💻✨

Search This Blog

SmartTechTip