Testing To Do list: part 2

in this milestone we have done

• Create a test cases for
  • a function for editing the task description.
  • a function for updating an item's 'completed' status.
  • the "Clear all completed" function.
• Use the mock storage object you have created in Part 1 of this project to mock the localStorage updates.
• Mock the HTML elements to test DOM manipulation functions.
• Make sure you group your tests using the describe() method.

Testing To Do list: part 1

In this milestone we have done

• Use jest framework for testing.
• Create a test file ([..].test.js) for a file containing the add item and delete item functions that you want to test.
• Take a look at each of these functions. Are they pure functions? If the answer is "yes" then writing tests for them should be straightforward. Some of those functions however will update localStorage and manipulate the DOM.
• Mock HTML to test if add/delete functions add or remove exactly one element to/from the list in the DOM.
• Make sure you group your tests using the describe() method.

Good Job !!!

Your project is great. ✔️ Good UI ✔️ Responsive ✔️ Clean / Organized code

However , you might need to work on the issue(s) below:

• The index for your task should follow the project requirement - 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).

Project 3: Interactive list.

In this milestone, we have done

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

Project 2: Add and remove items.

In this milestone, we have done

• 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.
• Deleting a task should update all remaining items' indexes,
• Implement a function for a checkbox to complete tasks.
• All changes to the To Do List should be saved in local storage.

Project 1: List structure.

In this milestone, we have done

• 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.
• Write a function to iterate over the tasks array and populate an HTML list item element for each task.
• Create a style.css and set rules for the To-Do List. CSS must be loaded by Webpack Style/CSS Loader.

Acknowledgment

I appreciate the way I have done my code. because it looks like it fulfills all of HTML & CSS best practices, however, I have to revise some of the best practices.

Improvement

• I have to improve blank lines and indentation.

Acknowledgment

I appreciate the way I have done my code. because it looks like clean and it fulfills DRY, KISS, and YAGNI, however, I have to revise some of the principles.

Improvement

• I have to improve KISS: (Keep It Simple, Stupid) to make it simple, the small better than this one.
• I have to improve also YAGNI: (You Aren't Gonna Need It) and remove anything which is not usable.

Acknowledgment

I appreciate the way I have done my code. because it looks like clean and it fulfills most of the javascript best practices, however, I have to revise some of the best practices.

Improvemnet

• I have to improve naming variables and use object destructuring to get the values from an object.