Improve the README

README.md

@@ -2,39 +2,48 @@
 
 As always, fork and clone this repo.
 
-## Stoplight
+![Screenshot of the stop bulb lit up](screenshot.png)
 
-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.
+## Part 1
 
-#### Challenge One: Group "Hover" Handler
+Add DOM event listeners to toggle the on/off state of three bulbs.
 
-* Add a event listeners on each of your buttons that log `"Entered <textContent> button"` when a user mouses over a button.
+- When a user clicks on the "Stop" button, the top bulb should turn `red`.
+- When a user clicks on the "Slow" button, the middle bulb should turn `orange`.
+- When a user clicks on the "Go" button, the bottom bulb should turn `green`.
 
-* Add new event listeners on each of your buttons that log `"Left <textContent> button"` when a user mouses out.
+**TIP**: All three bulbs can be on/off independently of one another.
 
-* 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.
+### Resources
 
-#### Challenge Two: Button Toggle
+- [MDN - `Document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+- [MDN - `EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+- [MDN - `click`](https://developer.mozilla.org/en-US/docs/Web/Events/click)
+- [MDN -  `background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
 
-Alter your event listeners to toggle the on/off state of each bulb. All three bulbs can be on or off from now on.
+## Part 2
 
-#### Challenge Three: Button Click
+Add new DOM event listeners to log the mouse state of each 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.
+- When a user's mouse "enters" a button, log `"Entered <textContent> button"` to the console.
+- When a user's mouse "leaves" a button, log `"Left <textContent> button"` to the console.
 
-#### Bonus Challenge: On/Off Message
+**TIP:** Each event type will need a separate event listener.
 
-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.
+### Resources
 
-![Screenshot of the stop bulb lit up](screenshot.png)
+- [MDN - `mouseenter`](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter)
+- [MDN - `mouseleave`](https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave)
+
+## Bonus
+
+Add **one** new DOM event listener to log the state of each bulb.
+
+- When a user clicks a button that just turned on, log`"<textContent> bulb on"` to the console.
+- When a user clicks a button that just turned off, log`"<textContent> bulb off"` to the console.
+
+**TIP:** A click on only a button should cause a message to be logged to the console.
 
-## Hints
+### Resources
 
-* 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)
+- [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate)

index.js

@@ -1,10 +1,5 @@
-/*
-  Write JS to make this stoplight work.
+(function() {
+  'use strict';
 
-  When I click on the 'stop' button,
-    the top light should turn red.
-  When I click on the 'slow' button
-    the middle light should turn orange.
-  When I click on the 'go' button
-    the bottom light should turn green.
-*/
+  // YOUR CODE HERE
+})();