LONDON | Gislaine Della Bella | Module-Data-Groups | WEEK 3 | Todo List

[Della-Bella]

Learners, PR Template

Self checklist

• [x ] I have committed my files one by one, on purpose, and for a reason
• [x ] I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
• [x ] I have tested my changes
• [x ] My changes follow the style guide
• [x ] My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Hello Voluntear,
Here is my code. It is still dificult to write all the function on my onw so I'm trying to undestand the challenges with some tutorials I found on Youtube.
thank you again for your time helping us,
thank you,

[cjyuan]

While your method works, it missed using the approach specified in the Instructions section.

• Your code does not use the supplied array 'todos` to store the "todo items"
• You didn't implement populateTodoList()
• Each todo item does not has the specified HTML

More importantly, you missed the opportunities to apply an approach commonly used in implementing GUI. The approach works in the following way:

• Represent the "application state" using only JS data.
  • For this app, the todos array would be the application state.
• Dynamically update the view using HTML and CSS based on the "application state".
  • The code inside populateTodoList() should, based on the value of todos, construct the list items using the API like document.createElement(), and add event listeners to the <i> elements using .addEventListener().
• Whenever you need to mark or unmark an item as completed, change the completed property of the corresponding item in todos.
• Whenever you need to add/delete an item, do it in todos.
• Every time todos is modified, call populateTodoList() to update the view.

If you have difficulty figuring out how to implement this, try asking ChatGPT or ask a volunteer.
(Let me know if you want to know what question you can ask ChatGPT to get a sample code)

If you want to store todos in window.localStorage as a bonus feature, you can lookup How to store an array of objects in window.localStorage.

---

In VSCode, your can right-click in the editor and select "Format Document" to help you indent the code properly. It works for HTML, CSS, and JS. Properly indented code makes code reading easier.

[cjyuan]

Instead of using onclick="addTask()" to assign event listener, you should try using

  let theElement = ...; // select the element
  theElement.addEventListener("click", () => {
     // 
  });

The latter approach is more flexible, and works also for dynamically created elements.

[Della-Bella]

Hi Cyuan,

Now I understand this approach for the populate function is the same as the one we are using for the TV show, and it is much clearer to me now.
I have made the changes.

Thank you!

[Della-Bella]

I forgt to mention the tip about "format the code "with right click was the best of my day !!!!