JavaScript Cafe Challenge
The Big Idea
The JavaScript Cafe is a guided challenge where you build an interactive app that generates customer orders and lets you fulfil them. It brings together everything from this sprint — DOM selection, event listeners, and updating the page with JavaScript.
Your Roadmap
| Section | Time | Required? |
|---|---|---|
| Set up the repo | 10 min | ⚑ Required |
| Build with the YouTube playlist | 3 h | ⚑ Required |
| Check your understanding with a chatbot | 15 min | ⚑ Required |
Set up the repo
Step 1: Fork the repo
Go to the javascript-cafe repository on GitHub. Click Fork in the top right to create your own copy.
Step 2: Clone it to your computer
git clone git@github.com:YOUR-USERNAME/javascript-cafe.git
Replace YOUR-USERNAME with your GitHub username.
Step 3: Open it in your code editor
Open the cloned folder and read the README.md for context on what you're building.
Build with the YouTube playlist
JavaScript Cafe Walkthrough — 8 parts
The embedded player above contains all 8 parts — it will move to the next part automatically when each one ends.
Prefer to watch on YouTube? Open the full playlist here.
Build along as you watch — pause and code each step before moving on.
Commit regularly as you go:
git add -Agit commit -m "describe what you just added"
When you're finished, push your work:
git push
Check your understanding with a chatbot
Work through these steps:
Step 1 — Share your code:
"Here's the JavaScript I wrote for the cafe challenge: [paste code]. Review it for readability and best practices. Ask me questions about my choices before suggesting anything."
Step 2 — Answer its questions in your own words. Explain why you wrote things the way you did. It's fine to say "I'm not sure — I followed the video."
Step 3 — Ask for one improvement:
"Based on my answers, what's the single most useful improvement I could make? Explain why, don't just show me the fix."
Step 4 — Apply it yourself. Make the change on your own, then commit it.
How to know you've nailed it
| Level | You can... | ||
|---|---|---|---|
| 🪨 | Intro Climb | Fork, clone, and get the app running in the browser | ⚑ Required |
| 🧗 | Core Ascent | Complete the challenge — orders generate and can be fulfilled as expected | ⚑ Required |
| 🏔️ | Summit | Explain what each part of your JavaScript does and apply at least one improvement from the chatbot review | ◎ Optional |
The Big Idea (revisited)
The Cafe challenge is the DOM primer in action — selecting elements, listening for events, and updating the page. If a step isn't working, go back to the relevant primer section and test the concept in isolation first.