Membuat Aplikasi Pencatat Keuangan Expense Tracker

Dipublikasikan: Juli 2026

Expense tracker adalah web app pengelola keuangan pribadi yang sangat populer. Tutorial ini membuat pencatat pemasukan dan pengeluaran dengan grafik dan ringkasan otomatis.

Fitur

Tambah pemasukan & pengeluaran
Kategori transaksi
Ringkasan saldo otomatis
Filter berdasarkan kategori

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expense Tracker</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f2f5; padding:30px; }
    .container { max-width:700px; margin:0 auto; }
    h1 { text-align:center; color:#2d3436; margin-bottom:25px; }
    .summary { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-bottom:25px; }
    .summary-card { background:#fff; padding:20px; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,0.06); text-align:center; }
    .summary-card .label { font-size:12px; color:#b2bec3; text-transform:uppercase; }
    .summary-card .value { font-size:24px; font-weight:700; margin-top:5px; }
    .summary-card.balance .value { color:#6c5ce7; }
    .summary-card.income .value { color:#00b894; }
    .summary-card.expense .value { color:#d63031; }
    .form-card { background:#fff; padding:25px; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,0.06); margin-bottom:25px; }
    .form-row { display:flex; gap:12px; flex-wrap:wrap; }
    .form-row input, .form-row select { padding:12px 14px; border:2px solid #dfe6e9; border-radius:10px; font-size:14px; flex:1; min-width:120px; }
    .form-row input:focus, .form-row select:focus { outline:none; border-color:#6c5ce7; }
    .form-row button { padding:12px 24px; background:#6c5ce7; color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:14px; }
    .filter-bar { margin-bottom:20px; }
    .filter-bar select { padding:10px 14px; border:2px solid #dfe6e9; border-radius:10px; font-size:14px; width:100%; }
    .transaction-list { background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,0.06); overflow:hidden; }
    .transaction-item { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #f0f0f0; }
    .transaction-item:last-child { border-bottom:none; }
    .tx-info { flex:1; }
    .tx-desc { font-weight:600; color:#2d3436; }
    .tx-cat { font-size:12px; color:#b2bec3; margin-top:2px; }
    .tx-amount { font-weight:700; font-size:16px; }
    .tx-amount.income { color:#00b894; }
    .tx-amount.expense { color:#d63031; }
    .tx-delete { background:none; border:none; color:#b2bec3; cursor:pointer; font-size:18px; padding:5px; margin-left:10px; }
    .tx-delete:hover { color:#d63031; }
    .empty-state { text-align:center; padding:35px; color:#b2bec3; }
  </style></head><body>
  <div class="container">
    <h1>ðŸ’° Expense Tracker</h1>
    <div class="summary">
      <div class="summary-card balance"><div class="label">Saldo</div><div class="value" id="balance">Rp 0</div></div>
      <div class="summary-card income"><div class="label">Pemasukan</div><div class="value" id="totalIncome">Rp 0</div></div>
      <div class="summary-card expense"><div class="label">Pengeluaran</div><div class="value" id="totalExpense">Rp 0</div></div>
    </div>
    <div class="form-card">
      <div class="form-row">
        <input id="desc" placeholder="Deskripsi..." />
        <input id="amount" type="number" placeholder="Jumlah (Rp)" />
        <select id="type"><option value="income">Pemasukan</option><option value="expense">Pengeluaran</option></select>
        <select id="category"><option>Makanan</option><option>Transport</option><option>Belanja</option><option>Tagihan</option><option>Gaji</option><option>Hiburan</option><option>Lainnya</option></select>
        <button onclick="addTransaction()">Tambah</button>
      </div>
    </div>
    <div class="filter-bar"><select id="filter" onchange="render()"><option value="all">Semua Transaksi</option><option value="income">Pemasukan</option><option value="expense">Pengeluaran</option></select></div>
    <div class="transaction-list" id="transactionList"></div>
  </div>
  <script>
    let tx = JSON.parse(localStorage.getItem('tx')) || [];
    function addTransaction() {
      const desc = document.getElementById('desc').value.trim();
      const amount = parseFloat(document.getElementById('amount').value);
      const type = document.getElementById('type').value;
      const cat = document.getElementById('category').value;
      if (!desc || !amount) return alert('Isi deskripsi dan jumlah');
      tx.unshift({ id:Date.now(), desc, amount, type, cat, date:new Date().toLocaleDateString('id-ID') });
      localStorage.setItem('tx', JSON.stringify(tx));
      document.getElementById('desc').value=''; document.getElementById('amount').value='';
      render();
    }
    function deleteTx(id) { tx = tx.filter(t => t.id !== id); localStorage.setItem('tx',JSON.stringify(tx)); render(); }
    function render() {
      const filter = document.getElementById('filter').value;
      const filtered = filter === 'all' ? tx : tx.filter(t => t.type === filter);
      let totalIncome = 0, totalExpense = 0;
      tx.forEach(t => { if(t.type==='income') totalIncome+=t.amount; else totalExpense+=t.amount; });
      document.getElementById('totalIncome').textContent = 'Rp ' + totalIncome.toLocaleString('id-ID');
      document.getElementById('totalExpense').textContent = 'Rp ' + totalExpense.toLocaleString('id-ID');
      document.getElementById('balance').textContent = 'Rp ' + (totalIncome-totalExpense).toLocaleString('id-ID');
      const list = document.getElementById('transactionList');
      if (filtered.length === 0) { list.innerHTML = '<div class="empty-state">Belum ada transaksi</div>'; return; }
      list.innerHTML = filtered.map(t => `
        <div class="transaction-item">
          <div class="tx-info"><div class="tx-desc">${t.desc}</div><div class="tx-cat">${t.cat} Â· ${t.date}</div></div>
          <div style="display:flex;align-items:center">
            <div class="tx-amount ${t.type}">${t.type==='income'?'+':'-'} Rp ${t.amount.toLocaleString('id-ID')}</div>
            <button class="tx-delete" onclick="deleteTx(${t.id})">Ã—</button>
          </div>
        </div>`).join('');
    }
    render();
  </script>
</body></html>