← Back CP 🧪 Potion Timer Lab
🏰 Magic Castle — In Star Catcher your code waited for a TAP to react. Today your code runs ALL BY ITSELF on a timer! Potions need to brew for exactly the right amount of time, and cauldrons need stirring on a steady beat. Meet setTimeout — "do this once after a delay" — and setInterval — "do this again and again on schedule." No taps needed. Code that ticks like a clock!

⏰ Timers — Code That Runs on Its Own

A timer is code that fires automatically on a schedule. setTimeout waits a certain number of milliseconds, then runs once — like a potion timer that dings when the brew is ready. setInterval runs the same code over and over every N milliseconds — like a cauldron stirring itself every few seconds. And clearInterval stops the loop when you're done. Every clock, countdown, and auto-refresh in the world uses these!

// 🧪 TIMER 1 — setTimeout: runs ONCE after a delay
setTimeout(function() {
  potion.color = 'purple';  // 🎨 happens after N ms!
  done = true;  // ✅ brew complete!
}, 2000);  // ⏳ wait 2000ms, then FIRE

// 🔁 TIMER 2 — setInterval: runs REPEATEDLY
var loop = setInterval(function() {
  stir();  // 🌀 stir! fires every N ms
  count++;
  if (count >= 4) clearInterval(loop);  // 🛑 stop!
}, 800);  // ⏱ every 800ms
🎯 Missions Brew 3 potions! Make a potion sparkle! Finish all 5 challenges!
🧪 potion-timer.js — Your Timer Engine
1// 🧪 BREW STATE — what the cauldron remembers
2var color = 'purple', stirs = 0, done = false;
3
4// ⏰ setTimeout — runs ONCE after a delay (auto, no tap!)
5setTimeout(function() {
6  potion.color = 'purple';
7  done = true;  // ✅ brew complete!
8}, 2000);  // ⏳ wait N ms
9
10// 🔁 setInterval — repeats on a schedule
11var stirLoop = setInterval(function() {
12  stir();  // 🌀 stir the cauldron!
13  stirs++;  // count each stir
14  if (stirs >= 4) clearInterval(stirLoop);  // 🛑 stop!
15}, 800);  // ⏱ every N ms
🧪 Potion Cauldron — set your timer rules, then brew!
⏱ Status: Set your timer rules, then tap BREW!

🎛️ Set Your Timer Rules

⏰ Brew Delay (setTimeout) — how long until potion is done
Delay
2000 ms
🔁 Stir Interval (setInterval) — how often the cauldron stirs
Interval
800 ms
🔢 Stir Count — how many stirs before stopping
Stirs
4
🎨 Potion Color — choose your brew's color
Color
✨ Sparkle Effect — potion sparkles when done
Sparkle

🧪 Potion Timer Challenges

1
⏰ First Brew: Press START BREWING and watch the cauldron — after your Brew Delay, the potion completes by itself! That's setTimeout firing on a schedule, no tap needed!
setTimeout
✅
2
🔁 Stir Cycle: Watch the cauldron stir itself on repeat — each stir is a setInterval tick firing automatically. See the bubbles and stir count go up!
setInterval
✅
3
⚡ Speed Interval: Set Stir Interval to 200 ms (fastest) and brew — watch the cauldron stir super-fast! The timer loop fires more often because the interval is shorter.
frequency
✅
4
🎨 Color Change: Pick a different Potion Color (Red, Green, Blue, or Gold) and brew — the setTimeout applies your color choice to the potion when it completes!
variable
✅
5
✨ Sparkle Master: Turn Sparkle ON and brew — when the potion finishes, sparkles burst out! Then try with Sparkle OFF to see the difference.
effect
✅
🏰 Magic Castle Progress0%

🧪 Welcome to Potion Timer Lab!

You built a game that reacts to taps in Star Catcher. Now learn code that runs all by itself on a TIMER! Potions don't brew instantly — they need time, and cauldrons need stirring on a beat. That's exactly what setTimeout (wait once) and setInterval (repeat forever) do!

⏰Set Brew Delay — how many ms until your potion is done (setTimeout)
🔁Set Stir Interval — how often the cauldron stirs itself (setInterval)
🎨Choose a Potion Color — the setTimeout applies it when done!
🧪Press START BREWING and watch both timers fire automatically — no taps needed!
🏆Finish all 5 challenges to become a Timer Master!