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>
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;
}
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
// 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 Clear All Function
Example
// Function to Clear all tasks
function clearAll() {
tasks = [];
saveTasks();
displayTasks();
}
Function to Save a Task
Example
// 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
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>
Exercise 1
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
Note: 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.