sigonasr2/stoplight-event-exercise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

🎉 Stoplight exercise

Browse Source
This commit is contained in:
Danny Fritz 2015-11-03 13:12:44 -07:00
parent 951f04315a
commit d51b348fb3
5 changed files with 79 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -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)

21
index.html Normal file
View File

@ -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>

BIN
screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

10
script.js Normal file
View File

@ -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.
*/

33
styles.css Normal file
View File

@ -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;
}