• Add a new JavaScript file and import it as a module: (it will 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 (use 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. -By default new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal to 5). -Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should set to 1).. -All changes to the To Do List should be saved in local storage.

• Setting up a new project with webpack

• Create an index.html file and write HTML markup here. Create an empty To Do List placeholder (

  or

  element). The index.html file must be set as a template using the HTML Webpack Plugin.

  • Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys:

  • description [string].

  • completed [bool].

  • index: [number].

  -Write a function to iterate over the tasks array and populate an HTML list item element for each task. -On page load render the dynamically created list of tasks in the dedicated placeholder. The list should appear in order of the index values for each task.

  

  -All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.

Hello @kiboma2021 ✋

You are doing a great coding

To highlight🎯

• ✅ Good readme
• ✅ An excellent solution to the problem
• ✅ Nice style

Suggestions ✍️

From the code below, you add an event listener to all the elements anytime you create a new task. But I suggest you target every element and add an event listener to it.

https://github.com/kiboma2021/Kibs-To-Do-List/blob/9bbe9c6e720ed02e7248ae0e6ef63a10a6e002b4/src/index.js#L30-L38

Kindly change the name of the variables to be more descriptive

https://github.com/kiboma2021/Kibs-To-Do-List/blob/9bbe9c6e720ed02e7248ae0e6ef63a10a6e002b4/src/index.js#L18

https://github.com/kiboma2021/Kibs-To-Do-List/blob/9bbe9c6e720ed02e7248ae0e6ef63a10a6e002b4/src/index.js#L10

Hello there 👋

Suggestions ♻️

• Add a proper and persona style to the aspect of the To-do list

Highlights 💯

✔️ Great functionality working

Keep up doing excellent work! 👍

I have followed JavaScript best practices DRY, KISS,YAGNI all seems to have been followed

HTML & CSS best practices

• Please remove blank lines in index.html file without a reason
• Create a class for multiple elements in CSS e.g background color is used more than 2 times