JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

<button id="add">add</button> 
<div id="swatches"></div>

CSS

.swatch {
    width: 20px;
    height: 20px;
    float: left;
}

JavaScript

$(function() {
    function HSVtoRGB(h, s, v) {
        var r, g, b, i, f, p, q, t;
        if (h && s === undefined && v === undefined) {
            s = h.s, v = h.v, h = h.h;
        }
        i = Math.floor(h * 6);
        f = h * 6 - i;
        p = v * (1 - s);
        q = v * (1 - f * s);
        t = v * (1 - (1 - f) * s);
        switch (i % 6) {
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
        }
        return {
            r: Math.floor(r * 255),
            g: Math.floor(g * 255),
            b: Math.floor(b * 255)
        };
    }
    
    function make_swatch() {
        c = Math.round(Math.random() * 255);
        color = [c, "100%", "60%"];
        return '<div class="swatch" style="background-color: hsl(' + color.join(",") + ');"></div>'
    }
    
    function add_swatch() {
        $("#swatches").append(make_swatch());
    }
    
    $("#add").click(function() { add_swatch(); });
    for (var i = 0; i <= 300; i++)
        add_swatch();
})