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

updated readme

Browse Source
This commit is contained in:
Ian Smith 2016-05-12 09:08:39 -07:00
parent 873727666b
commit 6728934c84
1 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -4,7 +4,27 @@ As always, fork and clone this repo. Submit a Pull Request when you are done.
## Stoplight
Wire up the buttons to the left of the stoplight to toggle the on/off state of each bulb.
#### Challenge One: 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.
#### 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 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.
#### 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"`
* 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"`
![Screenshot of the stop bulb lit up](screenshot.png)
@ -13,3 +33,4 @@ Wire up the buttons to the left of the stoplight to toggle the on/off state of e
* Retrieve a DOMElement with [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or similar method
* Attach event listeners with [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
* Set the color of a bulb with [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
* Explore the various options of [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)