In this milestone we:

• Add a new JavaScript file and import it as a module: status.js it 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): deleteAllTodo.
• Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.

In this milestone we:

• Remove all hardcoded items from the tasks array.
• Create a new JavaScript file for the new functionality:'action.js'.
• 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.
• We set the property completed to "false" and the property index to the value of the "new array length".
• We reorder the number of the property index we delete an element.
• We save all the changes in local storage.

In this milestone we:

• Set up the project with webpack based on the boilerplate-webpack
• Create an index.js file and set an array of some simple to do tasks (array of objects).
• 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.
• Add style.css cloning the of the minimalist project of this video

Dear Dino, your project is great, I just have a few suggestions that you could consider:

index.js file:

• You could use two variables to add the "checked_list" class and the "checked" state in the conditional. For instance: if(todo.completed) { attClass = "todo_list checked__list"; status = "checked"; } else { attClass = "todo_list"; status = ""; } displayHTML(attClass, status); https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/index.js#L15-L36

• You could add a 'form' element to the HTML and that way you'd be avoiding the 'keyup' event and stay with the click event in the btnAdd element. https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/index.js#L101-L109

• To follow ESLint rules, you should move your function renderTodo() above the todoEdit function, because you use it before and declare it later down in the file. https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/index.js#L87-L93

Try to reuse your properties in your css file

https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/style.css#L43

Try to use semantical labels such as <article> instead of <div>

https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/index.html#L13

Try to reuse the following code in the if-else statement

https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/index.js#L17

todos.innerHTML += `<li id="${todo.index}" class="todo_list checked__list">
    <div>
       <input class="checkbox-input" type="checkbox" id="todo${todo.index}" name="todo${todo.index}" checked>
       <label for="todo${todo.index}">${todo.description}</label>
    </div>
    <button id="${todo.index}" class="btn btn-remove">
       <i class="fa-solid fa-trash"></i>
    </button>
   </li>`;
  }

Try to reuse the following code in deleTodo and deleteAllTodo functions.

https://github.com/dqarias/To-Do-list/blob/e0e871cc3a9c5a7be468bcf9dddb7aab78df64df/src/modules/action.js#L38

 todoDataRemoved.forEach((task, index) => {
    task.index = index + 1;
  });