Attach an event handler on the form submission. On form submit add new list item to the end of
"ul#todo
" with the value of "input#type-input
". Reset the value of
"input#type-input
" back to empty string.
Attach an event handler on the click event of "ul#todo
". Handle click events on
individual list items and give them a css class of "done" when they are clicked on the first
time. Remove any list items that already have a class of "done" when they are clicked again.
The following can be helpful:
Document.getElementById()
,
Document.querySelector()
,
EventTarget.addEventListener()
,
Event.preventDefault()
,
Event.currentTarget
,
Event.target
,
Document.createElement()
,
Node.removeChild()
,
Element.tagName
,
Element.classList
, Element.classList.add()
, Element.classList.remove()
,
Element.classList.toggle()
, and
Element.classList.contains()