JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<div class="canvas">

<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div>
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div>
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div>
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div>
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div>
<div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div><div class="pixel"></div>
</div>
<div class="tools">
<select class="colorPicker">
<option>Color</option>
<option>red</option>
<option>green</option>
<option>blue</option>
<option>black</option>
<option>white</option>
<option selected="selected">yellow</option>
<option>green</option>
<option>purple</option>
<option>gray</option>
</select>
</select>
</div>
</div>

CSS

.canvas { 
  width: 180px; 
  background-color: #ccc;  
  line-height: 10px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
.pixel { 
  display: inline-block;
  width: 29px; 
  height: 29px;
  border-top: solid 1px #ccc; 
  border-left: solid 1px #ccc; 
  background-color: #fff; 
}

JavaScript

var pixels = document.querySelectorAll(".pixel");

pixels.forEach(function(pixel){
	pixel.addEventListener("click", function(){
  	draw(this);
  });
});

document.querySelector(".colorPicker").addEventListener("change", function(){
  color = this.value;
});

var color = "yellow";

var draw = function(pixel) {
	pixel.style.backgroundColor = color;
};