JSFiddle - React, Tailwind, and code Playground

by villapardo

HTML

<div id="bartfast"></div>

CSS

.black {

    color: #000000;
}

.white {

    color: #FFFFFF;

}

JavaScript

var writeTo = document.getElementById("bartfast");

var hexPattern = "0FF00FF00FF00FF0"; // 0F hex = binary 00001111 = |    ████| F0 = |████    |
//var hexPattern = "3C42818124E7E724"; // headphones
//var hexPattern = "7FBF97C3E9FDFEFF"; // lightning bolt
//var hexPattern = "92D5B59595959592"; // "NO"
//"1818FFFF18181818" is a cross
/** Two hex digit pairs create one line: 0 is white, 1 is black
 * 0 - 0 0 0 0 -|    |
 * 1 - 0 0 0 1 -|   █|
 * 2 - 0 0 1 0 -|  █ |
 * 3 - 0 0 1 1 -|  ██|
 * 4 - 0 1 0 0 -| █  |
 * 5 - 0 1 0 1 -| █ █|
 * 6 - 0 1 1 0 -| ██ |
 * 7 - 0 1 1 1 -| ███|
 * 8 - 1 0 0 0 -|█   |
 * 9 - 1 0 0 1 -|█  █|
 * A - 1 0 1 0 -|█ █ |
 * B - 1 0 1 1 -|█ ██|
 * C - 1 1 0 0 -|██  |
 * D - 1 1 0 1 -|██ █|
 * E - 1 1 1 0 -|███ |
 * F - 1 1 1 1 -|████|
 **/

//convert a hex value to a binary value (at least 8 digits long
var hex2bin = function (hecks) {
    var hex2dec = parseInt(hecks, 16);
    var dec2bin = hex2dec.toString(2);
    //while makes sure there are leading zeroes
    while (dec2bin.length < 8) {
        dec2bin = "0" + dec2bin;
    }
    return dec2bin;
};
var result = "";
var hexArray = [];

for (var k = 0; k < hexPattern.length; k += 2) {
    hexArray.push(hexPattern.slice(k, k + 2));
}

for (var j = 0; j < hexArray.length; j++) {
    var code = hexArray[j];
    var frabjot = hex2bin(code);
    for (var i = 0; i < 8; i++) {
        if (parseInt(frabjot[i], 2)) {
            result = result + "<span class='black'>██</span>";
        } else {
            result = result + "<span class='white'>██</span>";
        }
    }
    result = result + "<br />";
    writeTo.innerHTML = result;

}