document.getElementById('SwitchButton').onclick = automateLights;
function turnOnRedLight() {
clearAllLights();
document.getElementById('stopLight').style.backgroundColor = "red";
}
function turnOnOrangeLight() {
clearAllLights();
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function turnOnGreenLight() {
clearAllLights();
document.getElementById('goLight').style.backgroundColor = "green";
}
function turnOnRedAndOrangeLights() {
clearAllLights();
document.getElementById('stopLight').style.backgroundColor = "red";
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function clearAllLights() {
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";
}
var buttonClicks = 0;
var loop = true;
function automateLights() {
buttonClicks++;
switch (buttonClicks) {
case 1:
clearAllLights();
document.getElementById('stopLight').style.backgroundColor = "red";
break;
case 2:
clearAllLights();
document.getElementById('stopLight').style.backgroundColor = "red";
document.getElementById('slowLight').style.backgroundColor = "orange";
break;
case 3:
clearAllLights();
document.getElementById('goLight').style.backgroundColor = "green";
break;
default:
break;
}
}body {
font-family: sans-serif;
}
#controlPanel {
float: left;
padding-top: 30px;
}
.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;
float: left;
background-color: #333;
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;
}<div id="controlPanel">
<h1 id="SwitchButton" class="button">Automate Lights</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>Hello! I have created a traffic light sequence that can be automated with the press of a single button. The lights will change from red to orange to green in a cycle when the button is clicked. Feel free to ask any questions or suggestions on how to improve this automation feature. Thank you for your time!