<h1> My Traffic Light Coursework</h1>
<i> Cycle through the lights</i>

<div id= "traffic_light">
  <div id= "red" class= "circle"></div>
  <div id= "orange" class= "circle"></div>
  <div id= "green" class= "circle"></div>
</div>


<button onclick= "next()">Next Light</button>
<button onclick= "Auto()">Auto Cycle</button>

#traffic_light {
  border: outset 5px purple;
  background-color: pink;
  padding: 25px;
  width: 100px;
}

.circle {
  border: dotted 5px purple;
  border-radius: 50px;
  height: 100px;
  width: 100px;
}

button {
  margin-top: 50px;
  width: 75px;
}

#red {
  background-color: red;
}

//RED = 1: RED & YELLOW = 2: GREEN = 3;
var state = 1;
var greenLight = document.getElementById ("green").style;
var redLight = document.getElementById ("red").style;
var orangeLight = document.getElementById ("orange").style;

function next (){
    if (state == 1) {
    state = state + 1;
    orangeLight.backgroundColor = "orange";
    redLight.backgroundColor = "pink";
    greenLight.backgroundColor = "pink";
} else if (state == 2) {
  state = state + 1;
  orangeLight.backgroundColor = "pink";
  redLight.backgroundColor = "pink";
  greenLight.backgroundColor = "green";
} else if (state == 3) {
  state = 1;
  orangeLight.backgroundColor = "pink";
  redLight.backgroundColor = "red";
  greenLight.backgroundColor = "pink";
 } 
}

function Auto () {
autonext = setInterval (next,700)
}