Every beginner developer builds a to-do list at some point. The challenge is making it simple yet functional. In this article, we’ll create a working to-do list in under 50 lines of JavaScript.
Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do App</title>
</head>
<body>
<input id="taskInput" placeholder="Add a task..." />
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
<script>
const input = document.querySelector("#taskInput");
const list = document.querySelector("#taskList");
document.querySelector("#addBtn").onclick = () => {
if (input.value.trim()) {
let li = document.createElement("li");
li.textContent = input.value;
list.appendChild(li);
input.value = "";
}
};
</script>
</body>
</html>
Explanation
- Grab references to the input, list, and button.
- When the button is clicked, create a new
<li>. - Append it to the list and reset the input.
Extensions
- Add delete buttons for each task.
- Save tasks in
localStorage. - Add a “completed” style toggle.
Leave a Reply