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

pigpt-5.5 · 22 steps · 2m 52s · 6 filessession 0fc0b110-d05@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 · 113 steps codex · 56 steps pi · 22 steps antigravity · 33 steps

compare in arena

step 16 / 22

app.jschange 1/1

const FD = window.FinanceData;
let transactions = FD.loadTransactions(localStorage);
let budgets = FD.loadBudgets(localStorage);
let filters = { category: 'All', month: new Date().toISOString().slice(0, 7), query: '' };
 
const $ = id => document.getElementById(id);
const money = n => (n < 0 ? '-' : '') + '$' + Math.abs(n).toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });
 
function init() {
  populateCategories();
  $('date').value = new Date().toISOString().slice(0, 10);
  $('filterMonth').value = filters.month;
  $('txForm').addEventListener('submit', saveForm);
  $('resetBtn').addEventListener('click', resetForm);
  $('filterCategory').addEventListener('change', e => { filters.category = e.target.value; render(); });
  $('filterMonth').addEventListener('change', e => { filters.month = e.target.value; render(); });
  $('search').addEventListener('input', e => { filters.query = e.target.value; render(); });
  $('exportBtn').addEventListener('click', exportCsv);
  $('importFile').addEventListener('change', importCsv);
  $('themeBtn').addEventListener('click', toggleTheme);
  document.addEventListener('keydown', shortcuts);
  if (localStorage.getItem('finance-dashboard-theme') === 'dark') document.body.classList.add('dark');
  render();
}
 
function populateCategories() {
  const categories = Array.from(new Set([...FD.defaultCategories, ...transactions.map(t => t.category)])).sort();
  $('category').innerHTML = categories.map(c => `<option>${escapeHtml(c)}</option>`).join('');
  $('filterCategory').innerHTML = '<option>All</option>' + categories.map(c => `<option>${escapeHtml(c)}</option>`).join('');
}
 
function saveForm(e) {
  e.preventDefault();
  const input = { date: $('date').value, description: $('description').value, category: $('category').value, amount: $('amount').value };
  const id = $('txId').value;
  transactions = id ? FD.updateTransaction(transactions, id, input) : FD.addTransaction(transactions, input);
  persistAndRender();
  resetForm();
}
 
function resetForm() {
  $('txId').value = '';
  $('formTitle').textContent = 'Add transaction';
  $('txForm').reset();
  $('date').value = new Date().toISOString().slice(0, 10);
  $('description').focus();
}
 
function editTx(id) {
  const tx = transactions.find(t => t.id === id);
  if (!tx) return;
  $('txId').value = tx.id;
  $('date').value = tx.date;
  $('description').value = tx.description;
  $('category').value = tx.category;
  $('amount').value = tx.amount;
  $('formTitle').textContent = 'Edit transaction';
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
 
function deleteTx(id) {
  if (!confirm('Delete this transaction?')) return;
  transactions = FD.deleteTransaction(transactions, id);
  persistAndRender();
}
 
function persistAndRender() {
  FD.saveTransactions(localStorage, transactions);
  populateCategories();
  render();
}
 
function render() {
  const visible = FD.filterTransactions(transactions, filters);
  const totals = FD.summarize(visible);
  $('balance').textContent = money(totals.balance);
  $('income').textContent = money(totals.income);
  $('expenses').textContent = money(totals.expense);
  renderTable(visible);
  renderBudgets();
  FinanceCharts.drawSpendingChart($('spendingChart'), FD.spendingOverTime(visible), document.body.classList.contains('dark'));
}
 
function renderTable(rows) {
  $('txTable').innerHTML = rows.map(tx => `
    <tr>
      <td>${tx.date}</td><td>${escapeHtml(tx.description)}</td><td>${escapeHtml(tx.category)}</td>
      <td class="num ${tx.amount >= 0 ? 'amount-pos' : 'amount-neg'}">${money(tx.amount)}</td>
      <td><button class="small-btn ghost" onclick="editTx('${tx.id}')">Edit</button> <button class="small-btn danger" onclick="deleteTx('${tx.id}')">Delete</button></td>
    </tr>`).join('') || '<tr><td colspan="5">No transactions match your filters.</td></tr>';
}
 
function renderBudgets() {
  const month = filters.month || new Date().toISOString().slice(0, 7);
  const spend = FD.categorySpend(transactions, month);
  $('budgetBars').innerHTML = Object.keys(budgets).map(cat => {
    const used = spend[cat] || 0;
    const budget = Number(budgets[cat]) || 1;
    const pct = Math.min(100, Math.round((used / budget) * 100));
    const cls = pct >= 100 ? 'over' : pct >= 80 ? 'warn' : '';
    return `<div class="budget-row"><strong>${escapeHtml(cat)}</strong><div class="bar"><div class="fill ${cls}" style="width:${pct}%"></div></div><span>${money(used)} / ${money(budget)}</span></div>`;
  }).join('');
}
 
function exportCsv() {
  const blob = new Blob([FD.toCSV(transactions)], { type: 'text/csv' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob); a.download = 'transactions.csv'; a.click(); URL.revokeObjectURL(a.href);
}
 
async function importCsv(e) {
  const file = e.target.files[0];
  if (!file) return;
  try {
    const imported = FD.fromCSV(await file.text());
    transactions = FD.fromCSV(FD.toCSV([...transactions, ...imported]));
    persistAndRender();
  } catch (err) { alert('CSV import failed: ' + err.message); }
  e.target.value = '';
}
 
function toggleTheme() {
  document.body.classList.toggle('dark');
  localStorage.setItem('finance-dashboard-theme', document.body.classList.contains('dark') ? 'dark' : 'light');
  render();
}
 
function shortcuts(e) {
  if (['INPUT', 'SELECT', 'TEXTAREA'].includes(document.activeElement.tagName) && e.key !== 'Escape') return;
  if (e.key.toLowerCase() === 'n') { e.preventDefault(); resetForm(); }
  if (e.key.toLowerCase() === 'e') { e.preventDefault(); exportCsv(); }
  if (e.key.toLowerCase() === 'd') { e.preventDefault(); toggleTheme(); }
  if (e.key === '/') { e.preventDefault(); $('search').focus(); }
  if (e.key === 'Escape') resetForm();
}
 
function escapeHtml(s) { return String(s).replace(/[&<>'"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[c])); }
 
window.editTx = editTx;
window.deleteTx = deleteTx;
document.addEventListener('DOMContentLoaded', init);
 

142 linesjs

Writes tests.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#css #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui

r4-pi

← all sessions