Project: Interactive Topic Tracker

This project combines DOM manipulation, events, arrays, objects, and local storage. Build a simple topic tracker that lets a learner add topics, mark them complete, and remove them.

HTML starting point#

<form id="topic-form">
  <label for="topic-input">New topic</label>
  <input id="topic-input" name="topic" required maxlength="80">
  <button type="submit">Add topic</button>
</form>
<ul id="topic-list"></ul>
<p id="status" role="status" aria-live="polite"></p>

Suggested data model#

Each topic can be an object such as { id, title, completed }. Give each item a stable ID rather than using its current array index, because removing an item changes array positions.

Implementation steps#

1. Select the form, input, list, and status elements; verify they exist before using them.
2. Store topics in an array and render the list by creating DOM nodes with createElement and textContent.
3. Handle form submission, prevent default navigation, trim the title, and reject an empty value.
4. Add complete and delete buttons. Use event delegation on the list and identify the target topic by its data ID.
5. Save the array with JSON.stringify and restore it with JSON.parse, handling malformed stored data safely.
6. Provide an empty state and clear feedback when a topic is added or deleted.

Quality requirements#

Use real buttons, labels, keyboard-operable controls, and accessible status text. Never render the topic title using untrusted innerHTML. Test the empty list, duplicate titles, long input, reload, and malformed storage scenarios.

Extension#

Add filtering for All, Active, and Completed topics. Keep the filtering state distinct from the source array so a filter does not accidentally delete hidden topics.