Mini Project: Interactive To-Do List

Project Objectives

By the end of this project, learners will be able to:

• Dynamically create and remove elements in the DOM
• Use input elements to accept user data
• Add event listeners to handle click events
• Apply styles and classes based on user interactions
• Reinforce their understanding of DOM selection, content manipulation, and interactivity

Project Overview

In this project, learners will build a basic to-do list app that allows users to:

1. Add new tasks
2. Mark tasks as completed
3. Remove tasks from the list

They will write vanilla JavaScript (no libraries) to practice everything they’ve learned in this module.

Features

HTML Structure

Basic starting point:

<div class="todo-app">
  <h2>To-Do List</h2>
  <input type="text" id="task-input" placeholder="Enter a new task" />
  <button id="add-task">Add Task</button>
  <ul id="task-list"></ul>
</div>

JavaScript Step-by-Step

1. Select Elements

const input = document.getElementById("task-input");
const addButton = document.getElementById("add-task");
const taskList = document.getElementById("task-list");

2. Add Event Listener to Button

addButton.addEventListener("click", function () {
  const taskText = input.value.trim();

  if (taskText !== "") {
    addTask(taskText);
    input.value = ""; // Clear input
  }
});

3. Create addTask() Function

function addTask(text) {
  const li = document.createElement("li");
  li.textContent = text;

  // Toggle completed class on click
  li.addEventListener("click", function () {
    li.classList.toggle("completed");
  });

  // Add delete button
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "✖";
  deleteBtn.classList.add("delete");
  deleteBtn.addEventListener("click", function (e) {
    e.stopPropagation(); // Prevent triggering the li click
    li.remove();
  });

  li.appendChild(deleteBtn);
  taskList.appendChild(li);
}

Optional CSS (for nicer visuals)

.completed {
  text-decoration: line-through;
  color: gray;
}

.delete {
  margin-left: 10px;
  background: none;
  border: none;
  color: red;
  cursor: pointer;
}

Tips for Learners

• Keep each function small and focused
• Always check for empty input before adding a task
• Use classList.toggle() for toggling states
• Use e.stopPropagation() to avoid event bubbling

Extension Ideas

Once students complete the basic version, you can challenge them with:

• Add a date/time stamp for each task
• Allow editing a task
• Save tasks in localStorage to persist across sessions
• Add filters (e.g. “Show All”, “Completed”, “Active”)

Mini Project Recap

By completing this mini project, learners will have built a real, working app using only JavaScript and the DOM. This gives them:

• Confidence in applying new skills
• A portfolio-ready beginner project
• A foundation to build more interactive web applications