Lab 7 · JavaScript DOM Lab: Interactive To-Do List

🎯 Objective

Move from console JavaScript to a real interactive UI where every action updates the page through the DOM.

🧩 Skills You Will Practice

• DOM selection and creation
• Event listeners
• Arrays as state
• Rendering UI from data

🧰 What You Need

• VS Code
• Browser with DevTools (F12)
• Files: index.html, style.css, app.js
• The JavaScript Basics lesson for reference

📋 Step-by-Step Tasks

1. Build the HTML shell: an input, an Add button, an empty ul for tasks, and a counter line showing tasks remaining. Link style.css and app.js (script at the end of body).
2. In app.js keep one array tasks as the single source of truth. Each task is an object with text and done properties. Write a render() function that rebuilds the list from the array.
3. On Add click: read and trim the input, ignore empty values, push a new task object, clear the input, call render(). Never build the UI by editing the list in two places.
4. In render(), create each li with createElement: a checkbox or toggle button, the task text, and a Delete button. Use textContent for user text — never innerHTML with user input.
5. Wire toggle to flip done and re-render with a completed style (line-through, reduced opacity). Wire Delete to remove that index from the array and re-render.
6. Update the counter inside render() by counting tasks where done is false, so the counter can never disagree with the list.
7. Test edge cases: empty input, very long text, the same text twice, completing then deleting. Open DevTools Console and fix every error until a full test run is error-free.

✅ Expected Result / Deliverable

A working to-do app (3 files) where add / complete / delete / counter all run through one render() from one array — with a clean, error-free console.

⚠️ Common Mistakes

• Updating the DOM in multiple places instead of one render()
• Using innerHTML with user input (breaks layout and is unsafe)
• Forgetting to prevent empty tasks