The Only 3 Concepts You Need
Master Events, State, and Conditionals through our traffic light system. Just like managing traffic flow, your website will respond to triggers, remember information, and make smart decisions!
Events = Things That Happen
User interactions that trigger actions
“Button pressed!” (user trigger)
button.onClick = function() {
changeLight();
}
changeLight();
}
Timer countdown (automatic trigger)
setInterval(() => {
nextLight();
}, 5000);
nextLight();
}, 5000);
State = Things to Remember
Information your app keeps track of
Current light (memory)
let currentLight = “red”;
lightQueue.push(newState);
lightQueue.push(newState);
Timer state (countdown)
let timeRemaining = 0;
let isAutoMode = false;
let isAutoMode = false;
Conditionals = If This, Then That
Rules that make your app smart
Traffic flow logic
if (timer === 0) {
switchToNextLight();
}
switchToNextLight();
}
Emergency override
if (emergency) {
flashAllLights();
}
flashAllLights();
}
Interactive Traffic Light - Live Demo
See Events, State, and Conditionals working together
Interactive Demo
MANUAL
Behind the Scenes (Live)
EVENTS (What just happened)
No events yet...
STATE (Current memory)
- • lightState: “red”
- • mode: “manual”
- • timer: 0
- • pedestrianWaiting: false
- • emergency: false
CONDITIONALS (Active rules)
- • ○ IF timer = 0 → Change light
- • ○ IF emergency → Flash all lights
- • ○ IF pedestrian waiting + green → Show walk
That’s It! 🎉
Just like a traffic light manages flow with buttons (events), current state (red/green), and rules (if timer expires, then change), your website will handle clicks, remember data, and make decisions. Netflix, Instagram, ChatGPT – all using these same three concepts!