Project - To-Do List

To-Do List

Add

Clear All

In this project you will build a

To - Do List.

The tasks will be saved in an

You Will Learn

How to store items in an array

How to remove items from an array

How to display a list using JavaScript

First: Create the HTML

Example

< h2 > To - Do List </h2 >

// Create a task Array let tasks = [];

Add a Display Function

Example

// Function to display the list function displayTasks() {
let html = "";
for (let i = 0; i < tasks.length; i++) {
html += "<li>" + tasks[i] +
" <button onclick='removeTask(" + i + ")'>x</button></li>";
}
document.getElementById("list").innerHTML = html;
}
The displayTasks() function should be called whenever the list changes.

Add an Add Task Function

Example

// 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

Remove a task by index:

// 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 Crear All Function

Example

Remove everything:

function removeTask(i) {
tasks.splice(i, 1);
saveTasks();
displayTasks();
}

Function to Save a Task

Example

Save in localStorage:

// 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().