פרויקט גמר: משיקים את Smart Ledger

מתקדמים~50 דק׳0/5 שלבים

מרכיבים את המוצר

פרויקט הגמר מתחיל ריק — אין ספר תנועות מזויף. המשתמש מוסיף תנועות משלו. האפליקציה מאמתת ומנרמלת קלט, שומרת כסף באגורות, מתמידה מקומית, מפיקה מדדים, מסננת, מוחקת ומייצאת גיבוי JSON.

הייצוא הוא תוצר אמיתי והאחסון הוא אחסון דפדפן אמיתי. המגבלה מכוונת: פרויקט הלמידה לא מתחבר לבנק ולא מבקש פרטי גישה בנקאיים.

הוראות

ממשו loadTransactions ו־saveTransactions עם localStorage ו־JSON.

רמז: בשגיאת parse שחזרו []; בכל שינוי שמרו את transactions.

אמתו ונרמלו קלט בתוך createTransaction.

הציגו מדדים ושורות מסוננות מתוך מערך transactions.

ממשו הוספה ומחיקה ושמרו אחרי כל שינוי.

ייצאו גיבוי JSON אמיתי באמצעות Blob ו־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>

פרויקט גמר: משיקים את Smart Ledger

מרכיבים את המוצר

הוראות

הקוד שלכם

תצוגה חיה