Een taak voltooien in een JavaScript-checklist

We voegen op een vergelijkbare manier een gebeurtenis toe aan de knop 'gedaan':

javascriptlet mark = document.createElement('span');
mark.classList.add('mark');
mark.textContent = 'gedaan';
mark.addEventListener('click', function() {
  // hier komt de code om de taak als gedaan te markeren
});
li.appendChild(mark);

Om een taak als voltooid te markeren, moet het bijbehorende li tag een CSS-klasse krijgen. Laten we deze klasse, bijvoorbeeld, done noemen.

Voor deze klasse kunnen we dan de bijbehorende CSS-code schrijven:

css#list .done {
  text-decoration: line-through;
}