JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<a>Input String in the format</a><br /><br />
<a>["#4cc06b", "#7b79f3", "#8d4cc0", "#8c5d2a", "#f379be", "#4c71c0", "#f3e179", "#9af379", "#2a8c79", "#c04c4f", "#92c04c", "#8c2a82", "#79e1f3", "#402a8c", "#308c2a"]</a><br /><br />

<input type="text" id="str">

    
    
<input type="button" id="dr" value="Draw">    
    <a id="err">Invalid Hex Codes: </a><br>
    <div style="height: 50px"></div>    

    <div id="wr" class="wrap"></div>

CSS

.wrap {
  clear:left;
}
.color {
    border: 1px solid silver;
    width: 56px;
    height: 56px;
    float: left;
    border-radius: 5px;
    margin: 1px 1px 1px 1px;
    position: relative;
}
.color:hover {
    color:#FFF;
    width: 76px;
    height: 76px;
    margin: -10px -9px -10px -10px;
    position: relative;
    z-index: 3;
    overflow:hidden;
    opacity: .8;
}

.rgb {
    width: 56px;
    height: 56px;
    opacity:0;   
}
.color:hover .rgb {
    width: 76px;
    height: 76px;
}
.rgb:hover { 
    padding: 28px 14px 10px ;
    opacity: 1;
}

#str {
  width: 90%   
}
}

JavaScript

var input = document.getElementById("str");
var button = document.getElementById("dr");
var err = document.getElementById("err");
var wr = document.getElementById("wr");
var a, def;

button.addEventListener("click", function () {
    while (wr.hasChildNodes()) {
         wr.removeChild(wr.lastChild);
    }
    err.innerHTML = "Invalid Hex Codes: ";
    
    s = input.value;
    def = false;

        s = s.replace (/[^#a-zA-Z0-9]+/g,"")
            .replace(/#/g,",#").substr(1);
        a = s.split(",");



    if (!a instanceof Array)
        alert("Expected " + a + " to be an Array");
    else {
        if (def) {
            var d = document.createElement("div");
            d.innerHTML = 'Using default string for demo purposes:' + JSON.stringify(a) + '<br>';
            d.style.height = "50px";
            wr.appendChild(d);
        }
        for (var i = 0, j; j = a[i++];) {
            if (j.length != 7) {
                err.innerHTML += j + " ";
                continue
            }
            var color = document.createElement("div");
            color.style["background-color"] = j;
            color.className = "color";
            
            var text = document.createElement("div");
            text.innerHTML = j;
            var rgb = j.substr(1).match(/(.{2})/g);
            var red = rgb.reduce(function (a, b, c) {
                return ((c == 1 ? parseInt(a, 16) : a) + parseInt(b, 16)) / 2
            })
            text.style.color = "#" + rgb.map(function (a) {
                return (a = ~~ (((a = parseInt(a, 16)) + (red < 120 ? 255 : 0)) / 2)) < 16 ? 0 : "" + a.toString(16)
            }).join("")
            text.className = "rgb";

            color.appendChild(text);
            wr.appendChild(color);
        }
    }
});