Creating a To-Do List with JavaScript: A Fun and Interactive Guide

7.5.1 Creating a To-Do List

Creating a to-do list is a fantastic way to apply your JavaScript skills to a real-world project. This simple application will help you understand how to work with arrays, manage user input, and manipulate data dynamically. By the end of this section, you’ll have a fully functional to-do list that you can expand and personalize.

Key Learning Objectives

• Apply Array Knowledge: Use arrays to store and manage tasks.
• Dynamic Data Handling: Learn to add, remove, and display items in real-time.
• User Input Management: Practice writing code that interacts with user input.

Features of Our To-Do List

Our to-do list will have several key features:

• An array to store tasks.
• Functions to add, remove, and list tasks.
• An enhanced feature to mark tasks as completed.

Building the To-Do List

Let’s start by creating the basic structure of our to-do list application. We’ll use an array to store our tasks and write functions to manage these tasks.

Step 1: Setting Up the Array

We’ll use a simple array to keep track of our tasks. This array will hold strings, each representing a task.

let toDoList = [];

Step 2: Adding Tasks

To add a task to our list, we’ll create a function called addTask. This function will take a string as an argument and add it to our toDoList array.

function addTask(task) {
  toDoList.push(task);
  console.log(`'${task}' has been added to your list.`);
}

Step 3: Removing Tasks

Next, we’ll create a function to remove tasks from our list. The removeTask function will search for the task in the array and remove it if found.

function removeTask(task) {
  let index = toDoList.indexOf(task);
  if (index > -1) {
    toDoList.splice(index, 1);
    console.log(`'${task}' has been removed from your list.`);
  } else {
    console.log(`'${task}' not found in your to-do list.`);
  }
}

Step 4: Listing Tasks

Finally, we’ll create a function to display all tasks in our list. The listTasks function will iterate over the toDoList array and print each task.

function listTasks() {
  console.log('Your To-Do List:');
  toDoList.forEach(function(task, index) {
    console.log(`${index + 1}. ${task}`);
  });
}

Usage Example

Let’s see how these functions work together:

// Adding tasks
addTask('Complete homework');
addTask('Wash dishes');

// Listing tasks
listTasks();

// Removing a task
removeTask('Wash dishes');

// Listing tasks again
listTasks();

Activity: Enhancing the To-Do List

Now that we have a basic to-do list, let’s enhance it by adding a feature to mark tasks as completed. We’ll modify our array to store objects instead of strings, allowing us to track the completion status of each task.

Step 1: Updating the Array Structure

We’ll change our toDoList array to store objects with task and completed properties.

let toDoList = [];

Step 2: Modifying the addTask Function

Update the addTask function to create an object for each task.

function addTask(task) {
  toDoList.push({ task: task, completed: false });
  console.log(`'${task}' has been added to your list.`);
}

Step 3: Creating a markTaskCompleted Function

Add a new function to mark a task as completed.

function markTaskCompleted(task) {
  let taskObj = toDoList.find(t => t.task === task);
  if (taskObj) {
    taskObj.completed = true;
    console.log(`'${task}' has been marked as completed.`);
  } else {
    console.log(`'${task}' not found in your to-do list.`);
  }
}

Step 4: Updating the listTasks Function

Modify the listTasks function to display the completion status of each task.

function listTasks() {
  console.log('Your To-Do List:');
  toDoList.forEach(function(taskObj, index) {
    const status = taskObj.completed ? '[x]' : '[ ]';
    console.log(`${index + 1}. ${status} ${taskObj.task}`);
  });
}

Enhanced Usage Example

Here’s how you can use the enhanced to-do list:

// Adding tasks
addTask('Complete homework');
addTask('Wash dishes');

// Listing tasks
listTasks();

// Marking a task as completed
markTaskCompleted('Complete homework');

// Listing tasks again
listTasks();

Best Practices and Optimization Tips

• Consistent Data Structure: Ensure that your array consistently stores objects with the same properties.
• User Feedback: Provide clear feedback to users when tasks are added, removed, or marked as completed.
• Error Handling: Handle cases where tasks are not found gracefully, as shown in the removeTask and markTaskCompleted functions.

Common Pitfalls

• Index Management: Be cautious when removing items from an array, as this can affect the indices of subsequent items.
• Mutable State: Directly modifying objects in an array can lead to unexpected behavior. Consider using methods that return new arrays or objects when possible.

Conclusion

Creating a to-do list is a practical exercise that reinforces your understanding of arrays, functions, and user interaction in JavaScript. This project can be expanded with additional features, such as due dates, priority levels, and categories, providing endless opportunities for learning and creativity.

Additional Resources

• MDN Web Docs on Arrays
• JavaScript.info on Arrays
• Eloquent JavaScript: Data Structures

Quiz Time!