JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="ram_RAMDISPLAY"></div>
<br>

CSS

div[id^='ram'] {
    border:0px solid darkgreen;
    padding:0;
    margin:0;
}
div[id^='ram'] div[id^='row'] {
    float:left;
}
div[id^='ram'] div[id^='row'] div {
    padding:0;
    margin:0;
    text-align:center;
    font-size:95%;
}

JavaScript

monitoring = function monitoring(id, weight, height,n, speed) {
    var speed = typeof speed == "undefined" ? 1000 : speed;
    var weight = typeof weight == "undefined" ? 512 : weight;
    var height = typeof height == "undefined" ? 512 : height;
    var n = typeof n == "undefined" ? 16 : n;    
    var sw = weight / n;
    var sh = height / n;
   // alert(weight+" - "+height+" - "+sw+" - "+sh);
    var id = "#" + id;
    $(id).width(weight);
    $(id).height(height);
    for (I = 1; I <= n; I++) {
        var div = '<div id="row' + I + '">';
        for (d = n; d > 0; d--) {
            div += '<div style="background-color:#003200"></div>';
        }
        div += '</div>';
        $(id).append(div);
        $(id + " div").children("div").width(sw);
        $(id + " div").children("div").height(sh);
    }


    setInterval(function () {
        var rand = Math.floor(Math.random() * n);
        rand = n - rand;
        var firstrow = $(id + " div:first-child").attr("id");
        $("#" + firstrow).remove();
        I = n;
        var div = '<div id="row' + I + '">';
        for (d = n; d > 0; d--) {

            if (d <= rand) {
                div += '<div style="background-color:#128128"></div>';
            } else {
                div += '<div style="background-color:#003200"></div>';
            }
        }
        div += '</div>';
        $(id).append(div);
        $(id + " div").children("div").width(sw);
        $(id + " div").children("div").height(sh);


    }, speed);
};

//monitoring("ram128x128",100);

monitoring("ram_RAMDISPLAY",32,32,20,200);