Added the following feature as per requirement:

• Remove all hardcoded items from the tasks array.

• Create a new JavaScript file for the new functionality.

• 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, so they represent the current list order and are unique.

• All changes to the To Do List should be saved in local storage.

Project completed based on project requirement:

• Use jest framework for testing.
• Create a test file(s) ([..].test.js) for a file(s) containing the following functions:

1. a function for editing the task description.
2. 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.

Finished with the feature as per project requirements below:

• Create a test file for a file containing the add item and delete item functions that you want to test.

• Mock a storage object to "imitate" localStorage operations.

• Mock HTML to test if add/delete functions add or remove exactly one

• element to/from the list in the DOM.

• Use the describe() method.

Created the todo structure based on the following requirement:

• 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. Create an empty To-Do List placeholder div or ul element. 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 appear 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. Your list should be a clone of the part of the minimalist project captured in the video below.

Features Implemented

The following features were implemented as per requirement:

• A new project was set up with webpack .
• An index.html file was created.
• An index.js file was created with an array of some simple to do tasks containing three keys:

1. description [string].
2. completed [bool].
3. index: [number].

• A function was written to iterate over the tasks array and populate an HTML list item element for each task.
• On page load, the data is rendered dynamically in the dedicated placeholder.
• All source files (index.html, index.js and style.css) is located in /src directory

The simplicity of this project is the fact that the Store class is used as the powerhouse of the application. The major logic was written inside the store. Files were separated into Modules using the export and import statement which is also a good practice.

Based on the principle of YAGNI, the below lines of code isn't needed and as a matter of fact is redundant in the application.

https://github.com/denscholar/To-Do-list-microverse/blob/ccb49a32777442eb55b6cd93fd3113c9e3239a74/src/selectors.js#L8-L9

The project applied and satisfy all HTML and CSS best practices. Some of the bad practices in HTML and CSS was spotted by the linters; which enabled me to make changes to the repo.

Changes required

To the best of my knowledge, I have implemented the to-do list using javascript best practices which include the following:'

1. clean code
2. there is no form of 'console.log' in the repo
3. node modules are added to the .gitIgnore file

However, it would be nice if the application logic is separated from DOM manipulation task which currently is not happening.

Suggestions

As we checked on the meeting, here are some suggestions to do even better your app.

• [ ] Your code is made in a way that can have an unexpected behavior, since you are adding elements with the same id each time you add a new task here and here

What you think about it?