🎉 Stoplight exercise

9 years ago · d51b348fb3
parent 951f04315a
commit d51b348fb3
5 changed files with 79 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -1 +1,15 @@
-# stoplight-event-exercise
+# Stoplight Exercise
+
+As always, fork and clone this repo. Submit a Pull Request when you are done.
+
+## Stoplight
+
+Wire up the buttons to the left of the stoplight to toggle the on/off state of each bulb.
+
+![Screenshot of the stop bulb lit up](screenshot.png)
+
+## Hints
+
+* Retrieve a DOMElement with [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+* Attach 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)
--- a/index.html
+++ b/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Stoplight Exercise</title>
+    <link rel="stylesheet" href="styles.css" media="screen" title="no title" charset="utf-8">
+  </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>
+    <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/screenshot.png
+++ b/screenshot.png
--- a/script.js
+++ b/script.js
@ -0,0 +1,10 @@
+/*
+  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/styles.css
+++ b/styles.css
@ -0,0 +1,33 @@
+#controls {
+  float: left;
+  padding-top: 30px;
+}
+
+.button {
+  background-color: gray;
+  color: white;
+  border-radius: 15px;
+  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;
+  padding: 20px;
+}
+
+.bulb {
+  height: 150px;
+  width: 150px;
+  background-color: #111;
+  border-radius: 50%;
+  margin: 25px auto;
+  transition: background 500ms;
+}