Week 4 Day 1 Challenge — Traffic Light Simulator

1. Build this in Design Mode first

STEP 1

Create these elements on screen1 with these exact IDs and starting text.

Type	ID	Text
Label	`lightLabel`	STOP
Button	`redBtn`	Red
Button	`yellowBtn`	Yellow
Button	`greenBtn`	Green

Bonus only — add this after Step 3 works:

Type	ID	Text
Button	`resetBtn`	Reset

2. Switch to Code Mode

STEP 2

Copy this starter code into Code Mode and fill in the numbered STEPs.

// STEP 1: When redBtn is clicked, set lightLabel's text to "STOP" and its
// background color to "red".


// STEP 2: When yellowBtn is clicked, set lightLabel's text to "SLOW DOWN"
// and its background color to "yellow".


// STEP 3: When greenBtn is clicked, set lightLabel's text to "GO" and its
// background color to "green".


// ------------------------------------------------------
// BONUS CHALLENGE 🌟
// First, add resetBtn in Design Mode (see the table above).
// ------------------------------------------------------

// BONUS STEP 4: When resetBtn is clicked, set lightLabel back to "STOP"
// with a red background — the same as the app's starting state.

3. Check yourself

STEP 3

Click each button. Does lightLabel show the right word AND the right background color every time?
Click the same button twice in a row — nothing should break.
Try it for real before checking the answer key.

Answer key

// STEP 1
onEvent("redBtn", "click", function() {
  setText("lightLabel", "STOP");
  setProperty("lightLabel", "background-color", "red");
});

// STEP 2
onEvent("yellowBtn", "click", function() {
  setText("lightLabel", "SLOW DOWN");
  setProperty("lightLabel", "background-color", "yellow");
});

// STEP 3
onEvent("greenBtn", "click", function() {
  setText("lightLabel", "GO");
  setProperty("lightLabel", "background-color", "green");
});

// BONUS STEP 4
onEvent("resetBtn", "click", function() {
  setText("lightLabel", "STOP");
  setProperty("lightLabel", "background-color", "red");
});