JSFiddle - React, Tailwind, and code Playground

by steakpi

HTML

<ul id="setOne">
	<li class="light-red-off"></li>
	<li class="light-amber-off"></li>
	<li class="light-green-off"></li>
</ul>  


<ul id="setTwo">
	<li class="light-red-off"></li>
	<li class="light-amber-off"></li>
	<li class="light-green-off"></li>
</ul>

CSS

ul{margin:0;padding: 0;float:left;}
li{width:50px;height:50px;border-radius: 50%;border:1px solid #ebebeb;list-style: none;}

.traffic-head-unit{background: #000;}

.light-red-on,
.light-red-off{background:#f00;}

.light-amber-on,
.light-amber-off{background: #f60;}

.light-green-on,
.light-green-off{background:#390;}

.light-red-off,
.light-amber-off,
.light-green-off{opacity: 0.1;}

.light-red-on,
.light-amber-on,
.light-green-on{opacity: 1;}

@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
.light-amber-flash {
background: #f60;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */  
-moz-animation:blink normal 1s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 1s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 1s infinite ease-in-out; /* IE */
animation:blink normal 1s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

JavaScript

var LIGHT_STATUS_STYLES = {
	redOn: "light-red-on",
	redOff: "light-red-off",
	amberOn: "light-amber-on",
	amberOff: "light-amber-off",
    amberFlash: "light-amber-flash",
	greenOn: "light-green-on",
	greenOff: "light-green-off"
}

var TrafficLight = function(id,stage,stage1,stage2,stage3,stage4,start){
	
	//pick up id from instance
	this.id = id;

	//set up html location
	var trafficLight = document.getElementById(id),
		lights = trafficLight.getElementsByTagName('li');

	

	//start stage at zero
	this.stage = 0;
	
	//set the status for each stage
	this.stage1 = function(){
		lights[0].className = LIGHT_STATUS_STYLES.redOn;
    	lights[1].className = LIGHT_STATUS_STYLES.amberOff;
    	lights[2].className = LIGHT_STATUS_STYLES.greenOff;
	};
	this.stage2 = function(){
		lights[0].className = LIGHT_STATUS_STYLES.redOn;
    	lights[1].className = LIGHT_STATUS_STYLES.amberOn;
    	lights[2].className = LIGHT_STATUS_STYLES.greenOff;
	};
	this.stage3 = function(){
		lights[0].className = LIGHT_STATUS_STYLES.redOff;
    	lights[1].className = LIGHT_STATUS_STYLES.amberOff;
    	lights[2].className = LIGHT_STATUS_STYLES.greenOn;
	};
	this.stage4 = function(){
		lights[0].className = LIGHT_STATUS_STYLES.redOff;
    	lights[1].className = LIGHT_STATUS_STYLES.amberFlash;
    	lights[2].className = LIGHT_STATUS_STYLES.greenOff;
	};

	//function to start the lights
	this.start = function(){
		
		//return to zero once the final stage has been executed
		if(this.stage == 4){
			this.stage = 0;
		}
		
		//increment each time function is executed
		this.stage++;
		console.log(this.stage);
		
		//get the status for each stage 
		switch(this.stage){
			case 1:
				this.stage1();
				break;
			case 2:
				this.stage2();
				break;
			case 3:
				this.stage3();	
				break;
			case 4:
				this.stage4();	
				break;
		}
		
	}
}

//set instances of TrafficLight
var setOne = new TrafficLight("setOne");
var setTwo = new TrafficLight("setTwo");

//start
setInterval(function () {...