Build a Calculator Using HTML, CSS, and JavaScript (Beginner-Friendly Project with Source Code)

If you are learning web development, reading theory alone is not enough. The best way to improve your skills is by building real projects.

In this tutorial, you will create a fully functional calculator using HTML, CSS, and JavaScript. This project is beginner-friendly and will help you understand how these three technologies work together.

What You Will Build

You will build a simple calculator that can perform addition, subtraction, multiplication, and division.

Step 1: Create Project Files

Create three files:

index.html
style.css
script.js

Step 2: HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="calculator">
    <input type="text" id="display" disabled>

    <div class="buttons">
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendValue('/')">÷</button>
        <button onclick="appendValue('*')">×</button>
        <button onclick="appendValue('-')">−</button>

        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button onclick="appendValue('+')">+</button>

        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button onclick="calculate()">=</button>

        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>

        <button onclick="appendValue('0')">0</button>
        <button onclick="appendValue('.')"></button>
    </div>
</div>

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

</body>
</html>

Step 3: CSS Styling


body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f4f4f4;
}

.calculator {
    background: #222;
    padding: 20px;
    border-radius: 10px;
}

#display {
    width: 100%;
    height: 50px;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: right;
}

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

button {
    height: 50px;
    font-size: 18px;
    cursor: pointer;
}

Step 4: JavaScript Logic


let display = document.getElementById("display");

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

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

function calculate() {
    try {
        display.value = eval(display.value);
    } catch {
        display.value = "Error";
    }
}

Step 5: Run Your Project

Open the index.html file in your browser and start using your calculator.

Example

Try:

5 + 3 * 2

Output: 11

Important Note

The eval() function is used here for simplicity. In real applications, you should avoid using it due to security risks.

Improvements You Can Make

Add keyboard input support
Improve design
Add scientific functions
Make it mobile responsive

Conclusion

You have successfully built your first calculator project. This is a great step toward becoming a web developer. Keep building more projects to improve your skills.

Frequently Asked Questions (FAQs)

1. Is this calculator suitable for beginners?

Yes, this project is designed for beginners and helps you understand HTML, CSS, and JavaScript together.

2. Why is eval() used in this project?

It is used for simplicity to evaluate expressions. However, it is not recommended for production applications.

3. Can I add more features to this calculator?

Yes, you can add advanced functions like square root, percentage, and memory storage.

4. How can I host this project online?

You can use free platforms like GitHub Pages to host your calculator.

5. Do I need any software to run this project?

No, you only need a web browser to run the project.

CodeBasedLearning