JSFiddle - React, Tailwind, and code Playground

by gwwar

HTML

<ul>
    <li>
        <div id="r" class="stoplight"></div>
    </li>
    <li>
        <div id="y" class="stoplight"></div>
    </li>
    <li>
        <div id="g" class="stoplight"></div>
    </li>
</ul>

CSS

ul{
    list-style:none;
}
 
.stoplight{
    border-radius:50%;
    width:100px;
    height:100px;
}

#r{
    background-color:#FF0000;
}
#y{
    background-color:#FFFF00;
}
#g{
    background-color:green;
}

.hide{
    display:none;
};

.show{
    display:block;
}

JavaScript

$("#g").click(function(){
    $("#g").hide();
    $("#y").show();
});

$("#r").click(function(){
    $("#r").hide();
    $("#g").show();
});

$("#y").click(function(){
    $("#y").hide();
    $("#r").show();
});

//ryan haynes - had to fill out $.ajax
<!-- $.ajax({
    type: "GET",
    url : "/stoplight",
    success : function(data) {
        if(data.equals("red"){
             //$("#r").show()
               $("#y").hide()
               $("#g").hide()
        }
   else if(data.equals("green"){
             //$("#g").show()
               $("#r").hide()
               $("#y").hide()
        }
     else  if(data.equals("yellow"){
             //$("#y").show()
               $("#r").hide()
               $("#g").hide()
        }
           
    },
    error : function() {
    }
});
 -->