// lab_06 — advanced DOM & fetch API

Advanced DOM & Fetch API

Five exercises covering dynamic DOM creation, keyboard events, event delegation, JSON manipulation, and fetching data with the Fetch API.

TASK_01
Card Builder
Dynamically create, number and delete cards using DOM methods. Includes validation, toast feedback, and Clear All.
createElement appendChild insertAdjacentElement card.remove() padStart
↗ TASK_02
Keyboard Events
Track every keystroke in real time — key name, key code, modifier keys, char/word count, and a live event log with timestamps.
keydown event event.key event.code event.shiftKey toLocaleTimeString
↗ TASK_03
Event Delegation — Todo List
One click listener on the parent handles all list item toggles and deletes. Includes filters, stats counter, and clear done.
event delegation closest('li') classList.toggle data-action filter()
↗ TASK_04
JSON Practice
Stringify and parse a users array, render as a table, add/delete users, live search, and toggle dark/light theme with cookie persistence.
JSON.stringify JSON.parse document.cookie CSS Variables event delegation
↗ TASK_05
Fetch API — Users
Load users from users.json using async/await Fetch API. Renders user cards with avatar, role, status badge, and supports live search and filtering.
fetch() async / await try / catch res.ok res.json()
↗