Update the To-Do-List to add the following functionalities using JavaScript: - Add tasks to the list - Remove tasks from the list - Edit tasks in the list - Save the list and changes in local storage.

Good job so far.

• No linter errors.
• Adding and removing functionality is working fine.
• Best practice for HTML/CSS and JavaScript.

However, there is one issue:

• When you click on the clear all completed task button the index is not updating as it should be.

Suggested Solution:

• Kindly update the index when clicking the "Clear all completed tasks" button.

JavaScript Best Practices No general JavaScript issues detected.

DRY, KISS and YAGNI rules The line to save items in local storage is repeated several times, which contradicts the DRY rule.

• localStorage.setItem('todotasks', JSON.stringify(MyToDo.tasks));

In the display function below, the index parameter is not being used, which contradicts the TAGNI rule.

             displayToDoList = () => {
              const listContainer = document.querySelector('.listContainer');
              listContainer.innerHTML = '';
              JSON.parse(localStorage.getItem('todotasks')).forEach((task, index) => {
                createTodoListComponents(task);
              });
            };

In the following code, the event is defined as a parameter but is never called in the function.

                ellipsis.addEventListener('click', (e) => {
                  const siblingDeleteBtn = document.getElementsByClassName(
                    `deleteButton ${todoListComponent.index}`,
                  )[0];

HTML and CSS best practice

• No issues found in the HTML file.
• No issues found in the CSS file.