Best matchLocal StorageIntermediate
Note Taking App
Create editable notes and keep them saved in the browser.
Build a note taking app →To do List
Build a to do list with HTML, CSS, and JavaScript while practicing local storage and click events.
Intermediate30–45 minutesHTML5CSS3JavaScript
You'll practice
Local StorageClick EventsDOM Selection
01 — What you'll build
To do List
In this project, we’re going to build a to do list using HTML, CSS, and JavaScript. You’ll see how to connect user interactions to visible changes on the page. Along the way, you’ll practice local storage, click events, and DOM selection, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Data saved in the browser
- To do List interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You'll practice
- Save and restore data with localStorage
- Handle user clicks
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Update content on the page
- Create and add elements dynamically
Recommended knowledge: Basic HTML and CSS, JavaScript objects and arrays, JSON basics, JavaScript arrays and array methods.
Complete project files
Build It from the Source Code
This project saves its data between browser sessions.
- 1Create three files
- 2Copy the code
- 3Run
index.html
Before you run it
- Saved data stays in this browser through local storage.
- Keep an internet connection available for external assets.
Project structure
to-do-list/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form class="form">
<input
type="text"
class="input"
placeholder="Enter your task"
autocomplete="off"
/>
<ul class="list">
<!-- <li>
Buy Milk <i class="fas fa-check-square"></i
><i class="fas fa-trash"></i>
</li>
<li class="checked">
Call David <i class="fas fa-check-square"></i
><i class="fas fa-trash"></i>
</li> -->
</ul>
</form>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice local Storage, input values, and array methods with these related projects.
Best match
input valuesIntermediate
Multiplication App
Read form values and use them in the project logic.
Build a multiplication app →
array methodsIntermediate
Electronic Drum Kits
Transform collections of data into dynamic page content.
Build an electronic drum kits →Related: Local StorageBest match
Note Taking App
Create editable notes and keep them saved in the browser.
Build a note taking appRelated: input values
Multiplication App
Read form values and use them in the project logic.
Build a multiplication appRelated: array methods
Electronic Drum Kits
Transform collections of data into dynamic page content.
Build an electronic drum kits