JavaScript30
A virtual drum kit powered by your keyboard.
An analog clock powered by JavaScript and CSS animations.
A customizable web page that uses CSS variables to allow the user adjust the page's style properties along a spectrum.
Exercises that make use of JavaScript's array methods.
A gallery of images whose size and other features the user can manipulate via CSS flexbox properties.
6. Type Ahead
Search for the name of a city to find its population. The web page will "type ahead" to show you city names that include your character string as you type.
Exercises that make use of JavaScript's array methods.
8. HTML5 Canvas
A blank canvas on which the user can write/draw multicolored messages/images.
Exercises that make use of the console in the browser.
10. Checkboxes
Use the "Shift" key to check multiple boxes without clicking each one individually.
11. Video Player
A custom video player with play, pause, skip, scrub, and volume and speed adjustment functions.
Type the secret code for a surprise!
A webpage that uses JavaScript and CSS animations to give images a "slide in" effect as the user scrolls to bring them into view.
Exercises that highlight the distinction between copies and mere references saved as variables in JavaScript.
15. LocalStorage
A user-editable menu/checklist that is saved to LocalStorage when changed so that it persists even if the user reloads the page.
A webpage that uses JavaScript and CSS animations to generate a moving text shadow effect which follows the motion of the user's mouse.
An exercise that makes use of a regular expression to ignore articles at the beginnings of names when sorting alphabetically.
18. Adding Up Times with Reduce
An exercise that makes use of JavaScript's "reduce" method to add up the total running time of a list of videos.
19. Webcam Interface
A webcam interface that allows the user to take pictures using various backgrounds and filters.
A webpage that uses speech recognition to take dictation.
21. Geolocation
A webpage that shows you your current speed and coordinates.
22. Follow Along Link Highlighter
A webpage that uses JavaScript and CSS animations to generate a highlighter effect which follows the cursor as it moves from one link to another.
23. Speech Synthesis
A webpage that uses speech synthesis to read user-editable text.
24. Sticky Nav
A webpage featuring a "sticky" nav bar which remains visible at the top of the browser window even as the user scrolls down.
A webpage that demonstrates how event propagation works and how it can be manipulated in JavaScript.
26. Follow Along Dropdown Menu
A webpage that uses JavaScript and CSS animations to generate a dynamic dropdown menu element which follows the cursor and whose content changes accordingly as it moves from one nav tab to another.
27. Click and Drag
A webpage that allows the user to click and drag across the page as an alternative to conventional scrolling.
A video player interface which allows the user to adjust the video’s playback speed along a spectrum as it plays.
29. Countdown Clock
A timer that performs a countdown in seconds from a user-selected time interval to zero.
30. Whack-a-Mole
A whack-a-mole-style game in which the user is given a set amount of time to click/“whack” as many of the critters as possible.