JavaScript To-Do App Project for Beginners � Full Code

Tutorials � JavaScript Tutorial � JavaScript Projects � JavaScript To-Do App

Project Overview

This JavaScript To-Do App project teaches beginners how to build a real interactive web application. You will create a task input field, add tasks to a list, delete tasks, mark tasks as completed, and save tasks in the browser using localStorage.

This project is perfect after learning JavaScript variables, arrays, functions, DOM manipulation, and events.

What You Will Learn

How to select HTML elements with JavaScript
How to handle button click events
How to store tasks in an array
How to display tasks dynamically in the browser
How to delete and complete tasks
How to save data using localStorage

Complete JavaScript To-Do App Code

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript To-Do App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 30px;
    }

    .todo-box {
      max-width: 500px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
    }

    input {
      width: 70%;
      padding: 10px;
    }

    button {
      padding: 10px;
      cursor: pointer;
    }

    li {
      margin: 10px 0;
      padding: 10px;
      background: #eef2ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .done {
      text-decoration: line-through;
      color: gray;
    }
  </style>
</head>

<body>

<div class="todo-box">
  <h1>To-Do App</h1>

  <input type="text" id="taskInput" placeholder="Enter a task">
  <button onclick="addTask()">Add</button>

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

<script>
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

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

function renderTasks() {
  const taskList = document.getElementById("taskList");
  taskList.innerHTML = "";

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

    const span = document.createElement("span");
    span.textContent = task.text;

    if (task.completed) {
      span.classList.add("done");
    }

    span.onclick = function() {
      toggleTask(index);
    };

    const deleteButton = document.createElement("button");
    deleteButton.textContent = "Delete";
    deleteButton.onclick = function() {
      deleteTask(index);
    };

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

function addTask() {
  const input = document.getElementById("taskInput");
  const taskText = input.value.trim();

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

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

  input.value = "";
  saveTasks();
  renderTasks();
}

function toggleTask(index) {
  tasks[index].completed = !tasks[index].completed;
  saveTasks();
  renderTasks();
}

function deleteTask(index) {
  tasks.splice(index, 1);
  saveTasks();
  renderTasks();
}

renderTasks();
</script>

</body>
</html>

How This To-Do App Works

The app starts by loading saved tasks from localStorage. If no saved tasks exist, it creates an empty array. When the user adds a task, JavaScript pushes a new object into the array and then updates the task list on the page.

The renderTasks() function clears the existing list and rebuilds it from the current task array. This keeps the page synchronized with the stored data. The app also allows users to mark tasks as completed and delete tasks from the list.

Step-by-Step Guide

Create a new file named todo-app.html.
Copy the complete code above.
Paste it into the file.
Open the file in your browser.
Type a task and click the Add button.
Click a task to mark it as completed.
Click Delete to remove a task.

Project Output

When finished, the user will see a simple To-Do List interface with an input box, an Add button, and a list of tasks. Tasks remain saved even after refreshing the browser because the project uses localStorage.

Example output: Add �Learn JavaScript�, �Practice DOM�, and �Build a project� � the tasks appear in a list and can be completed or deleted.

Real-World Use Case

To-do apps are used in productivity tools, project management dashboards, reminder systems, and task tracking applications. This beginner project teaches the same core ideas used in larger apps: storing data, updating the interface, and responding to user actions.

Improve This Project

Add an Edit button for each task
Add task categories such as Work, Study, and Personal
Add task due dates
Add a filter for All, Completed, and Pending tasks
Improve the design with CSS
Convert the project into a React app later

Common Mistakes

Forgetting to call renderTasks() after changing the task array
Not saving changes to localStorage
Using duplicate IDs in HTML
Forgetting to trim empty input values
Confusing array index numbers when deleting tasks

Practice Exercise

Try adding a task counter that displays how many tasks are still pending. Then add a �Clear Completed� button to remove all completed tasks at once.

More JavaScript Projects

JavaScript Calculator | JavaScript Quiz App | Password Generator | Stopwatch

FAQ About JavaScript To-Do App

Is this To-Do App project good for beginners?

Yes. It uses beginner-friendly JavaScript concepts such as variables, arrays, functions, DOM manipulation, and events.

Does this project save tasks?

Yes. The project uses browser localStorage, so tasks remain saved after refreshing the page.

Can I use this project in my portfolio?

Yes. You can improve the design and add more features before adding it to your portfolio.

What should I learn before building this project?

You should understand basic JavaScript syntax, arrays, functions, DOM selection, and click events.

Next Step

Continue with the JavaScript Calculator Project or review JavaScript DOM Manipulation.