Capstone: ship Smart Ledger

उन्नत~50 मिनट0/5 चरण

Assemble the product

This capstone starts empty—there is no fake ledger. A real user adds their own transactions. The app validates and normalizes input, stores amounts as agorot, persists locally, derives KPIs, filters rows, deletes entries, and exports a JSON backup.

The export is a real artifact. The storage is real browser storage. The only limitation is deliberate: this learning project never connects to a bank and never asks for banking credentials.

निर्देश

Implement loadTransactions and saveTransactions using localStorage and JSON.

संकेत: Restore [] on parse failure; stringify transactions on every mutation.

Validate and normalize input in createTransaction.

Render KPIs and filtered rows from the transactions array.

Implement add and delete flows, saving after each mutation.

Export a real JSON backup with Blob and URL.createObjectURL.

आपका कोड

html

5 लाइनें

<!DOCTYPE html>
<html lang="he" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Smart Ledger</title><script src="https://cdn.tailwindcss.com"></script></head><body class="min-h-screen bg-stone-100 p-4 text-stone-900"><main class="mx-auto max-w-5xl"><header class="flex flex-wrap items-end justify-between gap-4 py-6"><div><p class="text-xs font-bold text-rose-800">LOCAL-FIRST · ללא חיבור לבנק</p><h1 class="text-4xl font-black">Smart Ledger</h1></div><button id="export-button" class="rounded-lg border border-stone-300 bg-white px-4 py-2 font-bold">ייצוא JSON</button></header><form id="transaction-form" class="grid gap-3 rounded-2xl bg-white p-5 shadow-sm md:grid-cols-5"><input id="date" type="date" required class="rounded-lg border p-3"><input id="description" required placeholder="תיאור" class="rounded-lg border p-3"><select id="type" class="rounded-lg border p-3"><option value="income">הכנסה</option><option value="expense">הוצאה</option></select><input id="amount" required type="number" min="0.01" step="0.01" placeholder="סכום" class="rounded-lg border p-3"><button class="rounded-lg bg-rose-900 p-3 font-bold text-white">הוספה</button><p id="form-error" role="alert" class="md:col-span-5 text-sm font-bold text-red-700"></p></form><section id="kpis" class="mt-5 grid grid-cols-3 gap-3"></section><div class="mt-5 flex justify-end"><select id="type-filter" class="rounded-lg border bg-white p-2"><option value="all">כל התנועות</option><option value="income">הכנסות</option><option value="expense">הוצאות</option></select></div><p id="empty-state" class="mt-8 text-center text-stone-500">הספר ריק. הוסיפו תנועה אמיתית ראשונה.</p><ul id="transaction-list" class="mt-4 space-y-2"></ul></main><script>
  const STORAGE_KEY = 'smart-ledger-v1';
  // Assemble: load/save, validation, add/delete, derived KPIs, filter, and JSON export.
</script></body></html>

Capstone: ship Smart Ledger

Assemble the product

निर्देश

आपका कोड

Live Preview