JSFiddle - React, Tailwind, and code Playground

by Venkatesan S

HTML

<div>
<canvas id="myCanvas0"></canvas>
<canvas id="myCanvas1"></canvas>
<canvas id="myCanvas2"></canvas>
<canvas id="myCanvas3"></canvas>
<canvas id="myCanvas4"></canvas>
<canvas id="myCanvas5"></canvas>
<canvas id="myCanvas6"></canvas>
<canvas id="myCanvas7"></canvas>
<canvas id="myCanvas8"></canvas>
<canvas id="myCanvas9"></canvas>
<canvas id="myCanvas10"></canvas>
<canvas id="myCanvas11"></canvas>
<canvas id="myCanvas12"></canvas>
<canvas id="myCanvas13"></canvas>
<canvas id="myCanvas14"></canvas>
<canvas id="myCanvas15"></canvas>
<canvas id="myCanvas16"></canvas>
<canvas id="myCanvas17"></canvas>
<canvas id="myCanvas18"></canvas>
<canvas id="myCanvas19"></canvas>
<canvas id="myCanvas20"></canvas>
</div>

CSS

div{
    width: 700px;
    height: 450px;
    background-color: #333333;
    padding-top: 10px;
    padding-left: 10px;
}
canvas{
    height: 140px;
    width: 95px;
    background : url("http://media.virbcdn.com/cdn_images/resize_1024x1024/5c/8407e57c63c3476d-MarvinFoxPhotographyPortfoliio35.jpg");    
    visibility: hidden;
}

JavaScript

function generateRandom() {
    var canvas = Math.floor(Math.random() * 20);
    return canvas;
}

setInterval(function(){
	var x = generateRandom();
    var id = "myCanvas"+x;
  	console.log(id);
    var elem = document.getElementById(id);
    elem.style.visibility = 'visible';

	var fadeTarget = elem;
    fadeTarget.style.opacity = 1;
    var fadeEffect = setInterval(function () {
        if (fadeTarget.style.opacity < 0.1) {
            clearInterval(fadeEffect);
        } else {
            fadeTarget.style.opacity -= 0.1;
        }
    }, 150);
    
},1000)