Feature integration : want to add task remaining and task completed feature in task -input

[RIYAKUMARI001]

I want to contribute to this task by enhancing the user experience and making it more interactive and functional. My plan includes dynamically calculating and displaying a task summary at the top and bottom of the task list to give users a clear overview of their progress, such as '5 tasks remaining, 3 completed.' I'll implement this using JavaScript, where I will write a function to count the total tasks and completed tasks in real time. I'll also use event listeners to make the task list interactive, allowing users to toggle tasks as completed or incomplete, and ensuring the summary updates instantly. Additionally, I'll add optional CSS styling and subtle color changes for better clarity. so, please assign this issue to me.

[RIYAKUMARI001]

HTML Code - add two divs for tasks and another one for notes so that checkboxes do not conflict.

JS CODE - I remove the innerHTML part because When we are adding a new task to the task list, the checkbox element () overwrites using the innerHTML assignment. This causes the checkbox to disappear since innerHTML replaces all the previous child elements of the parent.
so, instead of this I create and append the elements manually to avoid overwriting.


CSS- I define separate CSS for textarea and task-input-container

added - CSS for checkbox change the color to green and add CSS for completion if the task is completed then add text decoration, and also add responsiveness for task input.

Remove delete button- I remove another button because it affects other buttons, rather than that I explicitly add padding to delete and edit buttons.

ADD design for the summary -task completed and remaining.

Sample Video -

video1328593708.mp4

@rahat2134 please review, and assign this issue.

[Rahat-CP]

From now try to do all this in a single thread. Means in a single message try to add all the details.

[Rahat-CP]

Assigning you the issue.