JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="ram"></div>

CSS

#ram {
    width:300px;
    height:400px;
    border:1px solid darkgreen;
    padding:0;
    margin:0;
}
#ram div[id^='row'] {
    float:left;
}
#ram div[id^='row'] div {
    width:23px;
    height:23px;
    border:1px solid darkgreen;
    padding:0;
    margin:0;
    text-align:center;
}
.actived {
    background-color:#00ff00;
}

JavaScript

for (I = 1; I <= 12; I++) {
    var div = '<div id="row' + I + '">';
    for (d = 1; d <= 16; d++) {
        div += '<div>' + d + '</div>';
    }
    div += '</div>';
    $("#ram").append(div);
}

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

        if (d >= rand) {
            div += '<div class="actived">' + d + '</div>';
        } else {
            div += '<div>' + d + '</div>';
        }
    }
    div += '</div>';
    $("#ram").append(div);


}, 1000);