diff --git a/README.md b/README.md index 9119973..7793334 100644 --- a/README.md +++ b/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 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 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 button"` to the console. +- When a user's mouse "leaves" a button, log `"Left 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`" bulb on"` to the console. +- When a user clicks a button that just turned off, log`" 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) diff --git a/index.js b/index.js index 2858b7c..03cc920 100644 --- a/index.js +++ b/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 +})();