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

updated readme and created bonus

Browse Source
This commit is contained in:
Ian Smith 2016-05-12 09:01:39 -07:00
parent a68eb6a985
commit 549e267eea
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -6,19 +6,25 @@ As always, fork and clone this repo. Submit a Pull Request when you are done.
#### Challenge One: Button Click #### Challenge One: Button Click
Wire up the buttons to the left of the stoplight so that when clicked, the corresponding bulb will turn on and any others will turn off. 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 #### Challenge Two: Button Toggle
Alter you event listeners to toggle the on/off state of each bulb. All three lights can be on or off for this challenge. 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: Hover/Group Handler #### Challenge Three: Group "Hover" Handler
A) 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. * 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.
B) Add new event listeners on each of your buttons that log `"Left [textContent] button"` when a user mouses out. * Add new event listeners on each of your buttons that log `"Left <textContent> button"` when a user mouses out.
C) 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. * 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) ![Screenshot of the stop bulb lit up](screenshot.png)

11
script.js
View File

@ -63,5 +63,14 @@ goButton.addEventListener("mouseleave", function(){
var controls = document.querySelector('#controls'); var controls = document.querySelector('#controls');
controls.addEventListener('click', function(event) { controls.addEventListener('click', function(event) {
console.log(event.target.textContent); var text = event.target.textContent;
var status;
if (text === 'Stop') {
status = stopLight.style.backgroundColor === 'red' ? 'on' : 'off';
} else if (text === 'Slow') {
status = slowLight.style.backgroundColor === 'orange' ? 'on' : 'off';
} else {
status = goLight.style.backgroundColor === 'green' ? 'on' : 'off';
}
console.log(`${text} bulb ${status}`);
}); });