Project - To-Do List
To-Do List
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
<!DOCTYPE html>
<html>
<body>
<h2>To-Do List</h2>
<input id="task" placeholder="New task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<button onclick="clearAll()">Clear All</button>
<script>
// Create a task Array
let tasks = [];
</script>
</body>
</html>
Try it Yourself »
Add a Display Function
Example
The displayTasks() function updates and displays the list.
// 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;
}
Note
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();
}
Note
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));
}
Note
To store arrays in localStorage, we convert them to text using JSON.stringify().
Function to Load the Tasks
Example
Load tasks from localStorage:
function loadTasks() {
let saved = localStorage.getItem("tasks");
if (saved !== null) {
tasks = JSON.parse(saved);
}
}
Note
To load arrays, we convert them back using JSON.parse().
Final Project
Final HTML
<!DOCTYPE html>
<html>
<body>
<h2>To-Do List</h2>
<input id="task" placeholder="New task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<button onclick="clearAll()">Clear All</button>
<script>
// JavaScript goes here
</script>
</body>
</html>
Final JavaScript
// Create a task Array
let tasks = [];
// Function to Display tasks
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;
}
// 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();
}
// Function to Remove a task
function removeTask(i) {
tasks.splice(i, 1);
saveTasks();
displayTasks();
}
// Function to Clear all tasks
function clearAll() {
tasks = [];
saveTasks();
displayTasks();
}
// Function to Save tasks
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
// Function to Load tasks
function loadTasks() {
let saved = localStorage.getItem("tasks");
if (saved !== null) {
tasks = JSON.parse(saved);
}
}
// Load and display tasks when page loads
loadTasks();
displayTasks()
Try it Yourself »
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 lovalStorage. - JavaScript Event Listener
The counter project using event listener instead of onclick. - JavaScript Do-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.
