← Project - Event Listener Project - Modal Popup →

JS TutorialLesson #133

Project - To-Do List

In this project you will build a To-Do List.

To-Do List

Add

Clear All

In this project you will build a To-Do List.

You will add tasks, remove tasks, and clear all tasks.

The tasks will be saved in an Array in localStorage.

You Will Learn

How to store items in an array
How to remove items from an array
How to display a list using JavaScript
How to save and load data using localStorage

First: Create the HTML

First create an HTML page with:

An input field wid id="task"
A button for calling addTask()
A unordered list with id="list"
A button for calling clearAll()

Example

Example Code

html

Try it Yourself

## To-Do List

 Add

 Clear All

// Create a task Array

let tasks = [];

Add a Display Function

Example

Example Code

javascript

Try it Yourself

// Function to display the list

function displayTasks() {

  let html = "";

  for (let i = 0; i  " + tasks[i] +

    "  x  ";

  }

  document.getElementById("list").innerHTML = html;

}

The displayTasks() function should be called whenever the list changes.

Add an Add Task Function

Example

Example Code

javascript

Try it Yourself

// Function to Add a task

function addTask() {

  let taskInput = document.getElementById("task");

  let text = taskInput.value;

  if (text === "") {

    return;

  }

  tasks.push(text);

  taskInput.value = "";

  saveTasks();

  displayTasks();

}

Add a Remove Task Function

Example

Example Code

javascript

Try it Yourself

// Function to Remove a task

function removeTask(i) {

  tasks.splice(i, 1);

  saveTasks();

  displayTasks();

}

The Array method splice(i, 1) removes 1 item at position i.

Add a Clear All Function

Example

Example Code

javascript

Try it Yourself

// Function to Clear all tasks

function clearAll() {

  tasks = [];

  saveTasks();

  displayTasks();

}

Function to Save a Task

Example

Example Code

javascript

Try it Yourself

// Function to Save tasks

function saveTasks() {

  localStorage.setItem("tasks", JSON.stringify(tasks));

}

To store arrays in localStorage, we convert them to text using JSON.stringify().

Function to Load the Tasks

Example

Example Code

javascript

Try it Yourself

function loadTasks() {

  let saved = localStorage.getItem("tasks");

  if (saved !== null) {

    tasks = JSON.parse(saved);

  }

}

To load arrays, we convert them back using JSON.parse().

Final Project

Final HTML

Example Code

html

Try it Yourself

## To-Do List

 Add

 Clear All

// JavaScript goes here

Exercises

Exercise 1

Show an alert if the user tries to add an empty task.

Exercise 2

Allow the user to press Enter to add a task.

Exercise 3

Save the tasks automatically after every change (already done).

Add a "Saved!" message to show when saving.

Bonus Challenges (Level Up)

Try to improve the project:

Mark tasks as done (✔)
Filter tasks: All / Active / Done
Add "Edit task" functionality
Sort tasks alphabetically

JavaScript Projects > JavaScript Counter > A counter project with restore and save in localStorage. > JavaScript Event Listener > The counter project using event listener instead of onclick. > JavaScript To-Do List > A do-do list saved in an array in local storage. > JavaScript Modal Popup > A modal popup window that appears on top of the page. > JavaScript Form Validation > An HTML Form with form validation.

Interactive Code Examples

JS Example 1

html

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview: