JSFiddle - React, Tailwind, and code Playground

by gwwar

HTML

<div class="" id="trafficBox">
    <div class="light" id="top">
    </div>
    <div class="light" id="middle">
    </div>
    <div class="light" id="bottom">
    </div>
</div>

CSS

#trafficBox {
    width: 100px;
    height: 300px;
    margin: 20px;
    background-color: lightgrey;
    padding: 10px;
}

.light {
    margin: 10px;
    width: 80px;
    margin-top: 20px;
    height: 80px;
    background-color: grey;
    border-radius: 60%;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

JavaScript

//Dig Vargas 
var clickHandler = function() {
    
    
    if ($(".light.green").length > 0) {
        $("#middle").toggleClass("yellow");
        $("#bottom").toggleClass("green");
    } else if ($(".light.yellow").length > 0) {
        $("#top").toggleClass("red");
        $("#middle").toggleClass("yellow");
    } else {
        $("#top").toggleClass("red");
        $("#bottom").toggleClass("green");
    }
    
}
/*
$.ajax() {
    HTTPREquest;
    path: 'trafficcolor/which';
    mime-type: json; // ?
    success: function(str) {
        if (str === "green") {
            $("#bottom").toggleClass("green");
        } else if (str === "red") {
            $("#top").toggleClass("red");   
        } else {
            $("#middle").toggleClass("yellow");
        }
            
        
    }
}*/

$("#bottom").toggleClass("green");
$("body").on("click", clickHandler);