Hi Francis,

Wonderful job implementing the CRUD functions and the draggable function as well. I think improvements can be made by putting the code below in a function and calling that function in each of the CRUD functions you created. Doing this will ensure your code is DRY.

Wonderful work done, keep at it, and in no time, you will be a genius. 💪

https://github.com/Gambit142/To-Do-List-Project/blob/212fdf9574ccd56c5f0ecd36bcda0e15ec8a3231/src/functionality.js#L71-L72

I created a website that dynamically displays tasksto be done in a day using Webpackand ES 2015. In this branch, I did the following to meet all project requirements:

• Configure linters to ensure that there are no errors
• Document the project in a professional manner
• Use of correct Github flow

In this branch, I added some functionality to the project for great User Experience (UX). The functionalities added were:

• [ ] Ability to add new tasks after input in the form field
• [ ] Clicking the ellipsis button for a dropdown menu to be displayed
• [ ] Clicking the edit link in the dropdown to edit each input value/tasks
• [ ] Clicking the delete link in the dropdown to delete each input value/tasks
• [ ] Adding an event listener to the clear all button to clear all completed tasks
• [ ] Resetting the task div to be empty after clicking the reload button

I created a website that dynamically displays tasks to be done in a day using Webpackand ES 2015. In this branch, I did the following to meet all project requirements:

• Configure linters to ensure that there are no errors
• Documentation of work in a professional manner
• Use of correct Github flow

All specific project requirements enlisted below were implemented in this branch:

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

I created a website that dynamically displays tasks to be done in a day using Webpack and ES 2015 The following were done to meet the project requirements:

• Configure linters to ensure that there are no errors
• Documentation of work in a professional manner
• Use of correct Github flow

All specific project requirements enlisted below were implemented in this branch:

• Setting up of project with Webpack
• Using an index.html template file through HTML Webpack Plugin
• Create an index.js file and set an array of objects that contains the following keys:
  • description [string].
  • completed [bool].
  • index: [number].
• Use a function to iterate through the array and render the dynamically created list of tasks in the placeholder created in the index.html file
• The list of tasks should appear in order using the index value
• Create a style.css file that must be loaded using Webpack Style/CSS Loader
• All your source files (index.html, index.js and style.css) must be located in_/src_directory and your distribution files will be generated by Webpack and served by webpack dev server from /dist folder.

This branch uses the jest framework for testing the CRUD functions used to make the todo-list app run successfully.

I created two mock files called localstorage.js to imitate the functions of the browser's localStorage and crud.js to mock the CRUD functions.

I created a __tests__ folder and put a crud.test.js file in it. The test file checks if the following operations are performed successfully:

• Mock HTML to test if add/delete functions add or remove exactly one
• element to/from the list in the DOM.
• create a function for editing the task description.
• create a function for updating an item's 'completed' status.
• create the "Clear all completed" function.

The tests for all the operations mentioned above were grouped in a description() method.

Magnificent job Francis, everything is effective and functional as expected. A suggestion regarding the UI, it would be nice if the drop down list would actually expand horizontally inside the corresponding div.