Filtering and live reports

Intermediate~35 min0/4 steps

Derive a report from the ledger

A report should be derived from source data every time—not maintained as a second, conflicting copy. The selected category determines a filtered view; reduce produces the KPIs; sort makes the audit table predictable.

The practice dataset is visibly labeled. Replace it with your own entries after the exercise.

Instructions

Create getVisibleTransactions using filter and selectedCategory.

Hint: Keep every item when selectedCategory is all.

Sort visible rows by date without changing the source array.

Create calculateReport(items) with reduce.

Listen for filter changes and render the report again.

Your Code

html

9 lines

<!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>

Filtering and live reports

Derive a report from the ledger

Instructions

Your Code

Live Preview