Instructor
The workshop deck →
16 slides with three live demos built in. Arrow keys to drive.
Ctrl+P saves it as a PDF.
I do
Step 1 — One Pokémon
The three lines. Name, weight, type, and its picture on the page.
We do
Step 2 — The mystery silhouette
A list of 151, a random pick, and one line of CSS that hides it.
You do
Step 3 — Make it a game
Three TODOs: four guess buttons and a score.
(solution)
Finished
The complete game
Score, streak, personal best, keys 1–4, loading and error states.
Homework
Extra practice — a different API
Same three lines, somebody else's data. Proof the move transfers.
(solution)
The source tree
Standard static-site layout: pages at the root, styles in css/,
scripts in js/. No build step, no npm.
hello-api/ (the repo root)
├── index.html you are here
├── REF-week6-api-tutorial-deck.html the deck (self-contained)
│
├── css/
│ ├── theme.css the i.c.stars theme — every page uses it
│ └── game.css a few extras for the finished game
│
├── js/
│ ├── step-1.js I DO · marked EDIT 1-4 for the live demo
│ ├── step-2.js WE DO · list + random + silhouette
│ ├── step-3.js YOU DO · 3 TODOs
│ ├── step-3-solution.js answer key
│ ├── game.js the finished game: state -> render -> load
│ ├── extra-practice.js
│ └── extra-practice-solution.js
│
├── step-1-i-do.html each page is markup only...
├── step-2-we-do.html ...and loads one file from js/
├── step-3-you-do.html
├── step-3-you-do-solution.html
├── game.html
├── extra-practice-posts.html
└── extra-practice-posts-solution.html