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

Improve the README

Browse Source
This commit is contained in:
Ryan Sobol 2016-11-11 07:42:24 -08:00
parent 3a2f06183f
commit 670a7de318
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -8,9 +8,9 @@ As always, fork and clone this repository.
Add DOM event listeners and handlers to toggle the on/off state of three bulbs.
- When a user clicks on the "Stop" button, toggle the top bulb's color to `red`.
- When a user clicks on the "Slow" button, toggle the middle bulb's color to `orange`.
- When a user clicks on the "Go" button, toggle the bottom bulb's color to `green`.
- When a user clicks on the "Stop" button, toggle the [stop bulb's color][stop-color].
- When a user clicks on the "Slow" button, toggle the [slow bulb's color][slow-color].
- When a user clicks on the "Go" button, toggle the [go bulb's color][go-color].
**TIP**: All three bulbs can be on/off independently of one another.
@ -19,7 +19,7 @@ Add DOM event listeners and handlers to toggle the on/off state of three bulbs.
- [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)
- [MDN - `Element.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
## Part 2
@ -38,7 +38,7 @@ Add new DOM event listeners and handlers to log the mouse state of each button.
## Bonus
Add **one** new DOM event listener and **one** handler to log the state of each bulb.
Add **one** DOM event listener and **one** handler 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.
@ -48,3 +48,7 @@ Add **one** new DOM event listener and **one** handler to log the state of each
### Resources
- [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate)
[stop-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L37
[slow-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L41
[go-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L45