The path
15 projects, from simple to advanced. Each one adds an idea or two to the last.
Your progress
0 of 15 done
Saved in this browser only.
- 01
Counter
Count up, down, and back to zero, with the number announced to screen readers.
9 ideas
- 02
Color Flipper
Flip the page to a random colour in HEX, RGB, or HSL, and see its code.
11 ideas
- 03
Accordion
Show and hide answers three ways, from no JavaScript at all to one panel open at a time.
14 ideas · 3 ways
- 04
Modal Box
Open a box on top of the page three ways, from no JavaScript to a full modal with the dialog element.
18 ideas · 3 ways
- 05
Tabs
Switch between panels three ways, from radio buttons with no JavaScript to tabs that work fully with a keyboard.
20 ideas · 3 ways
Level 2
Intermediate
Arrays, state, and timing
- Arrays
- State
- Timers
- Dates
- localStorage
About this level →0/6 done- 06
Image Slider
Slide through photos with previous and next buttons, and dots to jump straight to any photo.
15 ideas
- 07
Carousel
A row of cards that moves on its own, with buttons to step through it and to pause.
10 ideas
- 08
Calculator
Add, subtract, multiply, and divide with buttons or the keyboard, without ever using eval.
12 ideas
- 09
Countdown Timer
Count down to any date and time, second by second, and say when time's up.
12 ideas
- 10
To-do List
Add, tick off, and delete tasks that are still there when you come back.
12 ideas
- 11
Search Filter
Filter a list as you type, first by hiding what doesn't match, then by drawing results from data.
12 ideas · 2 ways
- 12
Form Validation
Check a sign-up form before it's sent, first with the browser's own checks, then with clear messages of your own.
17 ideas · 2 ways
- 13
Quiz App
Answer questions one at a time, see straight away if you were right, and get a score at the end.
12 ideas
- 14
Expense Tracker
Track what you spend, with a running total and totals by category that update as you go.
12 ideas
- 15
Random Quote
Fetch a new quote from a public API, with loading and error states, and copy it with one click.
10 ideas