Implement solution.

Flex
Improve the README
7 changed files with 104 additions and 35 deletions
--- a/README.md
+++ b/README.md
@ -1,15 +1,54 @@
 # 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
--- a/styles.css
+++ b/styles.css
@ -1,33 +1,49 @@
 body {
  display: flex;
 }
 #controls {
-  float: left;
+  margin-top: 30px;
  padding-top: 30px;
 }
 .button {
  background-color: gray;
  color: white;
  border-radius: 15px;
  color: white;
  cursor: pointer;
  font-size: 2em;
  font-weight: bold;
  margin: 90px 40px;
  padding: 20px;
  text-align: center;
  margin: 90px 40px;
  cursor: pointer;
 }
 #traffic-light {
  height: 550px;
  width: 200px;
  float: left;
  background-color: #ababab;
  border-radius: 40px;
  margin: 30px 0;
  height: 550px;
  padding: 20px;
  width: 200px;
 }
 .bulb {
  height: 150px;
  width: 150px;
  background-color: #111;
  border-radius: 50%;
  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;
 }
--- a/index.html
+++ b/index.html
@ -3,19 +3,20 @@
  <head>
    <meta charset="utf-8">
    <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>
  <body>
    <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 id="traffic-light">
      <div id="stopLight" class="bulb"></div>
      <div id="slowLight" class="bulb"></div>
      <div id="goLight" class="bulb"></div>
    </div>
    <script src="script.js"></script>
  </body>
 </html>
--- a/index.js
+++ b/index.js
@ -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.")
 		})
 	}
 })
--- a/screenshot.png
+++ b/screenshot.png
--- a/script.js
+++ b/script.js
@ -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.
 */
--- a/stoplight.gif
+++ b/stoplight.gif
Author	SHA1	Message	Date
Joshua Sigona	f57da84b34	Implement solution.	5 years ago
Ryan Sobol	9f424e9ebb	Flex	8 years ago
Ryan Sobol	670a7de318	Improve the README	8 years ago
Ryan Sobol	3a2f06183f	Improve the CSS	8 years ago
Ryan Sobol	2b226f0912	Improve the README	8 years ago
Ryan Sobol	6a99ac8ed0	Improve the README	8 years ago
Ryan Sobol	61ba5846f8	Improve the gif	8 years ago
Ryan Sobol	f2fa5eaa08	Remove screenshot	8 years ago
Ryan Sobol	2daab178da	Improve the README	8 years ago
Ryan Sobol	7b724cc4dc	Improve the README	8 years ago
Ryan Sobol	bbb7582d3e	Improve the README	8 years ago
Ryan Sobol	01d5e8efc9	Improve the README	8 years ago
Ryan Sobol	f7b6b56f97	Improve the README	8 years ago
Ryan Sobol	4db1c28362	Improve the README	8 years ago
Ryan Sobol	104ac52aa7	Improve the screenshot	8 years ago
Ryan Sobol	289c0fd033	Improve the README	8 years ago
Ryan Sobol	6ba4d24e86	Rename	8 years ago
Ryan Sobol	ffc92b74d4	Tweak HTML and CSS	8 years ago
Ryan Sobol	bfec34aa0b	Tweak HTML	8 years ago
mrjadaml	431312f75f	order of tasks seemed backward. Also made the bouns a bit harder	8 years ago
Craig Quincy	495eff9794	Revert "working model with bonuses" This reverts commit `8d168d8a35`.	8 years ago
THACHER	8d168d8a35	working model with bonuses	8 years ago
Ken McGrady	203fd81c6a	Rename spotlight to stoplight	9 years ago
Ken McGrady	10f46daf57	Move Screenshot back below	9 years ago
Ken McGrady	c0a7b0b853	Update README	9 years ago
Ken McGrady	8ab3a0c231	Update README	9 years ago
Ian Smith	6728934c84	updated readme	9 years ago