How to Make a To-Do List in JavaScript

Learn to build a robust client-side to-do list in JavaScript with practical patterns, DOM rendering, localStorage persistence, accessibility considerations, and maintainable code.

JavaScripting Team

February 20, 2026·5 min read

JavaScript Tutorials Learn JavaScript Arrays DOM Frontend

Build a JS To-Do List - JavaScripting — Photo by Setupx99via Pixabay

Quick AnswerSteps

To build a simple client-side to-do list in JavaScript, start with a basic in-memory array of tasks, render them to the DOM, and wire up add/complete/delete actions. Persist data using localStorage for a pleasant user experience. This guide demonstrates vanilla JS, clear data models, and accessible interactions you can extend for real-world apps.

Overview: Planning a Client-Side To-Do List in JavaScript

How to make a to do list in javascript? This guide focuses on a practical, maintainable approach using vanilla JavaScript and the DOM. We’ll start with a minimal data model, render tasks to the UI, and progressively add features like completion toggles, deletion, keyboard interactions, and localStorage persistence. The goal is to deliver a working prototype fast while keeping code extensible for real projects. According to JavaScripting, practical projects like this reinforce core JS concepts and provide reusable patterns for future work. By the end, you’ll have a clean architecture you can adapt to more complex task apps.

JavaScript

// Basic in-memory data model (initial state)
let tasks = [
  { id: 't1', title: 'Review PR #42', done: false, createdAt: Date.now() }
];

// Simple render trigger (defined later)
renderTasks();

What you’ll learn in this article: a clean data model, a DOM-driven rendering loop, and simple event handlers that stay readable as features grow. You’ll also learn how to structure code for testing and future enhancements.

Data Model and HTML Structure

A maintainable to-do app starts with a clear data model and lightweight HTML scaffolding. We’ll keep tasks as JS objects with id, title, done, and createdAt fields. A minimal HTML shell provides an input, a button, and a list container. This separation keeps concerns clear: data lives in memory, rendering updates the UI, and interactions mutate the data then re-render.

HTML

<div id="app">
  <input id="task-input" placeholder="Add a task" aria-label="New task" />
  <button id="add-btn" type="button">Add</button>
  <ul id="task-list" aria-label="Task list"></ul>
</div>

JavaScript

// Data model initialized (separate from UI)
let tasks = [];

// Create a new task object
function createTask(title) {
  return { id: String(Date.now()), title: title, done: false, createdAt: Date.now() };
}

Why this matters: a simple, consistent shape makes rendering predictable and testing easier. If you later add priorities or due dates, you can extend the Task type without touching rendering logic.

Rendering Tasks to the DOM

Rendering translates the data model into a visual list that users can interact with. A single render function reduces bugs by keeping a single source of truth for the UI. We map each task to an <li> with a checkbox and actions, then attach event listeners for interactions. This approach scales as you add features like filtering or editing.

JavaScript

const listEl = document.getElementById('task-list');

function renderTasks() {
  listEl.innerHTML = '';
  tasks.forEach(task => {
    const li = document.createElement('li');
    li.className = task.done ? 'done' : '';
    li.innerHTML = `
      <input type="checkbox" ${task.done ? 'checked' : ''} data-id="${task.id}" />
      <span>${task.title}</span>
      <button aria-label="Delete" data-id="${task.id}">🗑</button>
    `;
    // Toggle complete
    li.querySelector('input[type="checkbox"]').addEventListener('change', (e) => {
      toggleTask(task.id);
    });
    // Delete task
    li.querySelector('button').addEventListener('click', () => deleteTask(task.id));
    listEl.appendChild(li);
  });
}

Line-by-line: - The container is cleared, then each task creates an <li> with a checkbox, title, and delete button. - The checkbox updates the done state, then re-renders. - Delete removes the task from the array and re-renders.

Variations: you can use a template string and innerHTML for performance on small lists, or apply a virtual DOM approach for larger datasets.

Adding Tasks: Input Handling

Users add tasks via a text field and a trigger button. We validate input, create a new task object with a unique id, push it to the tasks array, and re-render. This separation keeps the UI responsive and keeps the data flow straightforward. You can also wire Enter key handling on the input for a smoother UX.

JavaScript

const input = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click', () => {
  const value = input.value.trim();
  if (value) {
    tasks.push(createTask(value));
    input.value = '';
    renderTasks();
  }
});

// Optional: allow Enter to add
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    addBtn.click();
  }
});

Why this approach? it minimizes DOM writes by batching state changes into a single render call and keeps input validation close to the UI.

Completing and Deleting Tasks

Completing tasks toggles their state, while deleting removes them. Centralizing these actions keeps behavior predictable and easy to audit. This pattern also makes it straightforward to add features like bulk actions or undo later on.

JavaScript

function toggleTask(id) {
  const t = tasks.find(t => t.id === id);
  if (t) t.done = !t.done;
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

Alternatives: for more complex apps, consider immutability (return new task arrays) or using a small state management library. For accessibility, ensure that the checkbox state is announced by screen readers and that the delete action is labeled clearly.

Persistence with localStorage

To provide a seamless experience across page reloads, store the task list in localStorage. We load on startup, and save after every mutation. This technique is lightweight, browser-native, and sufficient for small apps. If you later need multi-user sync, you can swap in a backend or service worker caching.

JavaScript

const STORAGE_KEY = 'js_todo_tasks';

function saveTasks() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

function loadTasks() {
  const raw = localStorage.getItem(STORAGE_KEY);
  if (raw) {
    try {
      tasks = JSON.parse(raw);
    } catch {
      tasks = [];
    }
  } else {
    tasks = [];
  }
  renderTasks();
}

// Call once on load
loadTasks();

// Persist after mutations (simplest: call saveTasks() inside renderTasks or after each mutator)
function renderTasks() {
  // existing render logic...
  // After rendering, persist current state
  saveTasks();
}

Note on security and data integrity: localStorage is synchronous and per-origin, so keep payload small and avoid storing sensitive data. For larger apps, consider IndexedDB or a backend.

Keyboard Accessibility and Shortcuts

A good UI supports keyboard navigation and shortcuts to raise productivity. In addition to the Enter key for adding tasks, you can enable quick toggles and deletions via keyboard focus. The following snippet demonstrates common shortcuts and focus management for a smoother experience.

JavaScript

// Basic focus management for accessibility
function focusInput() {
  input.focus();
}

document.addEventListener('keydown', (e) => {
  // Ctrl/Cmd+K focuses the input for quick add
  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
    e.preventDefault();
    focusInput();
  }
});

Variations and tips: - Use ARIA attributes to announce changes; - Consider a11y-friendly components like role="list" and role="listitem" for better screen-reader support. - For power users, expose keyboard-driven navigation (e.g., Arrow keys to move focus, Space to toggle).

Optional Enhancements: Filtering, Editing, and Sorting

As you gain confidence, you can add features without rewriting the core logic. Filtering by status (all/active/completed) helps users focus on work remaining. In-place editing lets users change a task title, while sorting can place newest or highest-priority items at the top. Implement these progressively to avoid complex rewrites.

JavaScript

let filter = 'all'; // all | active | completed

function renderTasks() {
  listEl.innerHTML = '';
  const visible = tasks.filter(t => {
    if (filter === 'all') return true;
    if (filter === 'active') return !t.done;
    if (filter === 'completed') return !!t.done;
  });
  visible.forEach(task => {
    // (same rendering as before)
  });
}

// Example: changing filter with UI
document.getElementById('filter-all').onclick = () => { filter = 'all'; renderTasks(); };
document.getElementById('filter-active').onclick = () => { filter = 'active'; renderTasks(); };
document.getElementById('filter-completed').onclick = () => { filter = 'completed'; renderTasks(); };

When to stop? Start with a small feature set, then measure usage and iterate. Add editing via double-click or inline inputs only after basic add/complete/delete flows are solid. A well-scoped feature set reduces bugs and keeps tests meaningful.

Testing, Debugging, and Best Practices

Testing a to-do app helps ensure confidence during refactors. Start with unit tests for pure functions like createTask, toggleTask, and the reducer-like render function. Use console logs sparingly in debugging to avoid polluting the UI. Maintain a consistent coding style and consider small, focused commits that demonstrate a single change.

JavaScript

// Simple tests (conceptual, not a full framework)
console.assert(createTask('Test').title === 'Test', 'Task creation works');
console.assert(toggleTask('t1') || true, 'Toggle marks as done/undone');

Common pitfalls:

Mutating state directly vs. immutability — prefer immutability in larger apps.
Overusing localStorage for large datasets — consider a backend or IndexedDB.
Poor accessibility — always label interactive controls clearly and expose keyboard shortcuts.

JavaScripting’s guidance emphasizes practical, testable code and incremental improvements. Start with a solid base, then extend with confidence.

Summary: Putting It All Together

By combining a clean data model with a DOM-driven render loop, you create a maintainable to-do app that scales. The core pattern is simple: data -> render -> user actions -> update data -> render again. This flow keeps your code predictable and easy to extend. When you put this into practice, you’ll have a solid foundation for more complex task-management apps. The JavaScripting team recommends iterating in small steps and validating each feature with real-world usage.

Steps

Estimated time: 60-120 minutes

1
Set up HTML scaffold
Create an input, a button, and a list container. This is your UI surface for the to-do app. Keep IDs predictable for easy querying from JS.
Tip: Use aria-labels to improve accessibility.
2
Define the data model
Decide on a simple task object shape and initialize an empty array or a small seed list.
Tip: Keep fields minimal at first to reduce cognitive load.
3
Implement render logic
Write a single renderTasks() that maps tasks to DOM nodes and attaches event listeners.
Tip: Avoid duplicating UI code across mutations.
4
Add task, complete, and delete
Wire up add button, checkbox toggles, and delete buttons with small mutator functions.
Tip: Validate input and handle empty submissions gracefully.
5
Persist data locally
Store the tasks array under a stable key in localStorage and load on startup.
Tip: Handle parsing errors gracefully to avoid crashes.
6
Enhance accessibility and UX
Add keyboard shortcuts and ARIA attributes to improve usability for all users.
Tip: Test with a screen reader and keyboard-only navigation.

Pro Tip: Use a consistent task object shape to simplify rendering and testing.

Pro Tip: Persist only the data you need; avoid storing UI state.

Warning: Do not rely solely on in-memory state for long sessions; always save to localStorage.

Note: Cache DOM lookups outside loops to improve performance for larger lists.

Prerequisites

Required

HTML, CSS, and vanilla JavaScript knowledge
Required
A modern web browser (Chrome/Firefox/Safari)
Required
Text editor or IDE (e.g., VS Code)↗
Required
Basic understanding of the DOM and event handling
Required

Optional

Local development server for testing (optional but recommended)
Optional
Familiarity with localStorage concepts
Optional

Keyboard Shortcuts

Action	Shortcut
Add taskFrom the input field or focused button	`↵`
Toggle completeCheckbox focus	`␣`
Delete taskDelete focused item	`Del`
Navigate listMove focus between tasks	`Arrow Up/Down`
Focus new task inputQuick add focus	`Ctrl`+`K`

Questions & Answers

What is the minimal data model for a to-do item in this guide?

A task is an object with id, title, done, and createdAt fields. This simple shape keeps rendering straightforward and makes it easy to extend later.

How do I persist tasks across page reloads?

The guide uses localStorage to save the tasks array as JSON and loads it on startup. It’s lightweight and adequate for personal projects.

Can I add editing functionality for tasks?

Yes. Add an inline input or modal to edit the title, then update the task object and re-render. Start with a non-destructive approach like a temporary editing state.

What about filtering and sorting tasks?

Implement a filter variable (all/active/completed) and render accordingly. Sorting can be added by createdAt or a priority field once you have them.

Is this approach accessible to keyboard users?

Yes, by using proper HTML controls (checkboxes, buttons), ARIA labels, and keyboard shortcuts. Test with only a keyboard and screen reader.

What to Remember

Define a simple Task data model
Render with a single, reactive renderTasks function
Persist tasks with localStorage
Enhance with keyboard shortcuts and accessibility

← More in JavaScript Projects

Overview: Planning a Client-Side To-Do List in JavaScript

Data Model and HTML Structure

Rendering Tasks to the DOM

Adding Tasks: Input Handling

Completing and Deleting Tasks

Persistence with localStorage

Keyboard Accessibility and Shortcuts

Optional Enhancements: Filtering, Editing, and Sorting

Testing, Debugging, and Best Practices

Summary: Putting It All Together

Steps

Set up HTML scaffold

Define the data model

Implement render logic

Add task, complete, and delete

Persist data locally

Enhance accessibility and UX

Prerequisites

Keyboard Shortcuts

Questions & Answers

What to Remember

Related Articles