Lesson 12 · JavaScript Deep Dive · about 15 minutes

🚦 Decisions: if / else

Until now your code always did the SAME thing. Today it learns to choose: green light — go this way, red light — go that way. Your shop is about to get smart!

🎬 Watch first (90 seconds)

Code at the traffic light

Imagine your code driving down the street. It reaches a traffic light and asks a question: "Is the light green?"

• YES → drive on! 🟢
• NO → stop and do something else. 🔴

In JavaScript, that traffic light is called if / else. It looks like this:

if (question) {
  // do this when the answer is YES
} else {
  // do that when the answer is NO
}

The question goes in the round brackets ( ). To ask questions, you use comparers — tiny math-looking symbols:

• === — "are these two things exactly equal?"
• > — "is the left one bigger?"
• < — "is the left one smaller?"

So if (stock > 0) means: "Hey browser, is the number in the stock box bigger than 0? If yes, do the stuff in the curly brackets."

stock = 3      // = PUTS the number 3 into the box (changes it!)
stock === 3    // === ASKS "does the box hold exactly 3?" (just looks!)

Want MORE than two paths? Chain lights together with else if:

if (stock > 1) {
  // lots left
} else if (stock === 1) {
  // exactly one left — "LAST ONE!"
} else {
  // zero left — sold out
}

The browser checks the questions from top to bottom and runs the FIRST one that answers YES. Like walking past traffic lights until one turns green.

🛠️ Build it (the fun part)

1. Open practice/myshop.html in VS Code. Find your Buy button script from lesson 8 (the one with addEventListener).
2. Just above the addEventListener line, create a memory box for your stock (type it, don't copy-paste!):

   let stock = 3;

   We use let (not const) because this number is going to CHANGE — you're going to sell things!
3. Now replace what happens inside the click function with a traffic light:

   btn.addEventListener("click", function () {
     if (stock > 0) {
       stock = stock - 1;
       document.getElementById("message").textContent =
         "🎉 Bought! " + stock + " left";
     } else {
       document.getElementById("message").textContent = "😢 Sold out!";
     }
   });

   Read it out loud: "When clicked: IF stock is bigger than zero, take one out of the box and celebrate. ELSE, sad trombone."
4. Save (⌘S), open myshop.html in your browser, refresh (⌘R).
5. Now click Buy now exactly 4 times and watch the message: 2 left... 1 left... 0 left... 😢 Sold out! Your page just made FOUR different decisions with one button. 🚦🎉

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

Big news: unlike lesson 8, the preview boxes below have the electricity turned ON — your buttons really work when you click them! One rule: the preview re-runs your code on every letter you type, so never use alert() in there (it would pop up nonstop and drive you bananas 🍌).

🔨 Now break it!

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

1. Cause the famous bug on purpose. Change if (stock > 0) to if (stock = 0) — one equals sign. Save, refresh, click. Chaos! The = doesn't ASK about the box, it stuffs 0 into it — your whole stock vanishes in one click. Feel the danger... then put > 0 back.
2. Flip the arrow. Change stock > 0 to stock < 0. Now the question is "is stock SMALLER than zero?" — which is never yes. Click away: instant "Sold out!", even with 3 in the box. A comparer pointing the wrong way is a super common bug. Flip it back!
3. Add a third traffic light. Between the if and the else, squeeze in:

   } else if (stock === 1) {
     document.getElementById("message").textContent = "🔥 LAST ONE! Grab it!";
   

   Wait — think first: does this line run when 1 is left, or when you buy the last one? Test it and find out. (Careful: three equals signs!)

🎮 Quiz time

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

📚 Want more?