sigonasr2/stoplight-event-exercise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

order of tasks seemed backward. Also made the bouns a bit harder

Browse Source
This commit is contained in:
mrjadaml 2016-08-18 10:31:45 -07:00
parent 495eff9794
commit 431312f75f
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -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. 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 <textContent> button"` when a user mouses over a button.
#### Challenge Two: Button Toggle
Alter your event listeners to toggle the on/off state of each bulb. All three bulbs can be on or off from now on.
#### Challenge Three: Group "Hover" Handler
* Keep your existing code, but add new event listeners on each of your buttons that log `"Entered <textContent> button"` when a user mouses over a button.
* Add new event listeners on each of your buttons that log `"Left <textContent> button"` when a user mouses out. * Add new event listeners on each of your buttons that log `"Left <textContent> button"` when a user mouses out.
* 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. * 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 Two: Button Toggle
Alter your event listeners to toggle the on/off state of each bulb. All three bulbs can be on or off from now on.
#### Challenge Three: Button Click
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 #### 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 `"<textContent> bulb on"` 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
* If the corresponding bulb is on when a user clicks a button, change the log message in your group event listener to say `"<textContent> bulb off"` * 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) ![Screenshot of the stop bulb lit up](screenshot.png)