Building a Mini Project

In this final lesson, we will bring together everything you have learned — variables, functions, arrays, objects, DOM manipulation, events, and asynchronous JavaScript — to build a To-Do List application from scratch.

Project Overview

Our to-do list will support:

Adding new tasks
Marking tasks as complete (with a strikethrough)
Deleting tasks
Persisting tasks in localStorage so they survive page refreshes
Showing a task count

Step 1: The HTML Structure

Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Arial, sans-serif;
      max-width: 500px;
      margin: 40px auto;
      padding: 0 20px;
      background: #f5f5f5;
    }
    h1 { text-align: center; margin-bottom: 20px; color: #333; }
    .input-row {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .input-row input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 6px;
    }
    .input-row button {
      padding: 10px 20px;
      font-size: 16px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    .input-row button:hover { background: #45a049; }
    ul { list-style: none; }
    li {
      display: flex;
      align-items: center;
      padding: 12px;
      background: white;
      margin-bottom: 8px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    li.completed span { text-decoration: line-through; color: #999; }
    li span { flex: 1; cursor: pointer; }
    li button {
      background: #e74c3c;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
    }
    li button:hover { background: #c0392b; }
    #task-count { text-align: center; margin-top: 16px; color: #666; }
  </style>
</head>
<body>
  <h1>To-Do List</h1>
  <div class="input-row">
    <input type="text" id="task-input" placeholder="Add a new task..." />
    <button id="add-btn">Add</button>
  </div>
  <ul id="task-list"></ul>
  <p id="task-count"></p>
  <script src="app.js"></script>
</body>
</html>

Step 2: Core Data and State Management

Create an app.js file. We start by loading any saved tasks from localStorage:

// --- State ---
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// --- DOM References ---
const taskInput = document.getElementById("task-input");
const addBtn = document.getElementById("add-btn");
const taskList = document.getElementById("task-list");
const taskCount = document.getElementById("task-count");

Key Concepts Used

const and let for variable declarations.
JSON.parse to convert a JSON string back into an array.
|| (logical OR) for a default value if nothing is stored.
document.getElementById to select DOM elements.

Step 3: Saving to localStorage

function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

Every time we modify the tasks array, we call saveTasks() so the data persists.

Step 4: Rendering the Task List

This function clears the list and rebuilds it from the tasks array:

function renderTasks() {
  // Clear the current list
  taskList.innerHTML = "";

  // Build each task item
  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    if (task.completed) {
      li.classList.add("completed");
    }

    // Task text (clicking toggles completion)
    const span = document.createElement("span");
    span.textContent = task.text;
    span.addEventListener("click", () => toggleTask(index));

    // Delete button
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.addEventListener("click", () => deleteTask(index));

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

  updateCount();
}

Key Concepts Used

forEach with index to iterate over the array.
document.createElement and appendChild for DOM manipulation.
classList.add for conditional styling.
Arrow functions as event listeners.
Closures — each listener captures its own index.

Step 5: Adding a Task

function addTask() {
  const text = taskInput.value.trim();
  if (text === "") return; // ignore empty input

  tasks.push({
    text: text,
    completed: false,
  });

  taskInput.value = "";   // clear the input field
  taskInput.focus();      // refocus for convenience
  saveTasks();
  renderTasks();
}

Key Concepts Used

.trim() to remove whitespace.
Guard clause (if (text === "") return) for early exit.
.push() to add to the array.
Object literal { text, completed }.

Building a Mini Project

Building a Mini Project

Project Overview

Step 1: The HTML Structure

Step 2: Core Data and State Management

Key Concepts Used

Step 3: Saving to localStorage

Step 4: Rendering the Task List

Key Concepts Used

Step 5: Adding a Task

Key Concepts Used

Step 6: Toggling and Deleting Tasks

More in Programming