JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
</div>
CSS
div {
/*display: inline-block;*/
width: 100%;
float: left;
}
body {
margin: 0;
}
JavaScript
var params = {
lines: [
{
background: '#0fF',
updateTime: 1000,
elements: [
{
background: '#00F',
width: 25
},
{
background: '#f0F',
width: 50
},
{
background: '#00F',
width: 25
}
]
},
{
background: '#00F',
updateTime: 1000,
elements: [
{
background: '#0fF',
width: 25
},
{
background: '#ff0',
width: 25
},
{
background: '#0fF',
width: 25
},
{
background: '#f0F',
width: 25
}
]
},
{
background: '#0fF',
updateTime: 1000,
elements: [
{
background: '#00F',
width: 25
},
{
background: '#f0F',
width: 50
},
{
background: '#00F',
width: 25
}
]
}
]
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function repaint (lineNum) {
var line = document.getElementById("main").childNodes[lineNum+1],
numOfElements = params.lines[lineNum].elements.length;
for (var i = 0; i<numOfElements; i++){
line.childNodes[i].style.backgroundColor = getRandomColor();
}
}
window.onload = function(){
var line,
element,
height = (window.innerHeight || document.documentElement.clientHeight) / params.lines.length,
lines =...