huichops/todo-bubbling.html

## todo-bubbling.html
<html>
<head>
  <style>
    .todo--done {
      text-decoration: line-through;
    }
  </style>
  <script>
  function main() {
    const todos = document.getElementById('todo-app');
    todos.addEventListener('click', (evt) => {
      const clickedTodo = evt.target;
      // Also if the data is fetched from somewhere else. I suggest having the todo's id in the data- fields.
      // This way we know exactly what todo we finished instead of relying on the elements list index.
      const todoIndex = Array.from(clickedTodo.parentElement.children).indexOf(clickedTodo) + 1;

      if (clickedTodo && clickedTodo.nodeName === 'LI') {
        clickedTodo.classList.add('todo--done');
        alert(`Item ${todoIndex}: "${clickedTodo.innerText}" is done!`);
      }
    });
  }

  setTimeout(main, 10);
  </script>
</head>
<body>
  <ul id="todo-app">
    <li class="todo">Walk the dog</li>
    <li class="todo">Pay bills</li>
    <li class="todo">Make dinner</li>
    <li class="todo">Code for one hour</li>
  </ul>
</body>
</html>


## todo-foreach.html
<html>
  <head>
    <style>
      .todo--done {
        text-decoration: line-through;
      }
    </style>

    <script>
    function main() {
      const todos = Array.from(document.getElementsByClassName('todo'));

      todos.forEach((todo, index) => {
        todo.addEventListener('click', (evt) => {
          const { clickedTodo } = evt;
          const todoIndex = index + 1;

          clickedTodo.classList.add('todo--done');
          alert(`Item ${todoIndex}: "${clickedTodo.innerText}" is done!`);
        });
      });
    }

    setTimeout(main, 10);
    </script>
  </head>

  <body>
    <ul id="todo-app">
      <li class="todo">Walk the dog</li>
      <li class="todo">Pay bills</li>
      <li class="todo">Make dinner</li>
      <li class="todo">Code for one hour</li>
    </ul>
  </body>
</html>

## todo-original.html
<html>
<head>
<script>
// The indentation width makes the code hard to follow, I would make it shorter.
setTimeout(
 	 // We can separate this to a named function to have less nesting and more readability
	function() {
   		 // We should use `const` or `var` at least,
   		 // depending on the target browser, to avoid having these variables as global.

   		 // We should use a more specific selector.
    		// As the project grows we might have more `li` elements in the DOM
		todos = document.getElementsByTagName( 'li' );
		i = 0;

   		 // We should validate against the `nodeName`
		while ( typeof( todos.item( i ) ) == 'object' ) {
			todo = todos.item( i );
     			 // We should put this inside a closure because `i` will equal 4 on every alert text content.
			todo.addEventListener( 'click', function( evt ) {
       				 // We can have a class for this styling to make it easier to reuse or update.
				evt.target.style = 'text-decoration: line-through';
       				 // We can use template strings to get less confused with " and variable concatenation.
       				 // Only if the target browser let's us do so. We can always use Babel to write cleaner code.
				alert( 'Item ' + ( i + 1 ) + ': "' + evt.target.innerText + '" is done!' );
			} );
			i++;
		}
	},
	10
);
</script>
</head>
<body>
<ul id="todo-app">
	<li class="todo">Walk the dog</li>
	<li class="todo">Pay bills</li>
	<li class="todo">Make dinner</li>
	<li class="todo">Code for one hour</li>
</ul>
</body>
</html>
	<html>
	<head>
	<style>
	.todo--done {
	text-decoration: line-through;
	}
	</style>
	<script>
	function main() {
	const todos = document.getElementById('todo-app');
	todos.addEventListener('click', (evt) => {
	const clickedTodo = evt.target;
	// Also if the data is fetched from somewhere else. I suggest having the todo's id in the data- fields.
	// This way we know exactly what todo we finished instead of relying on the elements list index.
	const todoIndex = Array.from(clickedTodo.parentElement.children).indexOf(clickedTodo) + 1;

	if (clickedTodo && clickedTodo.nodeName === 'LI') {
	clickedTodo.classList.add('todo--done');
	alert(`Item ${todoIndex}: "${clickedTodo.innerText}" is done!`);
	}
	});
	}

	setTimeout(main, 10);
	</script>
	</head>
	<body>
	<ul id="todo-app">
	<li class="todo">Walk the dog</li>
	<li class="todo">Pay bills</li>
	<li class="todo">Make dinner</li>
	<li class="todo">Code for one hour</li>
	</ul>
	</body>
	</html>