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
-* 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)
+**TIP**: All three bulbs can be on/off independently of one another.
+
+### 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;
-  padding-top: 30px;
+  margin-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>
-      <h1 id="slowButton" class="button">Slow</h1>
-      <h1 id="goButton" class="button">Go</h1>
+      <div id="stopButton" class="button">Stop</div>
+      <div id="slowButton" class="button">Slow</div>
+      <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