From 6728934c847d7ee08896a00343940db8f24fcc8c Mon Sep 17 00:00:00 2001 From: Ian Smith Date: Thu, 12 May 2016 09:08:39 -0700 Subject: [PATCH] updated readme --- README.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3a64789..d951a08 100644 --- a/README.md +++ b/README.md @@ -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 button"` when a user mouses over a button. + +* Add new event listeners on each of your buttons that log `"Left 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 `" 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"` ![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)