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

Compare commits

merge into: sigonasr2:solution
Branches Tags
sigonasr2:master
sigonasr2:solution
...
pull from: sigonasr2:master
Branches Tags
sigonasr2:master
sigonasr2:solution

27 Commits
solution ... master

Author SHA1 Message Date
Joshua Sigona
f57da84b34 Implement solution. 2020-06-11 10:45:08 +09:00
Ryan Sobol
9f424e9ebb Flex 2016-11-11 08:06:39 -08:00
Ryan Sobol
670a7de318 Improve the README 2016-11-11 07:42:24 -08:00
Ryan Sobol
3a2f06183f Improve the CSS 2016-11-11 07:42:07 -08:00
Ryan Sobol
2b226f0912 Improve the README 2016-11-11 07:07:44 -08:00
Ryan Sobol
6a99ac8ed0 Improve the README 2016-11-11 07:04:35 -08:00
Ryan Sobol
61ba5846f8 Improve the gif 2016-11-11 07:01:15 -08:00
Ryan Sobol
f2fa5eaa08 Remove screenshot 2016-11-11 06:47:29 -08:00
Ryan Sobol
2daab178da Improve the README 2016-11-11 06:46:41 -08:00
Ryan Sobol
7b724cc4dc Improve the README 2016-11-11 06:43:35 -08:00
Ryan Sobol
bbb7582d3e Improve the README 2016-11-11 06:40:56 -08:00
Ryan Sobol
01d5e8efc9 Improve the README 2016-11-11 06:39:50 -08:00
Ryan Sobol
f7b6b56f97 Improve the README 2016-11-11 06:33:45 -08:00
Ryan Sobol
4db1c28362 Improve the README 2016-11-11 06:33:10 -08:00
Ryan Sobol
104ac52aa7 Improve the screenshot 2016-11-11 06:30:40 -08:00
Ryan Sobol
289c0fd033 Improve the README 2016-11-11 06:29:57 -08:00
Ryan Sobol
6ba4d24e86 Rename 2016-11-11 05:51:41 -08:00
Ryan Sobol
ffc92b74d4 Tweak HTML and CSS 2016-11-11 05:49:28 -08:00
Ryan Sobol
bfec34aa0b Tweak HTML 2016-11-10 15:13:00 -08:00
mrjadaml
431312f75f order of tasks seemed backward. Also made the bouns a bit harder 2016-08-18 10:31:45 -07:00
Craig Quincy
495eff9794 Revert "working model with bonuses" 
This reverts commit 8d168d8a3555dc4b872760bf0739f91c8dbf428d.
 2016-08-11 18:05:58 -06:00
THACHER
8d168d8a35 working model with bonuses 2016-08-10 14:48:58 -07:00
Ken McGrady
203fd81c6a Rename spotlight to stoplight 2016-05-12 14:51:59 -07:00
Ken McGrady
10f46daf57 Move Screenshot back below 2016-05-12 10:53:37 -07:00
Ken McGrady
c0a7b0b853 Update README 2016-05-12 10:47:40 -07:00
Ken McGrady
8ab3a0c231 Update README 2016-05-12 10:26:56 -07:00
Ian Smith
6728934c84 updated readme 2016-05-12 09:08:39 -07:00
7 changed files with 104 additions and 35 deletions
Show Stats Expand all files Collapse all files

55
README.md
View File

@ -1,15 +1,54 @@
# Stoplight Exercise # Stoplight Exercise
As always, fork and clone this repo. Submit a Pull Request when you are done. As always, fork and clone this repository.
## Stoplight ![](stoplight.gif)
Wire up the buttons to the left of the stoplight to toggle the on/off state of each bulb. ## Part 1
![Screenshot of the stop bulb lit up](screenshot.png) Add DOM event listeners and handlers to toggle the on/off state of three bulbs.
## Hints - 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].
* Retrieve a DOMElement with [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or similar method **TIP**: All three bulbs can be on/off independently of one another.
* 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) ### Resources
- [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 - `Element.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
## Part 2
Add new DOM event listeners and handlers to log the mouse state of each button.
- 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.
**TIP:** Each event type will need a separate event listener.
### Resources
- [MDN - `mouseenter`](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter)
- [MDN - `mouseleave`](https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave)
- [MDN - `Event.target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target)
## Bonus
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.
**TIP:** A click on only a button should cause a message to be logged to the console.
### Resources
- [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate)
[stop-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L39
[slow-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L43
[go-color]: https://github.com/gSchool/stoplight-event-exercise/blob/master/index.css#L47

40
styles.css → index.css
View File

@ -1,33 +1,49 @@
body {
display: flex;
}
#controls { #controls {
float: left; margin-top: 30px;
padding-top: 30px;
} }
.button { .button {
background-color: gray; background-color: gray;
color: white;
border-radius: 15px; border-radius: 15px;
color: white;
cursor: pointer;
font-size: 2em;
font-weight: bold;
margin: 90px 40px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
margin: 90px 40px;
cursor: pointer;
} }
#traffic-light { #traffic-light {
height: 550px;
width: 200px;
float: left;
background-color: #ababab; background-color: #ababab;
border-radius: 40px; border-radius: 40px;
margin: 30px 0; margin: 30px 0;
height: 550px;
padding: 20px; padding: 20px;
width: 200px;
} }
.bulb { .bulb {
height: 150px;
width: 150px;
background-color: #111; background-color: #111;
border-radius: 50%; border-radius: 50%;
margin: 25px auto; margin: 25px auto;
transition: background 500ms; height: 150px;
} transition: background 300ms;
width: 150px;
}
.stop {
background-color: red;
}
.slow {
background-color: orange;
}
.go {
background-color: green;
}

11
index.html
View File

@ -3,19 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Stoplight Exercise</title> <title>Stoplight Exercise</title>
<link rel="stylesheet" href="styles.css" media="screen" title="no title" charset="utf-8"> <script defer src="index.js"></script>
<link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<div id="controls"> <div id="controls">
<h1 id="stopButton" class="button">Stop</h1> <div id="stopButton" class="button">Stop</div>
<h1 id="slowButton" class="button">Slow</h1> <div id="slowButton" class="button">Slow</div>
<h1 id="goButton" class="button">Go</h1> <div id="goButton" class="button">Go</div>
</div> </div>
<div id="traffic-light"> <div id="traffic-light">
<div id="stopLight" class="bulb"></div> <div id="stopLight" class="bulb"></div>
<div id="slowLight" class="bulb"></div> <div id="slowLight" class="bulb"></div>
<div id="goLight" class="bulb"></div> <div id="goLight" class="bulb"></div>
</div> </div>
<script src="script.js"></script>
</body> </body>
</html> </html>

23
index.js Normal file
View File

@ -0,0 +1,23 @@
document.addEventListener("DOMContentLoaded",()=>{
document.getElementById("controls").addEventListener("click",(clicked)=>{
var lightPrefix = clicked.target.id.replace("Button","");
var targetLight = document.getElementById(lightPrefix+"Light");
if (!targetLight.classList.contains(lightPrefix)) {
targetLight.classList.add(lightPrefix);
console.log(lightPrefix+" bulb on.")
} else {
targetLight.classList.remove(lightPrefix);
console.log(lightPrefix+" bulb off.")
}
})
var buttons = document.getElementsByClassName("button");
for (var i=0;i<buttons.length;i++) {
buttons[i].addEventListener("mouseenter",(e)=>{
console.log("Entered "+e.target.innerHTML+" button.")
})
buttons[i].addEventListener("mouseleave",(e)=>{
console.log("Left "+e.target.innerHTML+" button.")
})
}
})

BIN
screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

10
script.js
View File

@ -1,10 +0,0 @@
/*
Write JS to make this stoplight work.
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.
*/

BIN
stoplight.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB