Traffic Signal Light
Today, let’s build a Traffic Light by applying the basic Javascript concepts.
Refer to the below image.
Instructions:
- The HTML button elements should have the ids stopButton, readyButton, and goButton
- The HTML container elements should have the ids stopLight, readyLight, and goLight
By following the above instructions, achieve the given functionality.
- When stopButton is clicked, the background color of the stopLight container and the stopButton element should change to red. The other HTML elements should have their default background colors as shown in the image.
- When readyButton is clicked, the background color of the readyLight container and the readyButton element should change to yellow. The other HTML elements should have their default background colors as shown in the image.
- When goButton is clicked, the background color of the goLight container and the goButton element should change to green. The other HTML elements should have their default background colors as shown in the image.
CSS Colors used:
Source Code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 mt-3 mb-5">
<h1>Traffic Light</h1>
</div>
<div class="col-6 mt-3">
<div class="d-flex flex-column">
<button onclick="colorRed()" id="stopButton">Stop</button>
<button onclick="colorYellow()" id="readyButton">Ready</button>
<button onclick="colorBlue()" id="goButton">Go</button>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="col-6">
<div class="light_box d-flex flex-column justify-content-center">
<button id="stopLight" class="button" type="submit"></button>
<button id="readyLight" class="button" type="submit"></button>
<button id="goLight" class="button" type="submit"></button>
</div>
</div>
</div>
</div>
</body>
</html>CSS
.container {
background-color: #86d2f2;
height: 100vh;
}
h1 {
text-align: center;
font-size: 40px;
font-weight: bold;
}
.button {
background-color: #4b5069;
width: 50px;
height: 50px;
border-radius: 40px;
margin: 5px;
}
#stopButton {
background-color: #1f1d41;
color: #ffffff;
border-radius: 10px;
width: 90px;
padding: 5px;
margin: 20px;
}
#readyButton {
background-color: #1f1d41;
color: #ffffff;
border-radius: 10px;
width: 90px;
padding: 5px;
margin: 20px;
}
#goButton {
background-color: #1f1d41;
color: #ffffff;
border-radius: 10px;
width: 90px;
padding: 5px;
margin: 20px;
}
.light_box {
height: 280px;
width: 100px;
border-radius: 40px;
background-color: #1f1d41;
padding: 20px;
}Javascript
let stopLight = document.getElementById('stopLight');
let readyLight = document.getElementById('readyLight');
let goLight = document.getElementById('goLight');
let stopButton = document.getElementById('stopButton');
let readyButton = document.getElementById('readyButton');
let goButton = document.getElementById('goButton');
function colorRed() {
stopButton.style.backgroundColor = "#cf1124";
readyButton.style.backgroundColor = "#1f1d41";
goButton.style.backgroundColor = "#1f1d41";
stopLight.style.backgroundColor = "#cf1124";
goLight.style.backgroundColor = "#4b5069";
readyLight.style.backgroundColor = "#4b5069";
}
function colorYellow() {
readyButton.style.backgroundColor = "#f7c948";
stopButton.style.backgroundColor = "#1f1d41";
goButton.style.backgroundColor = "#1f1d41";
readyLight.style.backgroundColor = "#f7c948";
goLight.style.backgroundColor = "#4b5069";
stopLight.style.backgroundColor = "#4b5069";
}
function colorBlue() {
goButton.style.backgroundColor = "#86d2f2";
readyButton.style.backgroundColor = "#1f1d41";
stopButton.style.backgroundColor = "#1f1d41";
goLight.style.backgroundColor = "#86d2f2";
stopLight.style.backgroundColor = "#4b5069";
readyLight.style.backgroundColor = "#4b5069";
}Github Link: https://ravikiran991.github.io/Traffic-Signal-Light/
Repository: https://github.com/ravikiran991/Traffic-Signal-Light
