diff --git a/README.md b/README.md index 6abca8b..ca64ccc 100644 --- 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) diff --git a/index.html b/index.html new file mode 100644 index 0000000..3298ffb --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + Stoplight Exercise + + + +
+

Stop

+

Slow

+

Go

+
+
+
+
+
+
+ + + diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..245ab05 Binary files /dev/null and b/screenshot.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..2858b7c --- /dev/null +++ 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. +*/ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..804d727 --- /dev/null +++ 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; +} \ No newline at end of file