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
+**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,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