feat: add inline task title editing with validation

frontend/script.js

@@ -36,16 +36,67 @@ async function fetchTasks() {
 
 function addTaskToDOM(task) {
   const li = document.createElement('li');
+  li.setAttribute('data-id', task.id);
   li.innerHTML = `
     <span class="${task.completed ? 'completed' : ''}">${task.title}</span>
     <div>
+      <button onclick="editTask('${task.id}', this)" title="Edit task title">✎</button>
       <button onclick="toggleComplete('${task.id}', ${!task.completed})">✓</button>
       <button onclick="deleteTask('${task.id}')">✕</button>
     </div>
   `;
   taskList.appendChild(li);
 }
 
+function editTask(id, btn) {
+  const li = document.querySelector(`li[data-id="${id}"]`);
+  const span = li.querySelector('span');
+  const currentTitle = span.textContent;
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.value = currentTitle;
+  input.className = 'edit-input';
+
+  span.replaceWith(input);
+  input.focus();
+  input.select();
+
+  btn.textContent = '💾';
+  btn.setAttribute('onclick', `saveTask('${id}', this)`);
+
+  input.addEventListener('keydown', e => {
+    if (e.key === 'Enter') saveTask(id, btn);
+    if (e.key === 'Escape') fetchTasks();
+  });
+}
+
+async function saveTask(id, btn) {
+  const li = document.querySelector(`li[data-id="${id}"]`);
+  const input = li.querySelector('input.edit-input');
+  const newTitle = input.value.trim();
+
+  if (!newTitle) {
+    input.classList.add('edit-input--error');
+    input.focus();
+    return;
+  }
+
+  try {
+    const res = await fetch(`${API_URL}/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title: newTitle })
+    });
+    if (!res.ok) throw new Error('Failed to update task');
+    fetchTasks();
+  } catch (err) {
+    input.classList.add('edit-input--error');
+    input.title = 'Could not save changes. Please try again.';
+    input.focus();
+  }
+}
+
 taskForm.addEventListener('submit', async e => {
   e.preventDefault();
   const title = taskInput.value;

frontend/style.css

@@ -173,6 +173,24 @@ li button:hover {
 li button:active {
   background: var(--button-active-bg);
 }
+.edit-input {
+  flex: 1;
+  padding: 0.3em 0.6em;
+  border: 2px solid var(--primary-color);
+  border-radius: 4px;
+  background: var(--input-bg);
+  color: var(--text-color);
+  font-size: 1.05em;
+  outline: none;
+  transition: box-shadow 0.2s, border-color 0.2s;
+  box-shadow: 0 2px 8px var(--input-focus-shadow);
+}
+
+.edit-input--error {
+  border-color: #e53935;
+  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.2);
+}
+
 @media (max-width: 600px) {
   body {
     max-width: 100vw;