a-espinoza/Andres Espinoza's Traffic Light Project.markdown

## Andres Espinoza's Traffic Light Project.markdown

      
    Raw
  

              Andres Espinoza's Traffic Light  Project.markdown
            
          
    Andres Espinoza's Traffic Light  Project

Project for General Assembly Admission
Forked from Nevan Scott's Pen Traffic Light JS.
A Pen by Andres Espinoza on CodePen.
License.

  
## index.html
<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>

## script.js
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!');
}

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
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;
}
	<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!');
	}
	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;
	}