Skip to content

feat: add inline task title editing with validation - #18

Draft
rtraidcleverit with Copilot wants to merge 2 commits into
mainfrom
copilot/add-edit-functionality-tasks
Draft

feat: add inline task title editing with validation#18
rtraidcleverit with Copilot wants to merge 2 commits into
mainfrom
copilot/add-edit-functionality-tasks

Conversation

Copilot AI commented Apr 8, 2026

Copy link
Copy Markdown

Summary

Implements inline editing of task titles as requested. A new edit button (✎) appears alongside each task. Clicking it replaces the title with a pre-filled text input. Changes can be saved by clicking the save button (💾) or pressing Enter, and cancelled by pressing Escape.

Changes

frontend/script.js

  • addTaskToDOM: adds a data-id attribute to <li> elements and an edit button (✎) per task.
  • editTask(id, btn): replaces the task title <span> with an inline <input> and switches the button to save mode (💾). Supports Enter/Escape keyboard shortcuts.
  • saveTask(id, btn): validates the new title (rejects empty/whitespace), calls PUT /api/tasks/:id with the updated title, and handles API errors by highlighting the input in red.

frontend/style.css

  • .edit-input: styles the inline edit input to match the existing theme (uses CSS custom properties).
  • .edit-input--error: red border highlight shown when validation fails or the API call errors.

Copilot AI and others added 2 commits April 8, 2026 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants