JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="list"></div>

CSS

.item{
  width: 33.333%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

JavaScript

const hexChars = '0123456789ABCDEF';

function randomColor() {
	let hexCode = '#';
	for(i=0; i<=5; i++) {
  	let randomNum = Math.floor(Math.random() * 16);
    hexCode += hexChars[randomNum];
  }
  return hexCode;
}

function toRange(value, min, max){
    return Math.max(min, Math.min(max, value));
  }

function hexToHSL(H, lighten) {
    var ln;

    if(typeof lighten === 'number'){
      toRange(lighten, 0, 100).toFixed(1);
    }

    // Convert hex to RGB first
    let r = 0, g = 0, b = 0;
    if (H.length == 4) {
      r = "0x" + H[1] + H[1];
      g = "0x" + H[2] + H[2];
      b = "0x" + H[3] + H[3];
    } else if (H.length == 7) {
      r = "0x" + H[1] + H[2];
      g = "0x" + H[3] + H[4];
      b = "0x" + H[5] + H[6];
    }
    // Then to HSL
    r /= 255;
    g /= 255;
    b /= 255;
    let cmin = Math.min(r,g,b),
        cmax = Math.max(r,g,b),
        delta = cmax - cmin,
        h = 0,
        s = 0,
        l = 0;

    if (delta == 0)
      h = 0;
    else if (cmax == r)
      h = ((g - b) / delta) % 6;
    else if (cmax == g)
      h = (b - r) / delta + 2;
    else
      h = (r - g) / delta + 4;

    h = Math.round(h * 60);

    if (h < 0)
      h += 360;

    l = (cmax + cmin) / 2;
    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
    s = +(s * 100).toFixed(1);
    l = +(l*100).toFixed(1);
    console.log((typeof lighteen));
    
    if(typeof lighten === 'function'){
      ln = lighten(l);
    }

    if(ln){
      l = ln;
    }

    return "hsl(" + h + "," + s + "%," + l + "%)";
  }
  
//Function to change page color & text

function isLightColor(color) {
    // Credits goes to: https://awik.io/determine-color-bright-dark-using-javascript/
    // Variables for red, green, blue values
    var r, g, b, hsp;
    
    // Check the format of the color, HEX or RGB?
    if (color.match(/^rgb/)) {

        // If HEX --> store the red, green, blue values in separate variables
        color =...