JSFiddle - React, Tailwind, and code Playground

by nikita_turing

HTML

<div id="ari" ></div>
<button id="but_more" >NEW colors! </button>
<button id="but_keep" >More colors! </button>
<div id="test"></div>

CSS

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

.cont{
    <<<<<<
}

#ari {
    width: 100%;
    background: lightgrey;
    height: 50px;
    
    
}

JavaScript

$.farbe='leo';

function RGB2Color(r, g, b) {
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}

function byte2Hex(n) {
    var nybHexString = "0123456789ABCDEF";
    return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}

function makeColorGradient(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) {
    var colors = []
    if (len == undefined) len = 50;
    if (center == undefined) center = 128;
    if (width == undefined) width = 127;

    for (var i = 0; i < len; ++i) {
        var red = Math.sin(frequency1 * i + phase1) * width + center;
        var grn = Math.sin(frequency2 * i + phase2) * width + center;
        var blu = Math.sin(frequency3 * i + phase3) * width + center;
        colors.push(RGB2Color(red, grn, blu));
    }

    return colors;
}

$('.cont').live('click', function () {
window.farben.push(window.col);
});



$('#but_more').live('click', function () {

    center = 128;
    width = 127;
    frequency = 2.4;
    len = 10;

    window.col = makeColorGradient(frequency, frequency, frequency, Math.random() * 10, Math.random() * 10, Math.random() * 10, center, width,len);
    
   $("#test").append('<div class="cont">');
    var content ='';
    for (var i = 0; i < col.length; i++) {
        content += "<div class=test style='background:" + col[i] + ";'></div>";
        }
     $("#test").html(content);

});


$('#but_keep').live('click', function () {

    window.farben.push(window.col);
    $("#ari").append(window.col.toString);
    
    center = 128;
    width = 127;
    frequency = 2.4;
    len = 10;

    var col = makeColorGradient(frequency, frequency, frequency, Math.random() * 10, Math.random() * 10, Math.random() * 10, center, width,len);
    
   $("#test").append('<div class="cont">');
    var content ='';
    for (var i = 0; i < col.length; i++) {
        content += "<div class=test style='background:" + col[i] + ";'></div>";
        }
    ...