Lesson 15 · JS Deep Dive boss · about 45 minutes

🎮 Mini Game: The Click Shop

Ever played Cookie Clicker? Today YOU build one — for your own product. This is the final boss of the JavaScript Deep Dive, and you already own every weapon it takes. No new spells. Just you, combining everything.

🎬 Watch first (90 seconds)

Wait... I can build a GAME?

Yes! Here's the secret nobody tells you: a clicker game is not one giant scary thing. It's four small things you ALREADY know, holding hands:

💡 The game plan (this is the whole game!)

Variables hold the game state — coins is a memory box that remembers your score, just like in Lesson 11. Change the box, and the game changes.
A function redraws the screen — one spell called redraw() whose only job is "look at the boxes, paint the page to match" (Lesson 13).
Ifs decide milestones — "IF coins is exactly 10, celebrate!" That's a fork in the road from Lesson 12.
An array holds the celebration messages — a shelf of prize messages, one per milestone, from Lesson 14.

Every real game — Minecraft, Mario, everything — is exactly this loop: player does something → variables change → screen redraws. Today you build that loop with your own hands.

🛠️ Build it (the boss fight)

🧪 Your mission Build The Click Shop: a giant button that sells one of your product per click, a coin counter that climbs, and celebration messages that pop at 10, 25, and 50 coins. Type everything — no copy-paste. Bosses respect typers.

New file! In VS Code, create practice/clicker.html. A game deserves its own house.
Type the skeleton you know by heart from Lesson 2: <!DOCTYPE html>, <html>, <head> with a <title>, and a <body>.
Inside the body, add the game's bricks — a headline, one big button, and two signs:
```
<h1>🛍️ The Click Shop</h1>
<button id="tap">Sell a Robo Sneaker!</button>
<p id="coins"></p>
<p id="msg"></p>
```
Swap in YOUR product name! The two <p> signs start empty — JavaScript will fill them.
A boss button must LOOK like a boss button. In the <head>, add a <style> and use your paint skills from Lesson 5 and Lesson 6:
```
<style>
  #tap {
    padding: 30px 50px;
    font-size: 28px;
    border-radius: 20px;
    background-color: gold;
    cursor: pointer;
  }
</style>
```
Make it huge. Make it silly. It should BEG to be clicked.
Now the brain. At the very end of the body (before </body>), open a <script> and create the game state — memory boxes from Lesson 11:
```
let coins = 0;
const messages = ["Nice!", "On fire! 🔥", "SHOP LEGEND 👑"];
```
coins uses let because it will change a LOT. The messages array (Lesson 14) is your prize shelf — spots 0, 1, and 2.
Write your own spell (Lesson 13) that paints the score onto the page:
```
function redraw() {
  document.getElementById("coins").textContent =
    "🪙 Coins: " + coins;
}
```
One job only: read the box, update the sign. That's what makes it a GOOD function.

Wire up the click, exactly like the 3-line spell from Lesson 8 — but now the click changes a VARIABLE:

const btn = document.getElementById("tap");
btn.addEventListener("click", function () {
  coins = coins + 1;
});

Milestones! INSIDE that click function, right after coins = coins + 1;, add the fork in the road from Lesson 12:

if (coins === 10) {
  document.getElementById("msg").textContent = messages[0];
} else if (coins === 25) {
  document.getElementById("msg").textContent = messages[1];
} else if (coins === 50) {
  document.getElementById("msg").textContent = messages[2];
}

Remember: === asks "exactly equal?" — three lines, not one. And arrays start counting at 0!

Last wiring: the screen must redraw after EVERY click, and once when the game loads (so it doesn't start blank). Add redraw(); as the LAST line inside the click function, and ALSO once at the very bottom of the script:
```
  redraw();   // ← last line inside the click function
});

redraw();     // ← once at the start, so "Coins: 0" shows right away
```
PLAY IT. Save (⌘S), open clicker.html in the browser, and click like crazy. Watch the coins climb. Hit 10 — did "Nice!" appear? Keep going to 25... to 50... You are playing a game that did not exist an hour ago, because YOU invented it. 🎉

⚠️ If the game is broken (every game dev's daily life) Number stuck at nothing? You probably forgot the redraw(); at the bottom of the script. Number never moves? Check that redraw(); is INSIDE the click function too, and that your ids match EXACTLY (tap, coins, msg). Milestone never shows? Count your = signs — comparing needs ===, three of them. And when all else fails: right-click → Inspect → Console. The red text is the browser telling you where it hurts.

😈 Extra credit — dares for shop legends

No steps this time. Just dares. You have every tool — figure it out!

The upgrade shop: add a second button that costs 10 coins to buy an upgrade. When clicked: if (coins >= 10) then subtract 10 coins and celebrate... else show "Not enough coins! 😅". A real in-game shop!
Talking button: make the big button's own words change with textContent — maybe it says something different after 20 clicks?
Level-up colors: make each milestone ALSO change the page's background color with document.body.style.backgroundColor. Gold at 10, orange at 25, whatever screams LEGEND at 50.

🕹️ Try it right here — this preview RUNS your game!

Big news: unlike earlier lessons, this preview box has its electricity ON. Whatever you type actually RUNS. Build a mini clicker below, then click your button in the preview and watch your number climb. Then press Check my code ✔. (One rule: never use alert() in here — the preview re-runs your code on every keystroke and it would pop up nonstop!)

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

🏆 You beat the Deep Dive!

✅ Boss checklist

My game counts clicks and shows the coins on screen
At least one milestone message appears at the right number
I attempted the upgrade-button dare (even if it fought back!)

Now the victory lap: show your teacher the game — let them click it! — and report your favorite bug you fixed along the way. (Every game dev has a favorite bug story. It's the law.) Your teacher will record your progress and suggest what's next. Some ideas to dream about: publishing your page on the real internet, making it look great on a phone, or adding sounds to your clicker. 🔊

📚 Want more?

⭐ Best thing to read next MDN: Dynamic scripting with JavaScript — the whole official JavaScript learning path from Mozilla. Here's the amazing part: after lessons 11–15, you can now ACTUALLY READ it. Variables, ifs, functions, arrays, loops, events — you've met them all. It's not a wall of mystery anymore; it's a map of places you've been, plus new lands to explore.