Make sure you know how to use this addEventListener

Watch:


Figure out how we used the event listeners on this todo-list

Check our assignment from the lecture

  1. Notice in main.js that the addTodo() part is really simple. You have a button on the index.html that calls the addTodo to create the todo
  2. The complex part is the addEventListener that listens when you click the body element
  3. Within the eventlistener when clicked the body, it figures out if the target element is <li> and does some style wrangling accordingly


Tasks:

  1. Stylize the element market as "done" a bit more.
  2. Make the todos appear like post-it notes. You can for example addClass('postit') into your newTodoItem and stylize it in the css
  3. Something else? You decide :)

Return the zip



Last modified: Friday, 3 December 2021, 8:30 AM