JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="sound">
    <div id="sound-up"></div>
    <div id="sound-down"></div>
</div>

CSS

#sound {
    width: 500px;
    height: 500px;
    border:1px solid black;
}
#sound-up {
    width: 500px;
    height: 250px;
    position: relative;
    top: 0;
    left: 0;
}
#sound-down {
    width: 500px;
    height: 250px;
    position: relative;
    bottom: 0;
    left: 0;
}
#sound-up #sound-up-box, #sound-down #sound-down-box {
    height:250px;
    display: -webkit-inline-box;
}
#sound-up #sound-up-box {
    height:250px;
}
#colored, #noncolored {
    width: 100%;
    height: 25px;
    display: table-caption;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}
#noncolored {
    background: darkblue;
}
#colored {
    background: #000;
}

JavaScript

var w = $("#sound").width();
var h = $("#sound").height();
h = h / 2;
var chartw = (w - 0) / 100;
var charth = h / 10;
htmlup = '';
htmldown = '';
for (i = 0; i < 100; i++) {
htmlup += '<div id="sound-up-box"></div>';
htmldown += '<div id="sound-down-box"></div>';
}
$("#sound #sound-up").html(htmlup);
$("div[id='sound-up-box']").width(chartw);
$("#sound #sound-down").html(htmldown);
$("div[id='sound-down-box']").width(chartw);

setInterval(function(){
htmlup = '<div id="sound-up-box">';
htmldown = '<div id="sound-down-box">';
var rand = Math.floor(Math.random() * 10);
for (i = 0; i < 10; i++) {
    if (rand > i) {
        htmlup += '<div id="noncolored"></div>';
    } else {
        htmlup += '<div id="colored"></div>';
    }

}
for (i = 10; i > 0; i--) {
    if (rand < i) {
        htmldown += '<div id="colored"></div>';
    } else {
        htmldown += '<div id="noncolored"></div>';
    }

}
htmldown += '</div>';
htmlup += '</div>';

$("#sound #sound-up div#sound-up-box:first-child").remove();
$("#sound #sound-down div#sound-down-box:first-child").remove();
$("#sound #sound-up").append(htmlup);
$("#sound #sound-down").append(htmldown);
$("div[id='sound-up-box']").width(chartw);
$("div[id='sound-down-box']").width(chartw);
$("div[id='colored']").width(chartw);

},1);