Build a Calculator from Scratch with HTML, CSS & JavaScript

A Beginner-Friendly Project to Learn the Basics of Web Development

Want to sharpen your frontend development skills with a fun and practical project? Building a basic calculator is a great way to practice HTML structure, CSS styling, and JavaScript logic — all in one go.

In this blog, you'll learn how to build a fully functional calculator app from scratch using HTML, CSS, and vanilla JavaScript.

🔧 What You’ll Learn:

Creating a responsive layout with HTML/CSS
Handling user input with JavaScript
Building arithmetic operations (+, –, ×, ÷)
Updating the display in real-time

📁 Project Setup

Create the following files:

pgsql
calculator/
│
├── index.html
├── style.css
└── script.js

🧱 Step 1: HTML Structure

html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Simple 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="append('%')">%</button>
      <button onclick="append('/')">÷</button>
      <button onclick="delChar()">⌫</button>

      <button onclick="append('7')">7</button>
      <button onclick="append('8')">8</button>
      <button onclick="append('9')">9</button>
      <button onclick="append('*')">×</button>

      <button onclick="append('4')">4</button>
      <button onclick="append('5')">5</button>
      <button onclick="append('6')">6</button>
      <button onclick="append('-')">−</button>

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

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

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

🎨 Step 2: CSS Styling

css
/* style.css */
body {
  background: #f0f0f0;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.calculator {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  width: 300px;
}

#display {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  margin-bottom: 15px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
}

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

button {
  padding: 20px;
  font-size: 18px;
  border: none;
  background: #eee;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #d0d0d0;
}

💡 Step 3: JavaScript Logic

javascript
// script.js
const display = document.getElementById("display");

function append(char) {
  display.value += char;
}

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

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

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

✅ How It Works:

The calculator buttons add values to the display using the append() function.
The calculate() function uses eval() to compute the result.
clearDisplay() resets the input, and delChar() removes the last character.

🚀 Bonus Features You Can Add:

Light/Dark mode toggle 🌙
Keyboard input support ⌨️
History of calculations 🧾
Scientific calculator functions (√, x², log) 🧪

📦 Conclusion

This simple calculator project is perfect for beginners to:

Practice JavaScript DOM handling
Build a clean user interface
Understand core logic like input parsing & evaluation

It’s also a great project to showcase in your portfolio!

💬 Want to make a dark mode version or host it online? Drop your comment and I’ll help you out!