To Do list: list structure

[Saadat123456]

Project requirements

• 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:
  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. Your list should be a clone of the part of the minimalist project captured in the video below.

[omar-labana]

Approved ✔️

Hi @Saadat123456,

Congratulations on completing this project! 👏🏼 🎉

You have correctly implemented all of the requirements📃 correctly and without any errors⚠️ or bugs🪲.

Cheers and good luck in your next milestones! 🍀

Feel free to leave any questions or comments in the PR thread(don't forget to tag me 😄) if something is not 100% clear.

---

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

[Gambit142]

Hi @Saadat123456 👋,

Good job so far!

Highlights

• Professional README.md file ✔️
• All linters checks pass ✔️

However, there are some issues that you still need to work on to go to the next project but you are almost there!

Required Changes ♻️

Kindly check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

N/A

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

---

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

Slack: Francis Ugorji

[Gambit142]

• For this milestone, you are required to remove all hardcoded items in the array and render items dynamically by creating a function that collects the value from a form input type="text" and pushes it to an array. Each item should have completed status set to false and should also have an index.

  • Hint: Your first index should start from 1, not Zero.

• Each item in the array should be editable. You can click on this Link to learn how to edit an item in a div. Kindly create a function that does this.

[Gambit142]

• It would be nice to also implement a function that allows users of your app to delete an item from the to-do list. After deleting an item, the index of the remaining item should be reset.

Hint:

const filteredArray = array.filter((task) => array.indexOf(task) !== index);
      filteredArray.forEach((obj, index) => {
        obj.index = index + 1;
 });

• It would be nice to also fulfill the project requirement of persisting data in the local storage. You can read this article that shows developers how to persist data in localStorage

Hint: You want to persist data to the localStorage whenever you perform a CRUD action and you want to get data from the localStorage when the page reloads.