JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<div class="light">
  <div class="red">
  </div>
  <div class="yellow">
  </div>
  <div class="green">
  </div>
</div>
<div class="light">
  <div class="red">
  </div>
  <div class="yellow">
  </div>
  <div class="green">
  </div>
</div>

CSS

.light{
  height: 135px;
  width: 54px;
  border: thin solid black;
  padding: 5px;
  box-sizing: border-box;
}

.red, .yellow, .green{
  height: 33px;
  width: 33px;
  border-radius: 33px;
  margin: 5px;
  border: thin solid black;
}

JavaScript

//es6
//make a stoplight
//box around three lights red, yellow, green
//click light will go to next one red -> green -> yellow -> red

let light = document.getElementsByClassName('light');
let lights = {};

let changeLight = function(l,red,yellow,green){
	console.log('l:',l);
	if(lights[l] === 'red'){
  	red.style.backgroundColor = 'white';
    green.style.backgroundColor = 'green';
    lights[l] = 'green';
  }else if(lights[l] === 'green'){
  	green.style.backgroundColor = 'white';
    yellow.style.backgroundColor = 'yellow';
    lights[l] = 'yellow';
  }else if(lights[l] === 'yellow'){
  	yellow.style.backgroundColor = 'white';
    red.style.backgroundColor = 'red';
    lights[l] = 'red';
  }
}

for(const l in light){


	let red = light[l].querySelector('.red');
	let yellow = light[l].querySelector('.yellow');
	let green = light[l].querySelector('.green');
  console.log('red:',red);
 	red.style.backgroundColor = 'red';
  lights[l] = 'red';
  
  red.addEventListener('click', () => changeLight(l,red,yellow,green) );
  green.addEventListener('click', () => changeLight(l,red,yellow,green));
  yellow.addEventListener('click', () => changeLight(l,red,yellow,green));
  
}