Untitled

<html>
  <head></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>

    <!-- Move script tag below app so we don't have to use setTimeout -->
    <script>
      // Use more diliberate selector so we don't have to type check
      const app = document.getElementById('todo-app');
      const todos = app.querySelectorAll('.todo');

      // Use foreach for cleaner looping of todos
      todos.forEach((todo, i) => {
        todo.addEventListener(
          'click',
          ({ target }) => {
            // Use object destructuring for cleaner variable refereneces

            // Set only text-decoration styling instead of replacing entire style object
            todo.style.textDecoration = 'line-through';

            // Use string literal for cleaner string concatination
            alert(`Item ${i + 1}: "${target.innerText}" is done!`);
          }
        );
      });
    </script>
  </body>
</html>