CodeBasedLearning

Home
Frontend Development

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

Build a simple calculator using HTML, CSS, and JavaScript. Step-by-step beginner project with source code and easy explanation.


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.

Prasun Barua is an Electrical and Electronic Engineer, engineering consultant, and technical author. He writes instructional and reference books covering electrical engineering, renewable energy, semiconductors and microelectronics, software, and industrial automation. His books include Semiconductor Device Fabrication Process, How to Design and Size Solar PV Systems, Fundamentals of Electrical Substations, and PLC Industrial Automation. His other titles cover electronics fundamentals, MOSFETs, VLSI design, switchgear, Python programming, MATLAB, industrial AI, and computer networking. Written for engineering students, technicians, practicing engineers, and technology enthusiasts, his books focus on clear technical explanations, practical calculations, examples, and step-by-step approaches to engineering problems.