From 2565263037edc6619380011c1064a61f3b9f438d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 May 2026 20:40:14 +0000
Subject: [PATCH] Add dynamic task name filtering in UI

---
 frontend/index.html |  6 ++++++
 frontend/script.js  | 18 +++++++++++++++---
 frontend/style.css  | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 915426f..d2ced7f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -12,6 +12,12 @@
     <h1>Task List</h1>
     <button id="themeToggle" class="theme-toggle" title="Switch between light and dark mode">🌙</button>
   </div>
+  <input
+    type="text"
+    id="taskFilter"
+    placeholder="Search tasks by name"
+    aria-label="Filter tasks by name"
+  />
   <form id="taskForm">
     <input type="text" id="taskInput" placeholder="New task" required />
     <button type="submit" title="Click to add a new task to the list">Add Task</button>
diff --git a/frontend/script.js b/frontend/script.js
index a519ccf..f88ca03 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -2,7 +2,9 @@ const API_URL = 'http://localhost:3000/api/tasks';
 const taskList = document.getElementById('taskList');
 const taskForm = document.getElementById('taskForm');
 const taskInput = document.getElementById('taskInput');
+const taskFilter = document.getElementById('taskFilter');
 const themeToggle = document.getElementById('themeToggle');
+let currentTasks = [];
 
 // Theme functionality
 function initTheme() {
@@ -29,9 +31,16 @@ initTheme();
 
 async function fetchTasks() {
   const res = await fetch(API_URL);
-  const tasks = await res.json();
+  currentTasks = await res.json();
+  renderTasks();
+}
+
+function renderTasks() {
+  const filterValue = taskFilter.value.trim().toLowerCase();
   taskList.innerHTML = '';
-  tasks.forEach(addTaskToDOM);
+  currentTasks
+    .filter(task => task.title.toLowerCase().includes(filterValue))
+    .forEach(addTaskToDOM);
 }
 
 function addTaskToDOM(task) {
@@ -55,10 +64,13 @@ taskForm.addEventListener('submit', async e => {
     body: JSON.stringify({ title })
   });
   const task = await res.json();
-  addTaskToDOM(task);
+  currentTasks.push(task);
+  renderTasks();
   taskInput.value = '';
 });
 
+taskFilter.addEventListener('input', renderTasks);
+
 async function toggleComplete(id, completed) {
   await fetch(`${API_URL}/${id}`, {
     method: 'PUT',
diff --git a/frontend/style.css b/frontend/style.css
index d351594..8535e47 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -103,6 +103,23 @@ form {
 #taskInput:focus {
   box-shadow: 0 2px 8px var(--input-focus-shadow);
 }
+#taskFilter {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 1em;
+  padding: 0.75em 1em;
+  border: none;
+  border-radius: 4px;
+  background: var(--input-bg);
+  color: var(--text-color);
+  box-shadow: 0 1px 2px var(--input-shadow);
+  font-size: 1em;
+  outline: none;
+  transition: box-shadow 0.2s;
+}
+#taskFilter:focus {
+  box-shadow: 0 2px 8px var(--input-focus-shadow);
+}
 button[type="submit"] {
   background: var(--primary-color);
   color: #fff;