diff --git a/README.md b/README.md index 7be7354..9119973 100644 --- a/README.md +++ b/README.md @@ -6,27 +6,29 @@ As always, fork and clone this repo. For this exercise, you will be creating a web page that looks like a stoplight with buttons that make changes to the light. Open up `script.js` in your editor for the directions. Once completed, try out the challenges and the bonus below. -#### Challenge One: Button Click +#### Challenge One: Group "Hover" Handler -Wire up the controls to the left of the stoplight so that when a button is clicked, the corresponding bulb will turn on and all others will turn off. +* Add a event listeners on each of your buttons that log `"Entered button"` when a user mouses over a button. -#### Challenge Two: Button Toggle +* Add new event listeners on each of your buttons that log `"Left button"` when a user mouses out. -Alter your event listeners to toggle the on/off state of each bulb. All three bulbs can be on or off from now on. +* Add a single event listener on all three buttons as a group. In your group event handler, log the `textContent` of each button when a user clicks the button. -#### Challenge Three: Group "Hover" Handler +#### Challenge Two: Button Toggle -* Keep your existing code, but add new event listeners on each of your buttons that log `"Entered button"` when a user mouses over a button. +Alter your event listeners to toggle the on/off state of each bulb. All three bulbs can be on or off from now on. -* Add new event listeners on each of your buttons that log `"Left button"` when a user mouses out. +#### Challenge Three: Button Click -* Add a single event listener on all three buttons as a group. In your group event handler, log the `textContent` of each button when a user clicks the button. +Wire up the controls to the left of the stoplight so that when a button is clicked, the corresponding bulb will turn on and all others will turn off. #### Bonus Challenge: On/Off Message -* If the corresponding bulb is off when a user clicks a button, change the log message in your group event listener to say `" bulb on"` - -* If the corresponding bulb is on when a user clicks a button, change the log message in your group event listener to say `" bulb off"` +Make it so that your stop light functions like a normal stop light. For example if the stop light is green and you click stop, it should: +* Turn off the green light +* Turn on the yellow light for 5 seconds +* Turn off the yellow light +* THEN turn on the red light. ![Screenshot of the stop bulb lit up](screenshot.png)