Hello @clintonjosephs, You have made a great job till 💯 now however I would like to mention some points to change:

• the drag and drop works but we don't want to swap 2 tasks, we want to move only one task and so update the index of all tasks.

It will be nice to add a badge above the refresh icon, to delimit the number of items in the todo list. Also implement all changes in the todo-review repository on this repository

Below are the issues noticed based on HTML and CSS best practices

• Consider wrapping the ul in a section and replacing the div with a h1 tag in index, this will conform to the HTML semantics rules (Each html page should have atleast 1 h1 tag)

Below are the issues I noticed based on DRY, KISS, YAGNI rules

• It would have been nice HERE to pass the list items innerHTML here in a different function with a return statement.

Below are some issues I noticed with my code based on JavaScript based practices

• It would be nice to refactor loop in UpdateToDoItemIndex to use ForEach loop instead of the good old for loop
• Consider pushing all variable declarations within markListForChanges AND swapItems to the beginning of its block
• Based on JavaScript best practices, it would be nice to initialize this variable

Hello 😊 ,

I have been able to add new features on the to-do-list project based on the following requirements:

• Removed all hardcoded items from the tasks array. ✅
• Create a new JavaScript file (Methods.js) for the new functionality.✅
• Implemented a function for adding a new task (add a new element to the array).✅
• Implemented a function for deleting a task (remove an element from the array).✅
• Implement a function for editing task descriptions.✅
• New tasks has the property completed set to false and the property index set to the value of the new array length + 1✅
• Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.✅
• All changes to the To Do List saved in local storage.✅

Thank you for reviewing my code 😄

Hello 😊 ,

Today we were given a task to create the structure of the to-do-list app and achieve the following features:

• Set up a new project with webpack. ✅

• Create an index.html file and write HTML markup there. Create an empty To Do List placeholder. The index.html file must be set as a template using the HTML Webpack Plugin.✅

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

• 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. The list should apear in order of the index values for each task.✅

• Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. ✅

I had some extra time, so I went ahead to create the add function to the list and rearranged the project structure to suit the entire CRUD functionality.

Thank you for reviewing my project 😄

Hello 😄 , We have succeeded in completing the following tasks in continuation of the to-do list app unit testing.

• We Created .test.js file(s) (DragDrop, Editing, Clear, UpdateStatus)
• Added a function for editing the task description.
• Added a function for updating an item's 'completed' status.
• Implemented the "Clear all completed" function test
• Used the mock storage object.
• Add test for item repositing on drag/drop
• Mocked the HTML elements to test DOM manipulation functions.
• Grouped tests using the description() method.

Thank you for your time.

Testing To Do list

Hello 😄 , we were able to achieve testing on our TodoList App.

See below a list of things that we did ✅

• Created a test file
• Added test to Add Task and Remove Task
• Added test to check items in the list
• Added test to mock local storage
• Added test to check list directly from DOM
• Added jest mock, jest-localstorage-mock, babel lints

Hello 😄 ,

I succeeded in making changes to the To-do-list app, the user is now able to reorder the list by dragging each item and moving it into the desired position.

• Added a class that contains methods related to drag / drop and sorting functionality.
• Add event listeners to list items (dragstart, dragover, drop).
• Update items object's values for index key upon user actions.

Hello 😄 ,

I was able to work on the to-do list's interactive features to achieve the following:

• Create new module containing methods related to the status updates (completed: true / false) ✅
• Updated items object's value for completed key upon user actions.✅
• Implement a function for the "Clear all completed" button (using filter() method).✅
• Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.✅

Thank you for reviewing my project! 💯