Here I add:

• methods (checked & clean) to ArrayOfTodos.js file
• functionality to display.js file

Requirements

• I Add a JavaScript file and import it as a module.
  • It contains methods related to the status updates (checkbox: true/false).
• I add the event listener to the checkbox.
• I Update items object's value for completed key upon user actions.
• I Implement a function for the "Clear all completed" button using the filter() method.
• I Store the updated array of items in local storage.

Here I add:

• modules folder
• display.js file
• notDuplicate.js file
• ArrayOfTodos.js file

Requirements

• I Remove all hardcoded items from the tasks array.
• I Create a new JavaScript file for the new functionality.
• I Implement a function for adding a new task (add a new element to the array).
• I Implement a function for deleting a task (remove an element from the array).
• I Implement a function for editing task descriptions.
• By default new tasks have the property checkbox set to false and the property index set to the value of the new array length
• Deleting a task updates all remaining items' indexes, they represent the current list order and are unique.
• All changes to the To-Do List are saved in local storage.

Here I add:

• All Webpack setup
• index.html in the src folder
• style.css in the src folder
• index.js in the src folder

Requirements

• I Set up a new project with webpack that is based on the webpack exercise that I have already completed.
• I Create an index.html file and wrote my HTML markup there. I Create an empty To-Do List placeholder. The index.html file is set as a template using the HTML Webpack Plugin.
• I Create an index.js file and set an array of some simple to-do tasks (array of objects). Each task object contains three keys:
  • description [string].
  • check [bool].
  • index: [number].
• I Wrote a function to iterate over the tasks array and populate an HTML list item element for each task.
• On page load, I render the dynamically created list of tasks in the dedicated placeholder. The list is appearing in order of the index values for each task.
• I Create a style.css and set rules for the To-Do List. CSS is loaded by Webpack Style/CSS Loader. My list is a clone of the part of the minimalist project captured in the video shown in the lesson.
• All my source files (index.html, index.js, and style.css) are be located in the /src directory and your distribution files are generated by webpack and served by the webpack dev server from the /dist folder.

Good points 👏

• Good HTML semantics.
• CSS code looks clean.
• JS is organized 🤓
• Sections were clearly defined 💪

To take note 📝

• In the header section, it's better if you use a form element because it will help you to interact easily on the form submission.

https://github.com/Juanse7793/To-do-list/blob/5418d576d5a884d37430c35ec63e779ba5b6a391/src/modules/ArrayOfTodos.js#L43-L44

Here I can use "for each" instead of the old "for" loop

https://github.com/Juanse7793/To-do-list/blob/5418d576d5a884d37430c35ec63e779ba5b6a391/src/modules/ArrayOfTodos.js#L25-L26

Also here

https://github.com/Juanse7793/To-do-list/blob/5418d576d5a884d37430c35ec63e779ba5b6a391/src/modules/display.js#L60

Id of the element in Spanish