Project for General Assembly Admission Forked from Nevan Scott's Pen Traffic Light JS.
A Pen by Andres Espinoza on CodePen.
Project for General Assembly Admission Forked from Nevan Scott's Pen Traffic Light JS.
A Pen by Andres Espinoza on CodePen.
<head> | |
<h1> | |
Andres Espinoza's <br />Traffic Light Project | |
</h1> | |
<div id="controlPanel"> | |
<h2 id="stopButton" class="button">Stop</h2> | |
<h2 id="slowButton" class="button">Slow</h2> | |
<h2 id="goButton" class="button">Go</h2> | |
<h3 id="clearButton" class="button">CLEAR</h3> | |
</div> | |
<div id="traffic-light"> | |
<div id="stopLight" class="bulb"></div> | |
<div id="slowLight" class="bulb"></div> | |
<div id="goLight" class="bulb"></div> | |
</div> | |
</head> |
document.getElementById('stopButton').onclick = illuminateRed; | |
document.getElementById('slowButton').onclick = illuminateYellow; | |
document.getElementById('goButton').onclick = illuminateGreen; | |
document.getElementById('clearButton').onclick = clearLights; | |
function illuminateRed() { | |
clearLights(); | |
document.getElementById('stopLight').style.backgroundColor = "red"; | |
} | |
function illuminateYellow() { | |
clearLights(); | |
document.getElementById('slowLight').style.background = "url('http://i.imgur.com/EmkrxMw.gif')"; | |
} | |
function illuminateGreen() { | |
clearLights(); | |
document.getElementById('goLight').style.backgroundColor = "green"; | |
} | |
function clearLights() { | |
document.getElementById('stopLight').style.backgroundColor = "black"; | |
document.getElementById('slowLight').style.background = "url('http://i.imgur.com/hQBVgSv.jpg')"; | |
document.getElementById('goLight').style.backgroundColor = "black"; | |
} | |
if ($(window).width() < 900) { | |
alert('Please make the window BIGGER!! <br /> Thank you!'); | |
} |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
body { | |
font-family: sans-serif; | |
background: white; | |
background: -webkit-radial-gradient(circle, white); | |
background: -o-radial-gradient(circle, white,grey); | |
background: -moz-radial-gradient(circle, white,grey); | |
background: radial-gradient(circle, white,grey); | |
} | |
h1{ | |
font-family: helvetica; | |
text-align:center; | |
position: relative; | |
} | |
<h2 id="stopButton"> { | |
border: 30px solid white; | |
} | |
#controlPanel { | |
float: left; | |
position: relative; | |
left: 30%; | |
transform: translate(-30%); | |
} | |
.button { | |
background-color: gray; | |
color: white; | |
border-radius: 10px; | |
padding: 20px; | |
text-align: center; | |
margin: 90px 40px; | |
cursor: pointer; | |
} | |
#traffic-light { | |
height: 550px; | |
width: 200px; | |
position: relative; | |
left: 50%; | |
transform: translate(-50%); | |
background-color: #E2CB00; | |
border: 10px solid black; | |
border-color: black; | |
border-radius: 40px; | |
padding: 20px; | |
} | |
.bulb { | |
height: 150px; | |
width: 150px; | |
background-color: #111; | |
border-radius: 50%; | |
margin: 25px auto; | |
transition: background 500ms; | |
} | |
@media(max-width:600px){ | |
#controlPanel { | |
float: left; | |
padding-top: 30px; | |
} | |
.button{ | |
padding: 20px; | |
text-align: center; | |
} | |
#traffic-light { | |
height: 550px; | |
width: 200px; | |
float: left; | |
margin: 30px 0; | |
padding: 20px; | |
background-color: red; | |
} |