JavaScript Mini Project – To-Do List App (JS-10)

Track: JavaScript Basics
Lesson: JS-10 / JS-10

🎯 Project Goal

By the end of this project, you will build a fully functional To-Do List application using JavaScript, applying concepts such as variables, functions, arrays, DOM manipulation, and event handling.

📌 Concepts Used

This project uses:

Variables & Data Types
Functions
Arrays & Array Methods
DOM Manipulation
Event Handling

If you have completed JS-01 to JS-09, you are fully ready.

📘 Project Overview

The To-Do List app will allow users to:

Add new tasks
Display tasks in a list
Mark tasks as completed
Delete tasks

This is a real beginner-level project often asked in interviews and coding practice.

🧱 Step 1: Basic HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List App</title>
  <style>
    body { font-family: Arial; }
    .completed { text-decoration: line-through; color: gray; }
  </style>
</head>
<body>

  <h2>My To-Do List</h2>

  <input type="text" id="taskInput" placeholder="Enter a task">
  <button id="addBtn">Add Task</button>

  <ul id="taskList"></ul>

</body>
</html>

🧠 Step 2: JavaScript Logic

Add this script below the HTML or inside <script> tags.

Selecting Elements

let taskInput = document.getElementById("taskInput");
let addBtn = document.getElementById("addBtn");
let taskList = document.getElementById("taskList");

🔹 Step 3: Store Tasks in an Array

let tasks = [];

🔹 Step 4: Add New Task

addBtn.addEventListener("click", function () {
  let taskText = taskInput.value;

  if (taskText === "") {
    alert("Please enter a task");
    return;
  }

  tasks.push(taskText);
  displayTasks();
  taskInput.value = "";
});

🔹 Step 5: Display Tasks

function displayTasks() {
  taskList.innerHTML = "";

  tasks.forEach(function (task, index) {
    let li = document.createElement("li");
    li.innerText = task;

    let deleteBtn = document.createElement("button");
    deleteBtn.innerText = "❌";

    deleteBtn.addEventListener("click", function () {
      tasks.splice(index, 1);
      displayTasks();
    });

    li.addEventListener("click", function () {
      li.classList.toggle("completed");
    });

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

🔹 Step 6: How the App Works

Tasks are stored in an array
forEach() loops through tasks
DOM elements are created dynamically
Event listeners handle user actions

✨ Optional Enhancements

Try adding:

Task counter
Clear all button
Store tasks using localStorage
Edit task feature

These upgrades prepare you for React apps later.

⚠️ Common Mistakes

Forgetting to clear input
Not updating UI after array change
Attaching event listeners incorrectly
Not validating empty input

🧠 Practice Tasks

Prevent duplicate tasks
Add a “Clear All” button
Show number of pending tasks
Save tasks using localStorage

🧪 Challenge Mode

Enhance the app so that:

Completed tasks stay completed after page refresh
Tasks are loaded automatically on page load

(Hint: localStorage.getItem())

📝 Final Summary

Built a complete JavaScript project
Used arrays, functions, and DOM
Learned event-driven programming
Created a real interactive app

🎉 Congratulations! You’ve completed the JavaScript Basics track.

🚀 What’s Next?

Move to React Basics
Add quizzes and badges
Convert this project into React version
Build MERN applications

🏅 Quiz & Badge

A final quiz and project badge will be enabled soon.