Codexpal - Learn Programming Interactively

Lesson Content

Build a Todo App 📋

Create a fully functional todo app that you can actually use! This is a classic project that employers love to see.

Features to Build

Add new todos
Mark todos as complete
Delete todos
Filter todos (all, active, completed)
Count remaining todos

Core JavaScript

let todos = [];

function addTodo(text) {
  todos.push({ id: Date.now(), text, completed: false });
}

function toggleTodo(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) todo.completed = !todo.completed;
}

function deleteTodo(id) {
  todos = todos.filter(t => t.id !== id);
}

Example Code

Build the core functionality of a todo app

let todos = [];

function addTodo(text) {
  todos.push({ id: Date.now(), text, completed: false });
}

function toggleTodo(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) todo.completed = !todo.completed;
}

function deleteTodo(id) {
  todos = todos.filter(t => t.id !== id);
}

// Test
addTodo('Learn JavaScript');
addTodo('Build Todo App');
console.log(todos);
toggleTodo(todos[0].id);
console.log('After toggle:', todos);

Expected Output:

Array of todos with one marked as completed

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code