[Feat]: Dim Words When a Task is Marked as Done

[Jk-karunadu]

Feature: Dim Words When a Task is Marked as Done

Feature Summary

Implement a visual cue that dims the text of tasks marked as done (completed) in the to-do list. This enhancement aims to improve user experience by providing clear visual feedback on task completion.

User Story

As a user, I want to easily differentiate between completed and incomplete tasks in my to-do list. By dimming the text of completed tasks, I can quickly identify which tasks are done and focus on the ones that still need attention.

Acceptance Criteria

1. When a task is marked as completed:

   • The text of the task should visually dim (e.g., change color or reduce opacity).
   • The change should be smooth and easily noticeable.

2. When a task is marked as incomplete:

   • The text should return to its original brightness.

3. The dimming effect should be consistent across all tasks in the list, regardless of the order or other attributes.

Implementation Suggestions

• Use CSS styles to change the color or opacity of the text for completed tasks.
• Update the ItemDisplay component to apply the dimming effect based on the completed state of each task.

Impact

This feature will enhance the visual clarity of the to-do list, allowing users to better manage their tasks by clearly distinguishing between what has been completed and what still requires attention.