Testing Edit / Update status / and Clear all completed functionalities

In this milestone created multiple tests for:

• the function for editing the task description.

• the function for updating an item's 'completed' status.

• the "Clear all completed" function.

• the function for inserting items in the dom

• used describe() to group tests.

• Checking if the input is valid - no empty string or whitespaces should be added as tasks for improving the UX
• You can split long running functions into multiple small helper functions

• Add a new JavaScript file "taskUpdater.js" and import it as a module, this file contain methods related to the status updates (completed: true / false).
• Add event listener to the checkbox (change).
• Update items object's value for completed key upon user actions.
• Implement a function for the "Clear all completed" button (using filter() method).
• Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.

• Remove all hardcoded items from the tasks array.
• Create a new JavaScript file for the new functionality.
• Implement a function for adding a new task (add a new element to the array).
• Implement a function for deleting a task (remove an element from the array).
• Implement a function for editing task descriptions.
• Update all remaining items' indexes when deleting a task, so that they represent the current list order and are unique.
• Save all changes of the To Do List in local storage.

• Use Webpack to set up the project.
• Use ES6 modules to implement the functions required for the project.
• Create a function to iterate over the tasks array and populate an HTML list item element for each task.
• Render the dynamically created list of tasks in the dedicated placeholder on page load.
• Reorder the list based on the index values for each task.

Hello Ammar. I stumbled on your profile while going through discourse conversations on how to deploy projects built with webpack.

While using your app, I noticed that when users submit an empty entry it still goes into the task list and I think it would be best to prevent this, what do you think?

sc attached:

Another thing I noticed is that, when some items have been marked as complete and a user adds a new item to the list, the completed items are restored back to the default state.

1. In taskDrag.js:

draggables.forEach((draggable) => {
    draggable.addEventListener('dragstart', () => {
      draggable.classList.add('dragging');
    });

    draggable.addEventListener('dragend', () => {
      draggable.classList.remove('dragging');
    });
});
draggables.forEach((draggable) => {
    draggable.removeEventListener('dragstart', () => {
      draggable.classList.add('dragging');
    });

    draggable.removeEventListener('dragend', () => {
      draggable.classList.remove('dragging');
    });
});

It's better to keep the code DRY by using a function for draggable.classList.add('dragging'); and draggable.classList.remove('dragging'); since they got repeated twice.