JS To-Do List
A to-do list combines input, state, and DOM updates. Treat entered text as text, and ignore blank entries.
Where to run this
This example changes a document. Open it in the HTML playground, then select Run code. It runs inside a separate preview.
A practical example
<label for="task">Task</label>
<input id="task">
<button id="add" type="button">Add</button>
<ul id="tasks">
</ul>
<script>
document.getElementById("add").addEventListener("click", () => {
const input = document.getElementById("task");
if (!input.value.trim()) return;
const item = document.createElement("li");
item.textContent = input.value.trim();
document.getElementById("tasks").append(item);
input.value = "";
input.focus();
});
</script>
What happens
A nonblank task becomes a new list item and the field is ready for another.