Filtering and live reports

中级~35 分钟0/4 步骤

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.

操作说明

Create getVisibleTransactions using filter and selectedCategory.

提示： 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.

你的代码

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>

Filtering and live reports

Derive a report from the ledger

操作说明

你的代码

实时预览