nasa-photo-proxy
Template
NASA's Astronomy Picture of the Day, fetched through your own tiny Node server. The same "fetch some data and show it" idea as the browser tutorials — but now with a real backend, so you learn why apps have servers: to keep secrets like API keys out of
Updated 2026-09-27 21:27:09 +02:00
modal-dialog
Template
A pop-up done the modern way — with the browser's built-in element instead of a pile of hand-rolled JavaScript. Open it, then close it with a button, the Escape key, or a click on the dimmed backdrop.
Updated 2026-09-27 21:27:07 +02:00
image-slideshow
Template
A slideshow you can click through — prev, next and dots — or let play by itself. It's all about one idea: keep a list and an index into it, and wrap the index around the ends.
Updated 2026-09-27 21:27:02 +02:00
github-profile
Template
Type a GitHub username and get their public profile as a card — avatar, bio, repos and followers. The cleanest first taste of talking to a real API with fetch().
Updated 2026-09-27 21:26:59 +02:00
form-validation
Template
A sign-up form that checks each field and explains exactly what's wrong, right under the field that's wrong. It teaches form events, a readable regex, and how to give feedback that screen readers announce too.
Updated 2026-09-27 21:26:58 +02:00
faq-accordion
Template
A classic FAQ: click a question and its answer slides open while the others close. It teaches showing and hiding content the accessible way — real s, aria-expanded, and a pure-CSS animation.
Updated 2026-09-27 21:26:54 +02:00
dictionary-lookup
Template
Type a word and read its pronunciation and definitions, grouped by part of speech, from a free dictionary API. It's your lesson in digging data out of real JSON — arrays tucked inside objects tucked inside arrays.
Updated 2026-09-27 21:26:53 +02:00
dark-mode-toggle
Template
A light/dark theme switch done the proper way — CSS variables, one attribute on <html>, and a remembered choice. It starts from the visitor's system setting and never flashes the wrong theme on load.
Updated 2026-09-27 21:26:50 +02:00
currency-converter
Template
Type an amount, pick two currencies, and see the conversion at the latest European Central Bank rate, from the free Frankfurter API. It teaches building URLs with query parameters, and filling dropdowns from data an API gives you.
Updated 2026-09-27 21:26:47 +02:00
crypto-ticker
Template
A little price board for Bitcoin, Ethereum and friends that refreshes itself every 30 seconds, with 24-hour changes in green and red. It teaches polling: asking an API again on a timer.
Updated 2026-09-27 21:26:45 +02:00
country-explorer
Template
Search any country and get a tidy fact card — flag, capital, region, population, languages and currencies — from the free countries.dev API. It's a lesson in pulling apart a rich, real-world JSON object.
Updated 2026-09-27 21:26:42 +02:00
countdown-timer
Template
A live countdown to any moment you pick — days, hours, minutes and seconds, ticking away. It's your first look at doing something on a timer with setInterval, and at doing arithmetic with dates.
Updated 2026-09-27 21:26:40 +02:00
color-picker
Template
Pick a color and instantly see its HEX and RGB codes, a big preview and a palette of lighter and darker shades — then copy any of them with one click. It teaches the color input, how HEX and RGB relate, and the Clipboard API.
Updated 2026-09-27 21:26:37 +02:00
char-counter
Template
A tweet-style text box that counts down as you type, turns amber near the limit and red past it, fills a little progress ring, and disables the Post button once you've gone over. It teaches live feedback: one number, drawn several ways.
Updated 2026-09-27 21:26:36 +02:00