Visualizer

In this example below you will see how to do a Visualizer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mohana-shiva, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mohana-shiva ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Visualizer</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body onload="time()">
<center><div id="bigboss">
</div></center>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mohana-shiva/visualizer-xXKZpj */
#bigboss
{
  width:750.35px;
  height:300px;
  border:1px solid white;
}
.small
{
   width:8.2px;
  float:left;
  border:0.1px solid white;
  background: linear-gradient(red, yellow, green,blue);
}

/*Downloaded from https://www.codeseek.co/mohana-shiva/visualizer-xXKZpj */
var time=function()
{   
    setInterval(verify,200);
}
var verify=function()
{ 
 document.getElementById('bigboss').innerHTML=""; 
 var numlist=[];
 while(numlist.length<50)
      {
  var k=Math.floor(Math.random()*51);
 
    if(numlist.indexOf(k)==-1&&k!=0){
	 numlist.push(k);}
	else{
	continue;
	}
   }
for(i=1;i<51;i++)
{document.getElementById('bigboss').innerHTML+="<div id='"+i+"' class='small'></div>";
 
}  
  var j;
  for(n=1;n<51;n++)
    {
     j=n*3; document.getElementById(numlist[n]).style.height=j+"px";
 document.getElementById(numlist[n]).style.marginTop=(300-j)+"px";
    }
}

Comments