The Only 3 Concepts You Need
Master Events, State, and Conditionals through our traffic light system. These three concepts power every website — from simple buttons to Instagram and ChatGPT.
Events = Things That Happen
User actions that trigger responses
Button clicked (user trigger)
onClick → changeLight()Timer fires (automatic trigger)
every 5s → nextLight()State = Things to Remember
Information your app keeps track of
Current light color
lightState = “red”Timer countdown
timer = 0Conditionals = If This, Then That
Rules that determine outcomes
Timer reaches zero
if timer = 0 → switchLight sequence
red → green → yellow → redInteractive Demo
Click the buttons and watch the concepts work together
What's Happening
EVENT (What triggered)
STATE (What's remembered)
- • light: “red”
- • mode: “manual”
CONDITIONAL (Rules checking)
- ○ if timer = 0 → change light
That's it! Every website uses these same patterns. When you click “Like” on Instagram: Event (click) → State (liked: true) → Conditional (if liked, show filled heart).
Why This Helps Your Prompts
Before: Vague
After: Precise
When Debugging
Ask yourself:
- ⚡Event issue? Is the trigger firing?
- 🧠State issue? Is the right value stored?
- 🔀Conditional issue? Is the logic correct?
Ready to Build?
Now that you understand the fundamentals, put them into practice.