Description

In this project, a tasks list structure was generated using javascript bundledthrough webpack.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS/JS requirements

• [x] We followed the list of best practices for HTML & CSS.
• [x] We followed the list of best practices for JavaScript.

Project requirements

• Use jest framework for testing.
• Create a test file(s) ([..].test.js) for a file(s) containing the following functions:
• 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 description() method.

Thank you for taking the time to review this pull request.

Description

In this project, a tasks list structure was generated using javascript bundledthrough webpack.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS/JS requirements

• [x] We followed the list of best practices for HTML & CSS.
• [x] We followed the list of best practices for JavaScript.

Project requirements

• This is a pair-programming project. Please decide whose project will you use for testing.
• 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. For those, you will need to use mocks:
• Mock a storage object to "imitate" localStorage operations (only if you are using jest < 24.x, in newer versions localStorage is mocked automatically).
• 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.

Thank you for taking the time to review this pull request.

Description

In this project, a tasks list structure was generated using javascript bundledthrough webpack.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS/JS requirements

• [x] We followed the list of best practices for HTML & CSS.
• [x] We followed the list of best practices for JavaScript.

Project requirements

• Use webpack to bundle Javascript
• Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder(
  or

  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).
  • Create task object that contains three keys: 1. description [string]. 2. completed [bool]. 3. 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.

  Thank you for taking the time to review this pull request.

Description

In this project, a tasks list structure was generated using javascript bundledthrough webpack.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS/JS requirements

• [x] We followed the list of best practices for HTML & CSS.
• [x] We followed the list of best practices for JavaScript.

Project requirements

• Add a new JavaScript file and import it as a module:
• 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.

Thank you for taking the time to review this pull request.

Description

In this project, a tasks list structure was generated using javascript bundledthrough webpack.

General requirements

• [x] There are no linter errors.
• [x] Followed the Github flow.
• [x] The documentation is professional.

HTML/CSS/JS requirements

• [x] We followed the list of best practices for HTML & CSS.
• [x] We followed the list of best practices for JavaScript.

Project requirements

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

Thank you for taking the time to review this pull request.

• You did an amazing job. your code is clean and very organized. I have only one comment on your code. I think it is good to make your code modular. you put everything in Home.js. I think It is a good practice to create modules that do specific tasks. :+1:

Here is a list of issues found in my code:

• I imbed logic in DOM manipulation functions in the Home module. These two should be separated.
• There are unnecessary DOM manipulation scripts that would prove expensive for the browser to render.