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
Formatted code
<!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>Live preview
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;
}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
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 Clear All Function
Remove everything
function removeTask(i) {
tasks.splice(i, 1);
saveTasks();
displayTasks();
}Function to Save a Task
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().
Function to Load the Tasks
Load tasks from localStorage
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
Formatted code
<!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>Live preview
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.