How to Create a Todo List in JavaScript: Simple Guide

To create a todo list in JavaScript, use an array to store tasks, and manipulate the DOM to display and update the list. Add tasks by capturing user input, then update the list dynamically with event listeners and DOM methods like createElement and appendChild.

Syntax

A basic todo list in JavaScript involves these parts:

• Array: Stores the list of tasks.
• Functions: Add, display, and remove tasks.
• DOM manipulation: Show tasks on the webpage.
• Event listeners: React to user actions like button clicks.

javascript

const todos = [];

function addTodo(task) {
  todos.push(task);
  displayTodos();
}

function displayTodos() {
  const list = document.getElementById('todo-list');
  list.innerHTML = '';
  todos.forEach((todo, index) => {
    const item = document.createElement('li');
    item.textContent = todo;
    list.appendChild(item);
  });
}

Example

This example shows a simple todo list where you can add tasks by typing in an input box and clicking a button. The tasks appear below as a list.

javascript

const todos = [];

function addTodo() {
  const input = document.getElementById('todo-input');
  const task = input.value.trim();
  if (task) {
    todos.push(task);
    input.value = '';
    displayTodos();
  }
}

function displayTodos() {
  const list = document.getElementById('todo-list');
  list.innerHTML = '';
  todos.forEach((todo, index) => {
    const item = document.createElement('li');
    item.textContent = todo;
    list.appendChild(item);
  });
}

// HTML structure for this example:
// <input id="todo-input" type="text" placeholder="Add a task">
// <button onclick="addTodo()">Add</button>
// <ul id="todo-list"></ul>

Output

User types 'Buy milk' and clicks Add
List shows:
- Buy milk
User types 'Walk dog' and clicks Add
List shows:
- Buy milk
- Walk dog

Common Pitfalls

Common mistakes when creating a todo list include:

• Not trimming input, which can add empty or whitespace-only tasks.
• Not clearing the input box after adding a task.
• Not updating the displayed list after changes.
• Using innerHTML += in loops, which is slower and can cause bugs.

javascript

/* Wrong way: adding tasks without trimming and using innerHTML += */
function addTodoWrong() {
  const input = document.getElementById('todo-input');
  const task = input.value; // no trim
  if (task) {
    todos.push(task);
    input.value = '';
    const list = document.getElementById('todo-list');
    list.innerHTML += `<li>${task}</li>`; // inefficient
  }
}

/* Right way: trim input and rebuild list */
function addTodoRight() {
  const input = document.getElementById('todo-input');
  const task = input.value.trim();
  if (task) {
    todos.push(task);
    input.value = '';
    displayTodos();
  }
}

Quick Reference

Tips for building a todo list in JavaScript:

• Use an array to store tasks.
• Trim user input to avoid empty tasks.
• Update the displayed list by clearing and rebuilding it.
• Use createElement and appendChild for safe DOM updates.
• Attach event listeners to buttons or form submissions.

Key Takeaways

Store todo tasks in an array and update it when adding or removing items.

Use DOM methods like createElement and appendChild to display the list safely.

Always trim input to prevent adding empty tasks.

Clear and rebuild the displayed list after each change for consistency.

Attach event listeners to handle user actions like adding tasks.