Learn to Code - Free Interactive Tutorials
Home » Projects » Build a Todo List App

Build a Todo List App

JavaScript Intermediate ⏱ 4 hours
Project Goal: Create a fully functional todo list application with local storage
Skills you'll learn: JavaScript DOM Manipulation Local Storage Event Handling

Project Overview

Build a complete todo list application that allows users to add, complete, and delete tasks. The app will save data to local storage so tasks persist between sessions.

Features You’ll Implement

  • Add new tasks
  • Mark tasks as complete
  • Delete tasks
  • Filter tasks (all, active, completed)
  • Persist data with local storage
  • Responsive design

Skills You’ll Learn

  • JavaScript DOM manipulation
  • Event handling
  • Local storage API
  • Array methods
  • CSS styling

Project Requirements

Functionality

  1. Users can add new tasks
  2. Users can mark tasks as complete/incomplete
  3. Users can delete tasks
  4. Tasks are saved to local storage
  5. Filter tasks by status

Design

  • Clean, modern interface
  • Responsive layout
  • Visual feedback for interactions
  • Accessible for keyboard navigation

Getting Started

Create three files:

  • index.html - Structure
  • style.css - Styling
  • app.js - Functionality

Implementation Guide

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>My Todo List</h1>
        <div class="input-section">
            <input type="text" id="taskInput" placeholder="Add a new task...">
            <button id="addBtn">Add</button>
        </div>
        <div class="filters">
            <button class="filter-btn active" data-filter="all">All</button>
            <button class="filter-btn" data-filter="active">Active</button>
            <button class="filter-btn" data-filter="completed">Completed</button>
        </div>
        <ul id="taskList"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

JavaScript Starter

// Initialize tasks array
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// Add task function
function addTask(text) {
    const task = {
        id: Date.now(),
        text: text,
        completed: false
    };
    tasks.push(task);
    saveTasks();
    renderTasks();
}

// Save to local storage
function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Render tasks
function renderTasks(filter = 'all') {
    // Your code here
}

// Initialize app
renderTasks();

Challenges

  1. Add task editing functionality
  2. Implement drag-and-drop reordering
  3. Add due dates to tasks
  4. Create task categories

Resources

Submission

Once complete, deploy your app to GitHub Pages and share the link!