To Do list: list structure

[RitobrotoMukherjee]

Review Changes: review 1

• As the reviewer suggested, refactored the code to dynamically build the task list li elements from the static array of the task objects.
• Commented out OOP related code for the time being, as these codes will be helpful in coming tasks for the same project.

Set up Todo List Skeleton with Webpack

• It's a solo Task.
• Used webpack to bundle JavaScript, HTML, and CSS.
• Implemented OOP with DRY and SOLID principals.
• Used ES6 modules to write modular JavaScript.
• Created Task object with three keys.
• On page load show task list dynamically from TaskList module
• Implemented all basic file structure index.html, index.js, and style.css

[DeliceLydia]

Hi @RitobrotoMukherjee,

Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there! Highlights for your project:

• Followed git workflow
• No linter errors

Required Changes ♻️

Check the comments under the review.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

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

[DeliceLydia]

• I suggest that you add your simple to-do list in an array(array of objects) and each task should have 3 keys description, completed, and index instead of adding them like HTML elements

[DeliceLydia]

• Please work on the function that iterates over the tasks array and populates the HTML list item element for each task, tasks should be rendered dynamically to the DOM, and the tasks should appear in order of the index values for each task.

[RitobrotoMukherjee]

Hi, @DeliceLydia I think you might have overlooked the architecture of the code.
All tasks are object of task.js module and the array list is getting dynamically implemented from taskList.js module's getList() function. It's a dynamic JS list getting rendered to HTML list. It's an Array of object from task.js file.
For more clarification please look into item.index , that index is in proper order and dynamically generated, even that is accessed as dot object accessor of JS. I have followed proper OOP and JS modular structure here.
Please consider going through the full code of task.js and taskList.js file and line number 5 and 10 from index.js to understand the code flow properly.

If after following the steps you have any confusion understanding the flow please drop a comment.

[RitobrotoMukherjee]

• I suggest that you add your simple to-do list in an array(array of objects) and each task should have 3 keys description, completed, and index instead of adding them like HTML elements

The Array is the taskList getting generated using task.js default object having the keys index , completed, description. Please consider checking the code flow. I have followed proper OOP with JS modular architecture. So, the changes you have requested are already implemented.

[RitobrotoMukherjee]

• Please work on the function that iterates over the tasks array and populates the HTML list item element for each task, tasks should be rendered dynamically to the DOM, and the tasks should appear in order of the index values for each task.

Hi @DeliceLydia ,The forEach loop on taskList array is rendering everything dynamically on HTML DOM, in proper order of index starting from 0 index till 2, as I am rendering 3 elements. Please consider rechecking the code flow. What you have requested for is already implemented.

[DeliceLydia]

Hello @RitobrotoMukherjee, Thank you for reaching out! I get what you mean only just it was suggested for this milestone to add manually some simple tasks in the array then render them dynamically to the DOM just like:

const tasks = [
  {
    description: 'An example description in string',
    completed: false,
    index: 10,
  },
];

Ask another review and it will get approved you can add extra information while submitting

[RitobrotoMukherjee]

Hi, @DeliceLydia Thanks for replying to me back. Sure, I will refactor the code with just a static array and resubmit it again without importing the modules as you suggested!
In my advocate: I took this approach as I thought this will follow SOLID and DRY principles both. Other than that I saw the sneak peak and found this structure will help me complete the rest of the tasks on this project faster being the foundation of the project is strong.

[topeogunleye]

Hi @RitobrotoMukherjee,

Status: Approved ✔️

Excellent job on making the changes requested by the previous code reviewer. Keep it up 👏

Your project is complete! There is nothing else to say other than... it's time to merge it 💪
Congratulations! 🎉

[Optional] suggestions:

• Nothing to mention.

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.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag @topeogunleye in your question so I can receive the notification.

---

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.