Build a personal finance dashboard as a static web app in this directory: index.html, s…

claude-codeclaude-fable-5 · 77 steps · 13m 51s · 8 filessession a217294b-d60@patrick-toulme
Build a personal finance dashboard as a static web app in this directory: index.html, style.css, app.js, data.js, charts.js. Transactions table with add/edit/delete + localStorage, monthly budget bars, a canvas spending-over-time chart, category filters, CSV import/export, dark theme, keyboard shortcuts, and a self-test page (tests.html) that exercises the core logic. Run your tests with a headless check (node) and fix what fails.
same matchclaude-code · 77 steps codex · 49 steps opencode · 44 steps pi · 28 steps antigravity · 28 steps
compare in arena
step 20 / 77
app.jschange 1/1
/*
 * app.js — UI wiring: state, localStorage persistence, table, forms,
 * filters, CSV import/export, keyboard shortcuts.
 */
(function () {
  'use strict';
 
  var F = window.Finance;
  var C = window.Charts;
 
  var LS_TX = 'finance.transactions.v1';
  var LS_BUDGETS = 'finance.budgets.v1';
 
  var state = {
    txs: [],
    budgets: {},
    filters: { category: 'All', search: '', month: 'All' },
    budgetMonth: todayStr().slice(0, 7),
    editingId: null,
    chart: null
  };
 
  function todayStr() {
    var d = new Date();
    var m = d.getMonth() + 1, day = d.getDate();
    return d.getFullYear() + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day);
  }
 
  var $ = function (sel) { return document.querySelector(sel); };
  var els = {};
 
  /* ---------- persistence ---------- */
 
  function loadState() {
    var raw = null;
    try { raw = localStorage.getItem(LS_TX); } catch (e) { /* private mode */ }
    if (raw) {
      try { state.txs = JSON.parse(raw) || []; } catch (e) { state.txs = []; }
    } else {
      state.txs = F.sampleData(todayStr());
      saveTxs();
    }
    var rawB = null;
    try { rawB = localStorage.getItem(LS_BUDGETS); } catch (e) { /* ignore */ }
    if (rawB) {
      try { state.budgets = JSON.parse(rawB) || {}; } catch (e) { state.budgets = null; }
    }
    if (!state.budgets || !Object.keys(state.budgets).length) {
      state.budgets = Object.assign({}, F.DEFAULT_BUDGETS);
    }
  }
 
  function saveTxs() {
    try { localStorage.setItem(LS_TX, JSON.stringify(state.txs)); } catch (e) { /* ignore */ }
  }
  function saveBudgets() {
    try { localStorage.setItem(LS_BUDGETS, JSON.stringify(state.budgets)); } catch (e) { /* ignore */ }
  }
 
  /* ---------- rendering ---------- */
 
  function render() {
    renderStats();
    renderChart();
    renderBudgets();
    renderMonthOptions();
    renderTable();
  }
 
  function renderStats() {
    var month = todayStr().slice(0, 7);
    var totals = F.monthlyTotals(state.txs)[month] || { spent: 0, income: 0, net: 0 };
    els.statSpent.textContent = F.formatMoney(totals.spent);
    els.statIncome.textContent = F.formatMoney(totals.income);
    els.statNet.textContent = F.formatMoney(totals.net);
    els.statNet.classList.toggle('is-negative', totals.net < 0);
    els.statMonthLabel.textContent = F.monthLabel(month);
  }
 
  function renderChart() {
    var series = F.monthlySeries(state.txs, todayStr().slice(0, 7), 12);
    state.chart = C.spendingChart(els.chartCanvas, els.chartTooltip, series, {
      formatShort: F.formatMoneyShort,
      formatLong: F.formatMoney,
      monthLabel: F.monthLabel
    });
  }
 
  function renderBudgets() {
    els.budgetMonthLabel.textContent = F.monthLabel(state.budgetMonth);
    var rows = F.budgetStatus(state.txs, state.budgets, state.budgetMonth);
    C.renderBudgetBars(els.budgetList, rows, {
      formatMoney: F.formatMoney,
      onEdit: openBudgetEditor
    });
  }
 
  function renderMonthOptions() {
    var months = {};
    state.txs.forEach(function (t) { months[F.monthKey(t.date)] = true; });
    var keys = Object.keys(months).sort().reverse();
    var current = state.filters.month;
    els.filterMonth.innerHTML = '';
    var all = document.createElement('option');
    all.value = 'All';
    all.textContent = 'All months';
    els.filterMonth.appendChild(all);
    keys.forEach(function (m) {
      var opt = document.createElement('option');
      opt.value = m;
      opt.textContent = F.monthLabel(m);
      els.filterMonth.appendChild(opt);
    });
    els.filterMonth.value = keys.indexOf(current) !== -1 ? current : 'All';
    state.filters.month = els.filterMonth.value;
  }
 
  function renderTable() {
    var visible = F.sortByDateDesc(F.filterTransactions(state.txs, state.filters));
    els.txCount.textContent = visible.length + ' of ' + state.txs.length + ' transactions';
    els.txBody.innerHTML = '';
    if (!visible.length) {
      var tr = document.createElement('tr');
      var td = document.createElement('td');
      td.colSpan = 5;
      td.className = 'empty-note';
      td.textContent = state.txs.length ? 'Nothing matches the current filters.' : 'No transactions yet — press N to add one.';
      tr.appendChild(td);
      els.txBody.appendChild(tr);
      return;
    }
    visible.forEach(function (t) {
      var tr = document.createElement('tr');
      tr.dataset.id = t.id;
 
      var tdDate = document.createElement('td');
      tdDate.className = 'col-date';
      tdDate.textContent = t.date;
 
      var tdDesc = document.createElement('td');
      tdDesc.className = 'col-desc';
      tdDesc.textContent = t.description;
 
      var tdCat = document.createElement('td');
      var chip = document.createElement('span');
      chip.className = 'cat-chip';
      chip.textContent = t.category;
      tdCat.appendChild(chip);
 
      var tdAmt = document.createElement('td');
      tdAmt.className = 'col-amount' + (t.amount > 0 ? ' is-income' : '');
      tdAmt.textContent = (t.amount > 0 ? '+' : '') + F.formatMoney(t.amount);
 
      var tdActions = document.createElement('td');
      tdActions.className = 'col-actions';
      var btnEdit = document.createElement('button');
      btnEdit.className = 'btn-ghost btn-small';
      btnEdit.textContent = 'Edit';
      btnEdit.addEventListener('click', function () { openForm(t); });
      var btnDel = document.createElement('button');
      btnDel.className = 'btn-ghost btn-small btn-danger';
      btnDel.textContent = 'Delete';
      btnDel.addEventListener('click', function () { removeTx(t); });
      tdActions.appendChild(btnEdit);
      tdActions.appendChild(btnDel);
 
      tr.appendChild(tdDate);
      tr.appendChild(tdDesc);
      tr.appendChild(tdCat);
      tr.appendChild(tdAmt);
      tr.appendChild(tdActions);
      els.txBody.appendChild(tr);
    });
  }
 
  /* ---------- transaction form ---------- */
 
  function openForm(tx) {
    state.editingId = tx ? tx.id : null;
    els.formTitle.textContent = tx ? 'Edit transaction' : 'New transaction';
    els.formError.hidden = true;
    els.fDate.value = tx ? tx.date : todayStr();
    els.fDesc.value = tx ? tx.description : '';
    els.fCategory.value = tx ? tx.category : 'Groceries';
    els.fAmount.value = tx ? Math.abs(tx.amount) : '';
    els.formPanel.hidden = false;
    els.fDesc.focus();
  }
 
  function closeForm() {
    state.editingId = null;
    els.formPanel.hidden = true;
  }
 
  function submitForm(e) {
    e.preventDefault();
    var category = els.fCategory.value;
    var raw = Number(els.fAmount.value);
    var signed = category === 'Income' ? Math.abs(raw) : -Math.abs(raw);
    var tx = {
      date: els.fDate.value,
      description: els.fDesc.value,
      category: category,
      amount: signed
    };
    var v = F.validateTransaction(tx);
    if (!v.ok) {
      els.formError.textContent = v.errors.join('. ');
      els.formError.hidden = false;
      return;
    }
    if (state.editingId != null) {
      state.txs = F.updateTransaction(state.txs, state.editingId, tx);
      toast('Transaction updated');
    } else {
      state.txs = F.addTransaction(state.txs, tx);
      toast('Transaction added');
    }
    saveTxs();
    closeForm();
    render();
  }
 
  function removeTx(tx) {
    if (!window.confirm('Delete "' + tx.description + '" (' + F.formatMoney(tx.amount) + ')?')) return;
    state.txs = F.deleteTransaction(state.txs, tx.id);
    saveTxs();
    toast('Transaction deleted');
    render();
  }
 
  /* ---------- budgets ---------- */
 
  function openBudgetEditor(row) {
    var input = window.prompt('Monthly budget for ' + row.category + ':', row.budget);
    if (input == null) return;
    var n = Number(input);
    if (!isFinite(n) || n < 0) { toast('Budget must be a non-negative number'); return; }
    state.budgets[row.category] = Math.round(n * 100) / 100;
    saveBudgets();
    renderBudgets();
    toast(row.category + ' budget set to ' + F.formatMoney(n));
  }
 
  /* ---------- CSV ---------- */
 
  function exportCSV() {
    var csv = F.toCSV(F.sortByDateDesc(state.txs));
    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'transactions.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toast('Exported ' + state.txs.length + ' transactions');
  }
 
  function importCSVFile(file) {
    var reader = new FileReader();
    reader.onload = function () {
      var result = F.importCSV(state.txs, String(reader.result));
      state.txs = result.txs;
      saveTxs();
      render();
      var msg = 'Imported ' + result.added + ' transaction' + (result.added === 1 ? '' : 's');
      if (result.errors.length) msg += ' · ' + result.errors.length + ' row(s) skipped';
      toast(msg);
      if (result.errors.length) console.warn('CSV import issues:\n' + result.errors.join('\n'));
    };
    reader.readAsText(file);
  }
 
  /* ---------- keyboard shortcuts ---------- */
 
  function isTyping(e) {
    var t = e.target;
    return t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable);
  }
 
  function onKeyDown(e) {
    if (e.key === 'Escape') {
      if (!els.helpOverlay.hidden) { els.helpOverlay.hidden = true; return; }
      if (!els.formPanel.hidden) { closeForm(); return; }
      if (document.activeElement === els.filterSearch) els.filterSearch.blur();
      return;
    }
    if (isTyping(e) || e.metaKey || e.ctrlKey || e.altKey) return;
    switch (e.key) {
      case 'n': e.preventDefault(); openForm(null); break;
      case '/': e.preventDefault(); els.filterSearch.focus(); els.filterSearch.select(); break;
      case 'e': e.preventDefault(); exportCSV(); break;
      case 'i': e.preventDefault(); els.fileInput.click(); break;
      case '?': e.preventDefault(); els.helpOverlay.hidden = !els.helpOverlay.hidden; break;
      case '[': e.preventDefault(); shiftBudgetMonth(-1); break;
      case ']': e.preventDefault(); shiftBudgetMonth(1); break;
    }
  }
 
  function shiftBudgetMonth(delta) {
    state.budgetMonth = F.shiftMonth(state.budgetMonth, delta);
    renderBudgets();
  }
 
  /* ---------- toast ---------- */
 
  var toastTimer = null;
  function toast(msg) {
    els.toast.textContent = msg;
    els.toast.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { els.toast.classList.remove('show'); }, 2600);
  }
 
  /* ---------- init ---------- */
 
  function cacheEls() {
    els.statSpent = $('#stat-spent');
    els.statIncome = $('#stat-income');
    els.statNet = $('#stat-net');
    els.statMonthLabel = $('#stat-month-label');
    els.chartCanvas = $('#spending-chart');
    els.chartTooltip = $('#chart-tooltip');
    els.budgetList = $('#budget-list');
    els.budgetMonthLabel = $('#budget-month-label');
    els.filterCategory = $('#filter-category');
    els.filterMonth = $('#filter-month');
    els.filterSearch = $('#filter-search');
    els.txBody = $('#tx-body');
    els.txCount = $('#tx-count');
    els.formPanel = $('#form-panel');
    els.formTitle = $('#form-title');
    els.formError = $('#form-error');
    els.fDate = $('#f-date');
    els.fDesc = $('#f-desc');
    els.fCategory = $('#f-category');
    els.fAmount = $('#f-amount');
    els.fileInput = $('#file-input');
    els.helpOverlay = $('#help-overlay');
    els.toast = $('#toast');
  }
 
  function fillCategorySelects() {
    [els.filterCategory, els.fCategory].forEach(function (sel) {
      var isFilter = sel === els.filterCategory;
      sel.innerHTML = '';
      if (isFilter) {
        var all = document.createElement('option');
        all.value = 'All';
        all.textContent = 'All categories';
        sel.appendChild(all);
      }
      F.CATEGORIES.forEach(function (c) {
        var opt = document.createElement('option');
        opt.value = c;
        opt.textContent = c;
        sel.appendChild(opt);
      });
    });
  }
 
  function bind() {
    $('#btn-new').addEventListener('click', function () { openForm(null); });
    $('#btn-export').addEventListener('click', exportCSV);
    $('#btn-import').addEventListener('click', function () { els.fileInput.click(); });
    $('#btn-help').addEventListener('click', function () { els.helpOverlay.hidden = false; });
    $('#btn-close-help').addEventListener('click', function () { els.helpOverlay.hidden = true; });
    els.helpOverlay.addEventListener('click', function (e) {
      if (e.target === els.helpOverlay) els.helpOverlay.hidden = true;
    });
    $('#btn-cancel').addEventListener('click', closeForm);
    $('#tx-form').addEventListener('submit', submitForm);
    $('#budget-prev').addEventListener('click', function () { shiftBudgetMonth(-1); });
    $('#budget-next').addEventListener('click', function () { shiftBudgetMonth(1); });
    els.fileInput.addEventListener('change', function () {
      if (els.fileInput.files.length) importCSVFile(els.fileInput.files[0]);
      els.fileInput.value = '';
    });
    els.filterCategory.addEventListener('change', function () {
      state.filters.category = els.filterCategory.value;
      renderTable();
    });
    els.filterMonth.addEventListener('change', function () {
      state.filters.month = els.filterMonth.value;
      renderTable();
    });
    els.filterSearch.addEventListener('input', function () {
      state.filters.search = els.filterSearch.value;
      renderTable();
    });
    document.addEventListener('keydown', onKeyDown);
    var resizeTimer = null;
    window.addEventListener('resize', function () {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(renderChart, 120);
    });
  }
 
  document.addEventListener('DOMContentLoaded', function () {
    cacheEls();
    fillCategorySelects();
    loadState();
    bind();
    render();
  });
})();
 
409 linesjs
Writes …/app.js
Files at this step
drag the rail to scrub
Discussion

1 comment on this trajectory. Recorded by @patrick-toulme.
@patrick-toulme7/28/2026, 5:09:30 PM
Dogfood iteration 2 — first true 5-way head-to-head, uploaded after fixing the capture-scaffolding leak, the 4-session cap, and the live agent badges. All five harnesses, same prompt, exact captures. Safe to delete.
#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #skills #subagents #testing
i2-r1-claude
← all sessions