Traffic Signal Light using Javascript | JS Projects for Beginners with Code

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

Related Posts

Time Converter Using JavaScript | Simple JS Projects for Beginners

Time Converter Today, let’s build a Time Converter by applying the basic java script concepts. Refer to the below image. Instructions: The HTML input element for entering the number…

JS Program to log the value located at Given Index

Access the values of an array Given an array. myArray = [25, false, “green”, “apple”]Write a Js program to log the value located at the given index….

JavaScript Program to Create & Log an Array

Create & Log an Array Write a JS program to log an array with the given values.‘Orange’, 25, 100, true, 33.58. OutputThe output should be a single…

Build Simple Color Picker using JavaScript | JS Projects with Code

let’s build a Color Picker by applying the basic JavaScript concepts. Refer to the below image. Instructions: The HTML container element that is wrapping all the HTML…

Leave a Reply

Your email address will not be published.