Improve the solution

Flex
7 changed files with 161 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,80 @@
+(function() {
+  'use strict';
+
+  const stopButton = document.querySelector('#stopButton');
+  const slowButton = document.querySelector('#slowButton');
+  const goButton = document.querySelector('#goButton');
+
+  const stopLight = document.querySelector('#stopLight');
+  const slowLight = document.querySelector('#slowLight');
+  const goLight = document.querySelector('#goLight');
+
+  // part 1
+  stopButton.addEventListener('click', () => {
+    stopLight.classList.toggle('stop');
+
+    // or...
+    // if (stopLight.classList.contains('stop')) {
+    //   stopLight.classList.remove('stop');
+    // }
+    // else {
+    //   stopLight.classList.add('stop');
+    // }
+  });
+
+  slowButton.addEventListener('click', () => {
+    slowLight.classList.toggle('slow');
+  });
+
+  goButton.addEventListener('click', () => {
+    goLight.classList.toggle('go');
+  });
+
+  // part 2
+  const handleMouseEnter = (event) => {
+    console.log(`Entered ${event.target.textContent} button`);
+  };
+
+  const handleMouseLeave = (event) => {
+    console.log(`Left ${event.target.textContent} button`);
+  };
+
+  stopButton.addEventListener('mouseenter', handleMouseEnter);
+  slowButton.addEventListener('mouseenter', handleMouseEnter);
+  goButton.addEventListener('mouseenter', handleMouseEnter);
+
+  stopButton.addEventListener('mouseleave', handleMouseLeave);
+  slowButton.addEventListener('mouseleave', handleMouseLeave);
+  goButton.addEventListener('mouseleave', handleMouseLeave);
+
+  // bonus
+  const controls = document.querySelector('#controls');
+
+  controls.addEventListener('click', (event) => {
+    if (event.target === controls) {
+      return;
+    }
+
+    let status;
+
+    if (event.target === stopButton) {
+      status = stopLight.classList.contains('stop') ? 'on' : 'off';
+
+      // or...
+      // if (stopLight.classList.contains('stop')) {
+      //   status = 'on';
+      // }
+      // else {
+      //   status = 'off';
+      // }
+    }
+    else if (event.target === slowButton) {
+      status = slowLight.classList.contains('slow') ? 'on' : 'off';
+    }
+    else {
+      status = goLight.classList.contains('go') ? 'on' : 'off';
+    }
+
+    console.log(`${event.target.textContent} bulb ${status}`);
+  });
+})();
--- 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
Ryan Sobol	42cd4def25	Improve the solution	8 years ago
Ryan Sobol	43488eeaea	Improve the solution	8 years ago
Ryan Sobol	0336132c61	Flex	8 years ago
Ryan Sobol	4f58ad1fe5	Improve the README	8 years ago
Ryan Sobol	eb209062e2	Improve the solution	8 years ago
Ryan Sobol	71e29f11e0	Improve the README	8 years ago
Ryan Sobol	4764a09973	Improve the README	8 years ago
Ryan Sobol	309de303d0	Improve the gif	8 years ago
Ryan Sobol	50ad6cc1c5	Improve the solution	8 years ago
Ryan Sobol	2ac097d1ac	Improve the solution	8 years ago
Ryan Sobol	ba764541e2	Improve the solution	8 years ago
Ryan Sobol	f6a2117f78	Improve the README	8 years ago
Ryan Sobol	c6c2d8603f	Improve the README	8 years ago
Ryan Sobol	030b3dad90	Improve the README	8 years ago
Ryan Sobol	a66d9832f6	Improve the README	8 years ago
Ryan Sobol	725a770a94	Improve the README	8 years ago
Ryan Sobol	69ab2f12d0	Remove screenshot	8 years ago
Ryan Sobol	7098962ce3	Improve the README	8 years ago
Ryan Sobol	12ccebe93c	Improve the README	8 years ago
Ryan Sobol	a0c30c23ad	Improve the README	8 years ago
Ryan Sobol	e1e7877f94	Improve the README	8 years ago
Ryan Sobol	34474839ec	Improve the README	8 years ago
Ryan Sobol	25674b5ce6	Improve the README	8 years ago
Ryan Sobol	36ebf6f0b4	Improve the README	8 years ago
Ryan Sobol	8cfc31392b	Improve the README	8 years ago
Ryan Sobol	480f94030e	Rename	8 years ago
Ryan Sobol	a5bc7aa76c	Tweak CSS	8 years ago
Ryan Sobol	d489b8e893	Tweak HTML	8 years ago
Ryan Sobol	eec0a7ed3d	Improve solution	8 years ago
Ian Smith	549e267eea	updated readme and created bonus	9 years ago
Ian Smith	a68eb6a985	updated exercise	9 years ago
Danny Fritz	a3fcfe763f	:neckbeard: Danny's solution	9 years ago