Homework

Homework — your table

Homework — your collection table.

  1. Build the table. Create js/views/collection.js with renderCollection (from getFilteredFavorites + pagination). Add getFilteredFavorites, setSort, setPage to state.js. Subscribe (if you haven't) — the table re-renders itself.
  2. Sort. Click columns; the same column flips the direction. The arrow (/) shows the current order.
  3. Paginate. With more than pageSize entries, page buttons appear; they change the slice.
  4. Reproduce the sort trap. Temporarily change [...rows].sort(...) to rows.sort(...) (directly on state.favorites). Sort, reload — the collection stays reordered (the stored order is corrupted). Restore [...rows].
  5. Search + page. The collection search should reset to page 1 (so you don't get stuck on an empty page).

Required tests:

  • Sort test: clicking a column sorts; re-clicking flips it.
  • Mutation test: with [...rows], the original order survives a reload.

To submit: screenshots: (1) the sorted table with the arrow, (2) pagination, (3) proof that state.favorites is unchanged after sorting (DevTools).

Next. The table works. In lesson 11 — forms and validation: reusable rules, real settings (that persist and change the app), and the subtle validation progression (submit → blur → keystroke), plus a real CSS trap with input[type].