How to Build a Todo App with HTML, CSS & JavaScript (LocalStorage Included)

Building a Todo App is one of the best ways to learn JavaScript. It combines HTML, CSS, DOM manipulation, event handling, and LocalStorage into a practical project that helps you understand how modern web applications work.

In this tutorial, you'll learn how to build a responsive Todo App using HTML, CSS, and JavaScript. Users will be able to add tasks, mark them as completed, delete tasks, and save everything using LocalStorage so the data remains available even after refreshing the page.

What You'll Build

• Add new tasks
• Delete tasks
• Mark tasks as completed
• Save tasks using LocalStorage
• Automatically load saved tasks after refreshing the page
• Responsive design for desktop and mobile devices

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)
• DOM Manipulation
• LocalStorage API

Why Build a Todo App?

A Todo App teaches many essential JavaScript concepts that every frontend developer should understand. Instead of learning isolated functions, you'll see how everything works together to create a complete web application.

During this project, you'll practice:

• Selecting HTML elements with JavaScript
• Handling button click events
• Creating HTML elements dynamically
• Appending elements to the page
• Removing elements from the DOM
• Using arrays to manage data
• Saving data with LocalStorage
• Loading saved data when the page refreshes

Step 1: Create the HTML Structure

First, create the layout of the Todo App. The interface contains an input field where users type their tasks, an Add Task button, and an unordered list that displays every task.

This clean structure makes the application easy to maintain and allows JavaScript to update the task list dynamically.

Step 2: Style the Application with CSS

After creating the HTML structure, style the application using CSS. A modern dark theme with rounded corners, shadows, spacing, and hover effects creates a professional appearance.

Responsive CSS ensures the Todo App works smoothly on desktops, tablets, and smartphones.

Step 3: Select DOM Elements

Before JavaScript can interact with the page, it needs references to the HTML elements.

const input = document.getElementById("input");
const addBtn = document.getElementById("addBtn");
const taskList = document.getElementById("taskList");

These references allow JavaScript to read user input, respond to button clicks, and insert new tasks into the list.

Step 4: Add New Tasks

When the user clicks the Add Task button, JavaScript reads the text entered into the input field.

Always validate the input before adding a task. Empty tasks should not be saved.

if(input.value.trim() === ""){
    alert("Please enter a task.");
    return;
}

Once validation passes, the task is added to an array, displayed on the page, saved to LocalStorage, and the input field is cleared for the next task.

Step 5: Create Tasks Dynamically

Instead of writing HTML manually for every task, JavaScript creates list items dynamically.

const li = document.createElement("li");
li.textContent = task;
taskList.appendChild(li);

This demonstrates one of the most powerful features of JavaScript: dynamically modifying the Document Object Model (DOM).

Step 6: Delete Tasks

Each task includes its own Delete button. Clicking the button removes the task from the page and updates LocalStorage immediately.

Keeping the array synchronized with the displayed list ensures your data remains accurate after refreshing the browser.

Step 7: Mark Tasks as Completed

Users can click a task to mark it as completed.

li.classList.toggle("completed");

The completed class changes the appearance of the task using CSS.

.completed{
    text-decoration: line-through;
    opacity:0.7;
}

This feature provides visual feedback and improves the overall user experience.

Step 8: Save Tasks with LocalStorage

Normally, refreshing a webpage removes all dynamically created content. LocalStorage solves this problem by storing data directly inside the browser.

JavaScript arrays cannot be stored directly, so they must first be converted into JSON.

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

When the page loads, convert the JSON string back into a JavaScript array.

const tasks = JSON.parse(localStorage.getItem("tasks")) || [];

This allows every task to remain available even after closing and reopening the browser.

Step 9: Load Saved Tasks Automatically

When the webpage opens, loop through every saved task and recreate it on the screen.

for(const task of tasks){
    createTask(task);
}

This creates a seamless user experience because previously added tasks appear automatically.

Understanding LocalStorage

LocalStorage is a browser API that stores data as key-value pairs. Unlike variables, LocalStorage data remains available after refreshing the page or restarting the browser.

Common LocalStorage methods include:

• setItem() — Save data.
• getItem() — Retrieve data.
• removeItem() — Remove a single item.
• clear() — Remove everything from LocalStorage.

Because LocalStorage only stores strings, developers commonly use JSON.stringify() and JSON.parse() when working with arrays and objects.

Key JavaScript Concepts You Learned

• Variables and Arrays
• Functions
• Arrow Functions
• Event Listeners
• DOM Manipulation
• createElement()
• appendChild()
• remove()
• classList.toggle()
• LocalStorage API
• JSON.stringify()
• JSON.parse()
• Loops
• Input Validation

Possible Improvements

Once you've finished the basic Todo App, consider adding more advanced features.

• Edit existing tasks
• Task categories
• Due dates
• Search tasks
• Filter completed tasks
• Dark and light mode
• Drag and drop sorting
• Task priorities
• Animations
• Unique IDs for each task

These enhancements will improve your JavaScript skills while making the application more useful.

Final Thoughts

Creating a Todo App is one of the most valuable beginner JavaScript projects because it combines multiple frontend concepts into one practical application. Throughout this project, you learned how to build interactive interfaces, manipulate the DOM, respond to user actions, store data with LocalStorage, and create a responsive user experience.

Mastering projects like this builds a strong foundation for advanced JavaScript frameworks such as React, Vue, and Angular. Continue practicing by adding new features and experimenting with different UI designs to strengthen your frontend development skills.

Frequently Asked Questions (FAQ)

Is a Todo App a good JavaScript beginner project?

Yes. A Todo App teaches DOM manipulation, event handling, LocalStorage, arrays, functions, and dynamic UI updates, making it one of the best beginner JavaScript projects.

Why use LocalStorage in a Todo App?

LocalStorage allows tasks to remain saved even after the browser is refreshed or closed, providing a better user experience.

Can I build this project without any frameworks?

Absolutely. This Todo App is built entirely with HTML, CSS, and vanilla JavaScript without using React, Vue, Angular, or any external libraries.

What JavaScript concepts are required?

You should understand variables, functions, arrays, event listeners, DOM manipulation, loops, and LocalStorage.