I'm facing an issue with my code where the traffic light appears too large and the buttons are positioned too far apart. I attempted adjusting the PX values, but this resulted in the traffic light shapes becoming squares instead of circular and smooth rectangles. Any suggestions or tips would be greatly appreciated! Here is what I am experiencing: https://i.sstatic.net/IMDYQ.png
document.getElementById('stopButton').onclick = stopRed;
document.getElementById('slowButton').onclick = slowYellow;
document.getElementById('goButton').onclick = goGreen;
document.getElementById('Lights').onclick = Lights;
document.getElementById('autoLights').onclick = autoLights;
function stopRed() {
Lights();
document.getElementById('stopLight').style.backgroundColor = "red";
}
function slowYellow() {
Lights();
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function goGreen() {
Lights();
document.getElementById('goLight').style.backgroundColor = "green";
}
function Lights() {
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";
}
function lightOne(num) {
Lights();
switch (num) {
case 1:
stopRed();
break;
case 2:
slowYellow();
break;
case 3:
goGreen();
break;
default:
alert("you made some error");
}
}
counter = 0;
maxSec = 3;
function timer() {
setTimeout(function() {
counter++;
lightOne(counter);
if (counter == maxSec) {
return;
}
timer();
}, 2000);
}
function autoLights() {
counter = 1;
lightOne(counter);
timer();
}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="stopButton" class="button">Stop</h1>
<h1 id="slowButton" class="button">Slow</h1>
<h1 id="goButton" class="button">Go</h1>
<h1 id="Lights" class="button">Clear</h1>
<h1 id="autoLights" class="button">Auto</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>