סינון ודוחות חיים

בינוני~35 דק׳0/4 שלבים

מפיקים דוח מספר התנועות

דוח צריך להיגזר ממידע המקור בכל פעם, ולא להישמר כעותק נוסף שעלול לסתור אותו. הקטגוריה שנבחרה קובעת את התצוגה המסוננת; reduce מפיק מדדים; sort מסדר את טבלת הביקורת.

מערך התרגול מסומן בבירור. החליפו אותו בתנועות שלכם אחרי התרגיל.

הוראות

צרו getVisibleTransactions בעזרת filter ו־selectedCategory.

רמז: כאשר selectedCategory הוא all, השאירו כל תנועה.

מיינו את השורות לפי תאריך בלי לשנות את מערך המקור.

צרו calculateReport(items) בעזרת reduce.

האזינו לשינוי במסנן והציגו את הדוח מחדש.

הקוד שלכם

html

9 שורות

<!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 · מודול 7</title><script src="https://cdn.tailwindcss.com"></script></head><body class="min-h-screen bg-stone-100 p-6"><main class="mx-auto max-w-4xl"><p class="text-xs font-bold text-rose-800">נתוני תרגול בלבד</p><div class="mt-2 flex items-center justify-between"><h1 class="text-3xl font-black">דוח תזרים</h1><select id="category-filter" class="rounded-lg border p-2"><option value="all">כל הקטגוריות</option><option value="sales">מכירות</option><option value="office">משרד</option></select></div><div id="kpis" class="mt-6 grid grid-cols-3 gap-3"></div><ul id="report-rows" class="mt-5 space-y-2"></ul></main><script>
  const DEMO_TRANSACTIONS = [
    { id: 1, date: '2026-08-01', description: 'מכירת תרגול', category: 'sales', type: 'income', amountAgorot: 240000 },
    { id: 2, date: '2026-08-02', description: 'ציוד תרגול', category: 'office', type: 'expense', amountAgorot: 45000 }
  ];
  let selectedCategory = 'all';
  // Build getVisibleTransactions(), calculateReport(), and renderReport().
</script></body></html>

סינון ודוחות חיים

מפיקים דוח מספר התנועות

הוראות

הקוד שלכם

תצוגה חיה