Project 1:
To-Do List App

Overview

In this project, you will build a console-based To-Do List App using pure JavaScript. This app will allow users to add tasks, list them, mark them as done, and delete tasks — all from the console (browser or Node.js).

Why This Project?

• Strengthens your understanding of arrays and objects
• Practices modular code writing
• Introduces real-world task state management

Step-by-Step Implementation

Step 1: Define the Task List Structure

We start by defining an empty array that will hold all our tasks. Each task will be an object with id, description, and completed status.

let tasks = [];
let taskId = 1;
    

Step 2: Add a Task

This function adds a new task to the list with a unique ID.

function addTask(description) {
  tasks.push({ id: taskId++, description, completed: false });
  console.log("Task added successfully.");
}
    

Output:

addTask("Buy groceries");
addTask("Finish JavaScript course");

Q: What happens if I add two tasks with the same description?

A: That’s allowed. Each task has a unique id to differentiate them.

Step 3: View All Tasks

This function lists all tasks in a readable format.

function listTasks() {
  if (tasks.length === 0) {
    console.log("No tasks found.");
    return;
  }
  tasks.forEach(task => {
    console.log(`[${task.completed ? "x" : " "}] ${task.id}: ${task.description}`);
  });
}
    

Output:

[x] 1: Buy groceries
[ ] 2: Finish JavaScript course

Step 4: Mark a Task as Completed

This function changes the completed status of a task by ID.

function completeTask(id) {
  const task = tasks.find(t => t.id === id);
  if (task) {
    task.completed = true;
    console.log(`Task ${id} marked as completed.`);
  } else {
    console.log("Task not found.");
  }
}
    

Q: What if I enter an invalid ID?

A: The function will simply tell you "Task not found."

Step 5: Delete a Task

This function removes a task by its ID using filter().

function deleteTask(id) {
  const initialLength = tasks.length;
  tasks = tasks.filter(task => task.id !== id);
  if (tasks.length < initialLength) {
    console.log(`Task ${id} deleted.`);
  } else {
    console.log("Task not found.");
  }
}
    

Output:

deleteTask(1);

Step 6: Clear All Completed Tasks

This is a bonus feature to remove tasks that are already marked as done.

function clearCompleted() {
  const cleared = tasks.filter(t => t.completed);
  tasks = tasks.filter(t => !t.completed);
  console.log(`${cleared.length} completed task(s) removed.`);
}
    

Full Example: Run in Browser Console or Node.js

// Initialize task list
let tasks = [];
let taskId = 1;

function addTask(description) {
  tasks.push({ id: taskId++, description, completed: false });
  console.log("Task added successfully.");
}

function listTasks() {
  if (tasks.length === 0) {
    console.log("No tasks found.");
    return;
  }
  tasks.forEach(task => {
    console.log(`[${task.completed ? "x" : " "}] ${task.id}: ${task.description}`);
  });
}

function completeTask(id) {
  const task = tasks.find(t => t.id === id);
  if (task) {
    task.completed = true;
    console.log(`Task ${id} marked as completed.`);
  } else {
    console.log("Task not found.");
  }
}

function deleteTask(id) {
  const initialLength = tasks.length;
  tasks = tasks.filter(task => task.id !== id);
  if (tasks.length < initialLength) {
    console.log(`Task ${id} deleted.`);
  } else {
    console.log("Task not found.");
  }
}

function clearCompleted() {
  const cleared = tasks.filter(t => t.completed);
  tasks = tasks.filter(t => !t.completed);
  console.log(`${cleared.length} completed task(s) removed.`);
}
    

Conclusion

This To-Do List App is a solid first project to apply your JavaScript basics in a meaningful way. It teaches you how to manage dynamic data, use common array methods like push(), find(), and filter(), and interact with logic-driven functions.

Try It Yourself

• Add priority to tasks
• Implement due dates
• Save tasks in localStorage (if using in browser)