CODEWITHSUNDEEP
javascripthtmlcss
hannah
hannah

Reputation: 195

Simulation of a traffic light

I am trying to create a traffic light but it doesn't seem to be showing up when I open it. I Would like some help please. I think the problem possibly could be in the HTML file.

This is the javascript code

document.getElementById('stopButton').onclick = illuminateRed;

 document.getElementById('goButton').
       onclick = illuminateGreen;

document.getElementById('slowButton').
onclick = illuminateYellow;


function illuminateRed() {
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
}

function illuminateGreen() {
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";
}

function illuminateYellow() {
clearLights();
document.getElementById('slowLight').style.backgroundColor = "yellow";
}


function clearLights() {
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";
}

This is the css code below

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;
}

This is the html code below

 <!DOCTYPE html>

     <html>
           <head>

        <script src="trafficLights.js" type="text/javascript></script"></script>

            <link href="trafficLight.css" type="text/css" rel="stylesheet">

</head>


    </html>

When I open up the file for the html a blank page is just shown. Chrome is my default browser for my computer

Upvotes: 1

Views: 1621

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

I would use a relative container for the background image (the light framing) and a flexbox container to hold the three lights, positioned in the center of that relative box.

I'm using the flex parent to store the state of the light. For example, if the stop button is pressed, the HTML would appear this way:

<div class="lights off stop">
  <div class="light red"></div>
  <div class="light yellow"></div>
  <div class="light green"></div>
</div>

Then, the CSS can "turn on" the active light.

.lights.stop .light.red {
  background-color: red;
}

enter image description here

Demo

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() {
  lightController.className = "lights off";
}
function handleClick() {
  // Clear lights on any button click
  clearLights();
  
  /* One function handles all the lights by listening for a 
     class name within each button */
  if (this.classList.contains("stop")) {
    lightController.classList.add("stop");
  } else if (this.classList.contains("slow")) {
    lightController.classList.add("slow");
  } else if (this.classList.contains("go")) {
    lightController.classList.add("go");
  }
}
// Loop through each ligth and bind a click event 
lights.forEach(light => {
  light.addEventListener("click", handleClick);
});
.light-container {
  background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  width: 200px;
  height: 235px;
  position: relative;
  margin-bottom: 1em;
}

.lights {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1.7em;
}

.light {
  border-radius: 50%;
  width: 59px;
  height: 57px;
  transition: 0.5s background-color ease-in-out;
  background-color: #333;
}

.light:not(:last-child) {
  margin-bottom: 0.85em;
}

.lights.stop .light.red {
  background-color: red;
}

.lights.slow .light.yellow {
  background-color: yellow;
}

.lights.go .light.green {
  background-color: green;
}

.lights.off .light {
  background-color: #333;
}

.change-light {
  font-size: 1.2rem;
}
<div class="light-container">
  <div class="lights">
    <div class="light red"></div>
    <div class="light yellow"></div>
    <div class="light green"></div>
  </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

Upvotes: 3

Related Questions