Lesson 9: Advanced Todo Features

What You'll Learn Today

Now it's time to make your todo app truly powerful! Today you'll learn how to delete tasks, mark them as complete, and track statistics. We'll build on everything you learned in the previous lessons to create a fully functional todo application.

Why Advanced Features Matter

A basic todo app that only adds items isn't very useful in real life. People need to complete tasks, remove things they no longer need, and see their progress. These features make your app actually usable and show you're thinking like a real developer!

Learning Objectives

Implement toggle functionality to mark tasks as complete or incomplete.
Add delete functionality to remove tasks from the list.
Track and display statistics showing total, active, and completed tasks.
Handle complex user interactions and update the interface dynamically.

Advanced JavaScript Concepts

To build these advanced features, we'll use some powerful JavaScript concepts. Don't worry - we'll explain each one step by step!

array.filter() Remove Items

This method creates a new array with only the items that pass a test. Perfect for deleting todo items! For example: todos.filter(todo => todo.id !== deleteId) removes the item with that ID.

array.map() Transform Items

This method creates a new array by transforming each item. We'll use it to toggle completion status: todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo)

...spread operator Copy Objects

The three dots (...) copy all properties from an object. This lets us change one property without affecting the original: {...todo, completed: true}

onclick with parameters Pass Data to Functions

We can pass specific data (like a todo's ID) to our functions: onclick="deleteTodo(${todo.id})". This lets each button know which item to work with.

Your Mission: Complete the Todo App

Your starter code has a basic todo app, but it's missing the most important features! You'll implement three key functions to make it fully functional.

Pro Tip

Test each function as you complete it. Try adding a task, then toggle it, then delete it. Make sure the statistics update correctly!

Step 1: Complete `toggleTodo(id)`
Find the todo with the matching ID and flip its completed status from true to false or vice versa. Use array.map() and the spread operator to create a new array with the updated todo.
Step 2: Complete `deleteTodo(id)`
Remove the todo with the matching ID from the array. Use array.filter() to create a new array without that item. Remember to also update the display and stats!
Step 3: Complete `updateStats()`
Calculate and display the total number of todos, how many are active (not completed), and how many are completed. Update the HTML elements with these numbers.

Bonus Challenge

Once you complete the basic functionality, try adding a "Clear Completed" button that removes all finished tasks at once!

Understanding the Big Picture

What you're building today is the foundation of how most web applications work:

The Data-UI Connection

Your todos array is your "data" - it represents the current state of your application. Every time you modify this data (add, toggle, delete), you update the UI to match. This pattern is used in professional web development!

Event-Driven Programming

Your app responds to user events (clicks) by calling functions that modify data and update the display. This reactive approach makes your app feel responsive and modern.

Next Steps

In Lesson 10, we'll add data persistence so your todos survive page refreshes, and we'll polish the app with animations and better styling. You're building real developer skills!