JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

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

CSS

div[id^='ram'] {
    border:1px 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;
}
.actived {
    background-color:#00ff00;
}

JavaScript

rgb = function rgb() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

monitoring = function monitoring(id,speed)
{
var speed = typeof speed == "undefinde"? 1000:speed;    
var wh = id.replace("ram","");
  	wh = wh.split("x");
var w = wh[0];
var h = wh[1];
var sw = w/12;
var sh = h/12;
//alert(w+"-"+h+"-"+sw+"-"+sh);
    var id = "#"+id;
$(id).width(w);
$(id).height(h);   
    for (I = 1; I <= 12; I++) {
    var div = '<div id="row' + I + '">';
    for (d = 12; d >0 ; d--) {
        div += '<div style="background-color:#064">0</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() * 15);
    rand = 15 - rand;
    var firstrow = $(id+" div:first-child").attr("id");
    $("#" + firstrow).remove();
    I = 12;
    var div = '<div id="row' + I + '">';
   for (d = 12; d >0 ; d--) {

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


}, speed);
};

monitoring("ram256x256",1000);