JSFiddle - React, Tailwind, and code Playground

by Laurel Bruggeman

HTML

<div id="image"></div>
<div id="pixel"></div>

SCSS

$buckets: 10;
$circleSize: 2px;

* {
  box-sizing: border-box;
}

.pixel {
  width: 10px;
  height: 10px;
  // border: 1px solid gray;
}

.pixel-row {
  display: flex;
}

.box {
  width: $circleSize * ($buckets + 1);
  height: $circleSize * ($buckets + 1);
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -1px;
  border: 1px solid gray;
}

.row {
  display: flex;
  // margin-top: -1px;
  
  &:nth-child(2n) {
    margin-left: $buckets * 1px + 1px;
  }
}

.circle {
  border: 1px solid gray;
  border-radius: 50%;
}

#image {
}

@for $i from 1 through $buckets {
  .size-#{$i} {
    width: $i * $circleSize;
    height: $i * $circleSize;
  }
}

JavaScript

const MAX = 16777215;
const BUCKETS = 10;
const bucketSize = MAX / BUCKETS;
const PIXEL_WIDTH = 2;

decimalColorToHTMLcolor = (number) => {
    var intnumber = number - 0;
 
    // isolate the colors - really not necessary
    var red, green, blue;
 
    // needed since toString does not zero fill on left
    var template = "#000000";
 
    // in the MS Windows world RGB colors
    // are 0xBBGGRR because of the way Intel chips store bytes
    red = (intnumber&0x0000ff) << 16;
    green = intnumber&0x00ff00;
    blue = (intnumber&0xff0000) >>> 16;
 
    // mask out each color and reverse the order
    intnumber = red|green|blue;
 
    // toString converts a number to a hexstring
    var HTMLcolor = intnumber.toString(16);
 
    //template adds # for standard HTML #RRGGBB
    HTMLcolor = template.substring(0,7 - HTMLcolor.length) + HTMLcolor;
 
    return HTMLcolor;
} 

const hexToRgb = (hex) => {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
const componentToHex = (c) => {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}
const rgbToHex = (r, g, b) => {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

const _createImage = (imageMap) => {
	const table = document.getElementById('image');
  
  imageMap.forEach(row => {
     const rowContainer = document.createElement('div');
     rowContainer.className = "pixel-row";
     
  	row.forEach(elem => {
     const container = document.createElement('div');
     container.className = 'pixel';
   	 container.style.backgroundColor = `${elem}`;
     
     rowContainer.appendChild(container);
    })
    table.appendChild(rowContainer);
  })
};

const _addToTable = ({ text, color, className }, rowIndex) => {
   const container = document.createElement('div');
   container.className = 'box';
   container.style.backgroundColor =...