• 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.

• 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.

To Do List

• Set up a new project with webpack that is based on the webpack exercise you have already completed.
• Create an index.html file and write your 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.
  • Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.

Hi we have some suggestions to imporve the code:

• line 81 commented code.
• Please mention you are using webpack in the ReadMe file.
• Please provid us with demo link to the project and screenshots to see the project.

• According to my work It's not DRY in the CSS file line numbers 89 and 90 can be placed in one line.
• margin-left and margin-right on lines 112 and 113 can be put in one line in the CSS file.
• border-left and right on lines 87 and 88 can also be in one line in CSS.
• there is unnecessary code that is repeated and not wanted like in the file of CSS line 58.
• line 40 in the CSS file isn't needed.

Hi Thomas,

You have done great work so far, but there are some issues:

• Please remove the node_modules folder, as it consumes a large amount of space and data and is not required
• I suggest you create a gitignore file and add the list of files and folders, which are not reqd to push, in it.