Untitled

<html lang="en">
    <head>
        <meta charset="utf-8">
    </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>

        <!-- We move script to avoid timeout -->
        <script>
          // A better way to get todos using selectors and avoiding type checking
          const todos = document.querySelectorAll("#todo-app > .todo")
          // iterate over with a for instead of while since we know beforehand the times it will run
          for(const todo of todos) {
            todo.addEventListener('click', () => {
              // allow to reset the state of the todo item by reclicking it
              const done = todo.style.textDecoration === 'line-through';
              // avoid recreating the whole style by modifying just the textDecoration property
              todo.style.textDecoration = done ? 'none' : 'line-through';
              // use string templates for cleaner code
              alert(`Item: "${todo.innerText}" is now ${done ? 'pending' : 'done'}`);
            });
          }
        </script>
    </body>
</html>