================================================================
LAB 2 — JavaScript & the DOM: Interactive Todo App
================================================================
Course:    Web Technologies
Topic:     Lecture 4 (JavaScript & the DOM)
Time:      2 hours lab + 2 hours self-study
Submit:    Public GitHub repo URL on Moodle

----------------------------------------------------------------
LEARNING GOALS
----------------------------------------------------------------
- Use modern JavaScript: const/let, arrow functions, template literals
- Select and modify DOM elements (querySelector, classList, textContent)
- Handle events (click, submit, keydown)
- Manage state in plain JS without a framework
- Persist data with localStorage

----------------------------------------------------------------
TASKS
----------------------------------------------------------------

TASK 1 — Project setup
  - Repo: todo-app, with index.html, styles.css, app.js
  - Use type="module" so you can use import/export

TASK 2 — UI structure (HTML/CSS)
  - <input> for new task + <button> "Add"
  - <ul> for the list of tasks; each <li> has:
      task text, "Done" toggle, "Delete" button
  - Footer showing remaining count + "Clear completed"

TASK 3 — JavaScript behaviour
  - On Add: create new <li>, append to list, clear input, focus input
  - On click of <li>: toggle .done class
  - On click of Delete: remove the <li>
  - Update remaining count whenever list changes
  - Use event delegation on <ul>, not per-item listeners

TASK 4 — Persistence
  - Save tasks to localStorage on every change
  - On page load, restore tasks from localStorage

TASK 5 — Polish
  - Empty state: show message "No tasks yet" when list is empty
  - Validation: don't add empty/whitespace-only tasks
  - Keyboard: pressing Enter in the input adds the task

----------------------------------------------------------------
DELIVERABLES
----------------------------------------------------------------
- GitHub repo with at least 6 meaningful commits
- Live on GitHub Pages
- Code organised into clear functions; no global mutable state

----------------------------------------------------------------
GRADING (10 marks)
----------------------------------------------------------------
Add/toggle/delete works ........... 3
Event delegation used correctly ... 1
localStorage persistence .......... 2
Empty state + validation .......... 2
Code quality (functions, naming) .. 2