Best matchRelated: Local StorageIntermediate
To do List
Save interface data and restore it between browser sessions.
Build a to do list →Note Taking App
Build a note taking app with HTML, CSS, and JavaScript while practicing local storage and click events.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
Local StorageClick EventsInput Events
01 — What you’ll build
Note Taking App
In this project, we’re going to build a note taking app using HTML, CSS, and JavaScript. You’ll see how to create editable notes and keep them saved between browser sessions. Along the way, you’ll practice local storage, click events, and input events, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Data saved in the browser
- Note Taking App 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
- Respond to input changes
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Create and add elements dynamically
Recommended knowledge: Basic HTML and CSS, JavaScript objects and arrays, JSON basics, Functions and Math.random.
Complete project files
Build It from the Source Code
This project saves its data between browser sessions.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Saved data stays in this browser through local storage.
Project structure
note-app/
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="heading">Note App</h1>
<p class="info-text">Double click on a note to remove it</p>
<div class="app" id="app">
<!-- <textarea
cols="30"
rows="10"
class="note"
placeholder="Empty Note"
></textarea> -->
<button class="btn" id="btn">+</button>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice local Storage, random values, and input values with these related projects.
Best match
Related: random valuesIntermediate
Multiplication App
Generate changing values and display a new result each time.
Build a multiplication app →
Related: input valuesIntermediate
Random Password Generator
Read form values and use them in the project logic.
Build a random password generator →Related: Local StorageBest match
To do List
Save interface data and restore it between browser sessions.
Build a to do listRelated: random values
Multiplication App
Generate changing values and display a new result each time.
Build a multiplication appRelated: input values
Random Password Generator
Read form values and use them in the project logic.
Build a random password generator