Lesson 8 · about 15 minutes

⚡ JavaScript: Turn On the Electricity

Your house has walls (HTML) and paint (CSS). Today you flip the power switch: JavaScript makes things HAPPEN when you click. Your page comes alive!

🎬 Watch first (90 seconds)

The third superpower

Remember the house?

HTML = the walls — what's on the page.
CSS = the paint — how it looks.
JavaScript = the electricity — it makes things HAPPEN.

Without electricity, a light switch is just a plastic brick on the wall. Click it — nothing. With electricity, click = light! JavaScript is the wire that connects a click to an action.

You only need two bricks and one spell:

A <button>Click me</button> — a brick that WANTS to be clicked. But right now it's not wired up.
Give it an id, like <button id="magic">. An id is like a class, but for ONE unique brick — like a name tag. Two bricks can wear the same class, but an id belongs to one brick only.
A <script> element at the very END of the body — that's where the wiring goes.

💡 The one idea of this lesson The magic 3-line spell that powers almost every button on the internet:

const btn = document.getElementById("magic");
btn.addEventListener("click", function () {
  document.getElementById("message").textContent = "You clicked!";
});

In kid language:

Line 1: "Hey browser, find the brick named magic and remember it as btn."
Line 2: "When someone clicks that brick, do the following..."
Line 3: "...find the brick named message and change the words inside it to You clicked!"

Find the brick → listen for the click → change another brick. That's it. When AI writes JavaScript for you later, you will see this EXACT pattern everywhere — now you can read it!

⚠️ Heads up: the little preview box below can't run JavaScript For safety, the "Try it right here" preview box has its electricity turned OFF — your button won't do anything when you click it there. Don't panic! The checker still reads your code and tells you if the spell is written right. To feel the REAL click magic, do the build steps in your myshop.html file and click the button in your real browser.

🛠️ Build it (the fun part)

🧪 Your mission Add a Buy now button to your shop. When a customer clicks it, a thank-you message appears. Your first REAL interactive page!

Open practice/myshop.html in VS Code.
Inside the <body>, where you want the button, add these two bricks (type them, don't copy-paste!):
```
<button id="buy">Buy now</button>
<p id="message"></p>
```
The <p> is empty on purpose — it's a blank sign waiting for words.

Just BEFORE the closing </body> tag, add the wiring (swap in YOUR product name!):

<script>
  const btn = document.getElementById("buy");
  btn.addEventListener("click", function () {
    document.getElementById("message").textContent =
      "🎉 Thanks for buying Robo Sneakers!";
  });
</script>

Save (⌘S), then open myshop.html in your browser and refresh (⌘R).
Click Buy now. Did the thank-you message pop in? YOU JUST WIRED ELECTRICITY INTO YOUR HOUSE. ⚡🎉

🕹️ Try it right here — the lesson checks your code!

Remember: the preview box can't run clicks, so the button will look sleepy there. Write the code anyway and press Check my code ✔ — the checker reads your spell and tells you if it's right.

🔨 Now break it!

Do these in your real myshop.html file, in the real browser. Predict what will happen BEFORE you refresh!

Meet the secret console. In your browser, right-click the page → Inspect → click the Console tab. This is where the browser whispers its problems. Now change getElementById("buy") to getElementById("bye"), save, refresh, click the button. Nothing happens — but look in the Console: a RED error message! The browser is telling you exactly what went wrong. Fix the id back.
Change the textContent message to something totally silly. Save, refresh, click. Your button now says whatever YOU want.
Power move: make the button paint the whole page instead. Change the line inside the function to:
```
document.body.style.backgroundColor = "gold";
```
Click the button — the whole page turns gold! JavaScript can change ANYTHING on the page: words, colors, sizes, everything.

⚠️ If the button does nothing (and no red error either) Check three things: is your <script> at the END of the body (after the button)? Did you save before refreshing? And do the ids match EXACTLY — buy and buy, not buy and Buy? Computers are very picky about spelling.

🎮 Quiz time

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

📚 Want more?

⭐ Best thing to read next MDN: Adding interactivity — the official beginner guide from Mozilla (the Firefox people). It walks through today's spell with a few extra tricks. Reading it counts as a lesson block! And keep the JS Cheat Sheet next to you — it has today's spell written down.