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: Clone the repo

Go to your cohort's repo: javascript-cafe — select your cohort in the top-right corner of this page to see the link. On the repo page, click the green Code button and copy the SSH URL.

Clone it to your machine and navigate into it:

git clone <paste the SSH URL you copied>
cd javascript-cafe

Step 2: Create your branch

Use your full name in lowercase with a hyphen:

git checkout -b your-branch-name

Step 3: Open it in your code editor

Open the folder and read the README.md for context on what you're building.

Build with the YouTube playlist

JavaScript Cafe Walkthrough — 8 parts

Note: In part 1, the video shows forking dev-academy-foundations/javascript-cafe — but you'll be working from your own cohort's repo instead, with its own name/URL. Follow the written steps above: clone your cohort's repo directly and create a branch, instead of forking.

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 -A
git commit -m "describe what you just added"

When you're finished, push your work:

git push origin your-branch-name

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

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.