Cara Membuat Aplikasi Kalkulator dengan HTML, CSS, dan JavaScript

Dipublikasikan: Juli 2026

Kalkulator adalah salah satu proyek web app paling populer untuk pemula. Tutorial ini akan memandu Anda membuat kalkulator ilmiah sederhana yang berfungsi penuh hanya dengan HTML, CSS, dan JavaScript murni.

Fitur Kalkulator

Operasi dasar: +, -, x, /
Tombol CE (clear entry) dan AC (all clear)
Tampilan responsif
Desain modern dengan gradien

Kode Lengkap

Simpan kode berikut sebagai kalkulator.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator Sederhana</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family:'Segoe UI',Arial,sans-serif;
      min-height:100vh;
      background:linear-gradient(135deg,#667eea,#764ba2);
      display:flex;
      justify-content:center;
      align-items:center;
      padding:20px;
    }
    .calculator {
      background:#fff;
      border-radius:20px;
      padding:25px;
      box-shadow:0 20px 60px rgba(0,0,0,0.3);
      width:100%;
      max-width:380px;
    }
    .display {
      background:#1a1a2e;
      color:#fff;
      padding:20px;
      border-radius:12px;
      text-align:right;
      margin-bottom:20px;
      min-height:100px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    .display .expression { font-size:18px; color:#aaa; min-height:28px; word-break:break-all; }
    .display .result { font-size:42px; font-weight:700; word-break:break-all; }
    .buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
    button {
      padding:18px; font-size:20px; border:none; border-radius:12px;
      cursor:pointer; font-weight:600; transition:all 0.2s;
    }
    button:hover { transform:scale(1.05); }
    button:active { transform:scale(0.95); }
    .num { background:#f0f0f0; color:#333; }
    .num:hover { background:#e0e0e0; }
    .op { background:#667eea; color:#fff; }
    .op:hover { background:#5a6fd6; }
    .eq { background:#f093fb; color:#fff; grid-column:span 1; }
    .eq:hover { background:#e882f5; }
    .clear { background:#ff6b6b; color:#fff; }
    .clear:hover { background:#e55a5a; }
    .zero { grid-column:span 2; }
  </style>
</head>
<body>
  <div class="calculator">
    <div class="display">
      <div class="expression" id="expression"></div>
      <div class="result" id="result">0</div>
    </div>
    <div class="buttons">
      <button class="clear" onclick="clearAll()">AC</button>
      <button class="clear" onclick="clearEntry()">CE</button>
      <button class="clear" onclick="backspace()">âŒ«</button>
      <button class="op" onclick="appendOp('/')">Ã·</button>
      <button class="num" onclick="appendNum('7')">7</button>
      <button class="num" onclick="appendNum('8')">8</button>
      <button class="num" onclick="appendNum('9')">9</button>
      <button class="op" onclick="appendOp('*')">Ã—</button>
      <button class="num" onclick="appendNum('4')">4</button>
      <button class="num" onclick="appendNum('5')">5</button>
      <button class="num" onclick="appendNum('6')">6</button>
      <button class="op" onclick="appendOp('-')">âˆ’</button>
      <button class="num" onclick="appendNum('1')">1</button>
      <button class="num" onclick="appendNum('2')">2</button>
      <button class="num" onclick="appendNum('3')">3</button>
      <button class="op" onclick="appendOp('+')">+</button>
      <button class="num zero" onclick="appendNum('0')">0</button>
      <button class="num" onclick="appendNum('.')">.</button>
      <button class="eq" onclick="calculate()">=</button>
    </div>
  </div>
  <script>
    let expression = ''; let result = '0';
    function render() {
      document.getElementById('expression').textContent = expression;
      document.getElementById('result').textContent = result;
    }
    function appendNum(n) {
      if (result === '0' && n !== '.') { result = n; }
      else if (result.length < 16) { result += n; }
      render();
    }
    function appendOp(op) {
      expression = result + ' ' + op + ' ';
      result = '0';
      render();
    }
    function calculate() {
      try {
        const expr = expression + result;
        const res = Function('"use strict";return (' + expr.replace(/Ã—/g,'*').replace(/Ã·/g,'/') + ')')();
        expression = expr + ' =';
        result = Number.isFinite(res) ? String(parseFloat(res.toFixed(10))) : 'Error';
      } catch(e) { result = 'Error'; }
      render();
    }
    function clearAll() { expression = ''; result = '0'; render(); }
    function clearEntry() { result = '0'; render(); }
    function backspace() {
      result = result.length > 1 ? result.slice(0,-1) : '0';
      render();
    }
  </script>
</body>
</html>