Back to Projects Beginner

Calculator

Build a fully working calculator that handles addition, subtraction, multiplication, and division. You'll learn how to respond to button clicks and do math in JavaScript.

HTML, CSS, JavaScript ~1 hour to build Free source code

What You'll Learn

How to build a button grid using HTML and CSS Grid/Flexbox
How to handle button click events with JavaScript
How to use a switch statement to handle different cases
How to build and evaluate a math expression string
How to use JavaScript's built-in eval() to compute results

How It Works

The display shows what you've typed

There's one text input at the top that acts like a screen. Every number or operator you click gets added to a "string" (a sequence of characters) that gets shown on the screen.

Each button has a specific job

The "AC" button clears everything. "DEL" removes the last character. "=" tells JavaScript to calculate the final answer. Any other button just adds its value to the running expression.

JavaScript evaluates the math

When you press "=", the whole string (like "5+3*2") gets evaluated by JavaScript, which gives you the correct math answer following proper order of operations.

Source Code

HTML Structure

HTML

<!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="calculator">
    <input type="text" id="display" placeholder="0" readonly>
    <div class="buttons">
      <button class="btn operator span-two" data-val="AC">AC</button>
      <button class="btn operator" data-val="DEL">DEL</button>
      <button class="btn operator" data-val="/">&divide;</button>
      <button class="btn" data-val="7">7</button>
      <button class="btn" data-val="8">8</button>
      <button class="btn" data-val="9">9</button>
      <button class="btn operator" data-val="*">&times;</button>
      <button class="btn" data-val="4">4</button>
      <button class="btn" data-val="5">5</button>
      <button class="btn" data-val="6">6</button>
      <button class="btn operator" data-val="-">&minus;</button>
      <button class="btn" data-val="1">1</button>
      <button class="btn" data-val="2">2</button>
      <button class="btn" data-val="3">3</button>
      <button class="btn operator" data-val="+">+</button>
      <button class="btn" data-val="0">0</button>
      <button class="btn" data-val=".">.</button>
      <button class="btn equals span-two" data-val="=">=</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

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

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  font-family: 'Segoe UI', sans-serif;
}

.calculator {
  background: #1e1e2e;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  width: 320px;
}

#display {
  width: 100%;
  background: transparent;
  border: none;
  text-align: right;
  color: white;
  font-size: 2.5rem;
  padding: 10px 8px 16px;
  outline: none;
  caret-color: transparent;
}

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

.btn {
  background: #2a2a3e;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 18px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}

.btn:hover { background: #3a3a5e; transform: scale(0.96); }
.btn:active { background: #4a4a6e; }

.operator { color: #f09a0f; }

.equals {
  background: #f09a0f;
  color: white;
  font-weight: 700;
}
.equals:hover { background: #d4880d; }

.span-two { grid-column: span 2; }

JavaScript Logic

JavaScript

const display = document.getElementById('display');
let expression = '';

// Listen for clicks on all buttons
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const val = this.dataset.val;

    switch(val) {
      case 'AC':
        expression = '';
        display.value = '';
        break;

      case 'DEL':
        expression = expression.slice(0, -1);
        display.value = expression;
        break;

      case '=':
        try {
          expression = String(eval(expression));
          display.value = expression;
        } catch {
          display.value = 'Error';
          expression = '';
        }
        break;

      default:
        expression += val;
        display.value = expression;
    }
  });
});

Download Source Code

Get the complete calculator as a single HTML file. Works in any browser instantly!

Download Project

Single HTML file · All code included

To-Do List Digital Clock