Web Basics
To-Do List
Keep a list, tick things off, and have it still be there after a refresh.
The classic first app. Add items, check them done, delete them — and because it saves to your browser, your list survives a page reload. You'll meet arrays, re-rendering, and localStorage.
What's inside
- Add, complete and delete items
- State lives in an array; the screen re-renders from it
- Saves to localStorage so it persists across refreshes
- A live "items left" counter
- Light & dark mode, no dependencies
Quickstart
$ curl -LO https://devai.io/downloads/todo-list.zip$ unzip todo-list.zip && cd todo-list$ open index.html # or just double-click the file
about this tutorial
A devai.io starter tutorial — the smallest app that teaches state and persistence together.
More in Web Basics
view allWeb Basics
Tip Calculator
Your first interactive page: type a bill, see the tip update live.
HTMLCSSJavaScript
View template zip + preview
Web Basics
Countdown Timer
Count down to any moment — days, hours, minutes, seconds, ticking live.
HTMLCSSJavaScriptDates
View template zip + preview
Web Basics
Dark Mode Toggle
A theme switch that remembers your choice — the feature every site wants.
HTMLCSSJavaScriptlocalStorage
View template zip + preview