How to Build Interactive To-Do Lists with JavaScript for Beginners
Learn how to create simple, interactive to-do lists using JavaScript. This beginner-friendly tutorial helps you understand event handling, DOM manipulation, and basic logic to build practical web apps.
To-do lists are a great way to practice JavaScript because they involve core concepts like events, DOM manipulation, and data handling. In this tutorial, you'll learn how to create a basic interactive to-do list where you can add, mark, and delete tasks.
Let's start by creating a simple HTML structure with an input box, a button, and a list to display the tasks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>Next, we will write JavaScript to add task items to the list when the user clicks the button or presses 'Enter' in the input box.
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
function addTask() {
const taskText = taskInput.value.trim();
if(taskText === '') return; // Prevent empty tasks
const li = document.createElement('li');
li.textContent = taskText;
// Add a button to delete the task
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.style.marginLeft = '10px';
deleteBtn.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = '';
taskInput.focus();
}
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
if(e.key === 'Enter') addTask();
});Now that users can add and delete tasks, let's improve the interaction by allowing them to mark tasks as done. We'll do this by toggling a CSS class when a task is clicked.
const style = document.createElement('style');
style.textContent = `
.done {
text-decoration: line-through;
color: gray;
}
`;
document.head.appendChild(style);
// Modify the addTask function to add toggle on click:
function addTask() {
const taskText = taskInput.value.trim();
if(taskText === '') return;
const li = document.createElement('li');
li.textContent = taskText;
// Toggle 'done' class on click
li.addEventListener('click', (e) => {
if(e.target.tagName !== 'BUTTON') { // Ignore clicks on the Delete button
li.classList.toggle('done');
}
});
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.style.marginLeft = '10px';
deleteBtn.addEventListener('click', () => {
taskList.removeChild(li);
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
taskInput.value = '';
taskInput.focus();
}Great! You've built a functional interactive to-do list. You can add tasks, mark them as done by clicking on them, and remove them. To continue learning, you can try saving the tasks in the browser's local storage for persistence or style it with more CSS.
This simple project covers JavaScript fundamentals like DOM selection, event listeners, element creation, and class manipulation — essential skills for beginner web developers.