[Copilot]

This change adds in-list task search so users can quickly find tasks by title. The task list now updates live as the user types in a search field above the list.

• UI: search input above task list

  • Added #taskSearch input in frontend/index.html directly above #taskList.
  • Included accessible labeling via aria-label.

• Rendering model: centralized filtered render

  • Introduced allTasks in frontend/script.js as the source of truth for fetched/created tasks.
  • Added renderTasks() to:
    • read current search text,
    • filter tasks by task.title,
    • render only matching tasks.
  • Wired taskSearch with an input listener for real-time filtering.

• Data flow updates

  • fetchTasks() now stores API results in allTasks and calls renderTasks().
  • On task creation, new task is appended to allTasks and re-rendered through the same filter path.

• Styling

  • Added #taskSearch styles in frontend/style.css consistent with existing input/theme tokens.

function renderTasks() {
  const filterText = taskSearch.value.trim().toLowerCase();
  taskList.innerHTML = '';
  allTasks
    .filter(task => task.title.toLowerCase().includes(filterText))
    .forEach(addTaskToDOM);
}

taskSearch.addEventListener('input', renderTasks);

[Copilot]

Pull request overview

Adds a real-time “search by title” capability to the frontend task list UI, centralizing task rendering around a filtered view so the list updates live as users type.

Changes:

• Added a search input (#taskSearch) above the task list in the UI.
• Introduced allTasks as the in-memory source of truth and a centralized renderTasks() function to filter + render tasks.
• Styled the search input to match existing theme/input styling.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
frontend/index.html	Adds the search input element above the task list for in-list filtering.
frontend/script.js	Centralizes rendering via renderTasks() and filters tasks by title on input events.
frontend/style.css	Adds styling for #taskSearch consistent with existing theme variables and inputs.