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

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 video

JavaScript Cafe Walkthrough (55 min)

Build along as you watch — pause and code each step before moving on.

Commit regularly as you go:

git add -A
git commit -m "describe what you just added"

When you're finished, push your work:

git push

Check your understanding with a chatbot

This is not a one-shot prompt. Once you've finished the challenge, use your chatbot to get feedback on your code — but stay in the driver's seat.

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.

Why this works: AI feedback is only useful if you understand it. Answering questions first means you're learning the principle — not just copy-pasting a suggestion.

How to know you've nailed it

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.