Code is DRY, no reusing code multiple times but invoking functions as needed. Code is KISS, no over engineered code, keeping it as simple as possible Code follows YAGNI, all unused functions, code lines and classes were removed if they were not being used once. HTML is semantic and follows best practices. CSS is done by using SCSS ES Modules used properly.

Requirements

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

Take into account

• All requirements fulfilled

Requirements

• [x] Remove all hardcoded items from the tasks array.
• [x] Create a new JavaScript file for the new functionality.
• [x] Implement a function for adding a new task (add a new element to the array).
• [x] Implement a function for deleting a task (remove an element from the array).
• [x] Implement a function for editing task descriptions.
• [x] 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).
• [x] 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)..
• [x] All changes to the To Do List should be saved in local storage.

Take into account

• All requirements completed

#Project requirements

• [x] Set up a new project with webpack that is based on the webpack exercise you have already completed.
• [x] Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (<div> or <ul> element).
• [x] - The index.html file must be set as a template using the HTML Webpack Plugin.
• [x] 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].
• [x] Write a function to iterate over the tasks array and populate an HTML list item element for each task.
• [x] 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.
• [x] 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.
• [x] 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.

ALL REQUIREMENTS FULFILLED

Additions not required

• [x] Added cursor: pointer property to buttons and checkboxes for better UX.
• [x] Added font awesome icons to make it look closer to wireframe

Hey You did a great job. very beatifull

For your issue with the check list, You can just add The class .done by default. https://github.com/Zeraltz/todo-list/blob/c284c47a587385acfdcca10f0b7b7443a634382b/src/modules/newTask.js#L37