Level 2
Intermediate
Arrays, state, and timing
- Arrays
- State
- Timers
- Dates
- localStorage
About this level
These projects keep track of more than one thing at a time. You'll store data in arrays and objects, keep variables that remember what the app is doing, run code on a timer, and save data in the browser so it's still there tomorrow. They're the building blocks of real apps: a photo slider, a carousel, a calculator, a countdown, a to-do list, and a live search.
Before you start
Finish the Beginner projects first, or be comfortable selecting elements and adding event listeners.
What you'll learn
- Keep an app's state in variables, arrays, and objects
- Loop over and reshape data with forEach, map, and filter
- Run and stop code on a timer with setInterval
- Work with dates and times
- Save data in the browser with localStorage and JSON
The projects
- 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