Add dynamic task-name filter to Todo list UI

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>

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',

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;