Mini Project: Todo App

Build a Todo App

Let's build a complete todo application that uses everything you've learned: variables, functions, arrays, objects, DOM manipulation, events, localStorage, and more.

Features to Build

• Add new todos
• Delete todos
• Toggle todo completion status
• Filter todos (all, active, completed)
• Clear completed todos
• Persist data with localStorage
• Count remaining todos

Live Demo

Try the live todo app below. It's fully functional and uses localStorage to save your todos.

How the Fix Works

The previous version had issues with CSS variables and template literals. The fix uses:

• Hardcoded Colors: Instead of CSS variables, we use hardcoded color values that work in any environment
• String Concatenation: Instead of template literals with backticks, we use string concatenation
• var instead of let/const: Using var for better compatibility
• Traditional for loops: Instead of array methods like forEach and map
• Event Delegation: Using addEventListener on dynamically created elements

Project Extensions

• Add due dates to todos
• Add categories or tags
• Implement drag-and-drop reordering
• Add a dark/light theme toggle
• Export/import todos as JSON
• Add animations for adding/deleting

Summary

• Built a complete todo app with all CRUD operations
• Used localStorage for data persistence
• Implemented filtering (all, active, completed)
• Used DOM manipulation and event listeners
• Organized code with functions for maintainability
• Fixed all CSS variable and template literal errors