HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<div>
  <h2>To-Do List</h2>
<p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task">
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

.task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>