JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>
    <button>Click</button>
        
</body>

CSS

.circle{
    position:absolute;
    width:20px;
    height:20px;
    /*background-color:rgb(155,200,54);*/
    border-radius:50%;
}

JavaScript

$(document).ready(function(){
    var item = 0;
    
    var distop    = 200;
    var disleft   = 200;    
    var speedsquare  = 500;
    
    $("button").click(function(){
         item++;
         //alert(item);
         var top = Math.floor((Math.random() * 150) + 1);
         var left = Math.floor((Math.random() * 750) + 1);
         var r = Math.floor((Math.random() * 240) + 1);
         var g = Math.floor((Math.random() * 240) + 1);
         var b = Math.floor((Math.random() * 240) + 1);
         var color = "rgb("+r+","+g+","+b+")";
         //alert(color);
         $("body").append('<div id="'+item+'\"></div>');
         $('#'+item+'').addClass("circle").css({'top': ''+ top +'px','left': ''+ left +'px', 
                                                'background-color': ''+color+''});           
    });
    
    function animate (){
        setInterval(function(){
             $( '#'+item+'' ).animate({ "top": "+="+distop+"px",
                                        "left": "+="+disleft+"px", },speedsquare, "swing");
             $( '#'+item+'' ).animate({ "top": "-="+distop+"px",},speedsquare, "swing");
             
            $( '#'+item+'' ).animate({  "left": "-="+disleft+"px", },speedsquare, "swing");
            $( '#'+item+'' ).animate({  "top": "+="+distop+"px", },speedsquare, "swing");
            $( '#'+item+'' ).animate({ "top": "-="+distop+"px",
                                        "left": "+="+disleft+"px", },speedsquare, "swing");
            $( '#'+item+'' ).animate({  "left": "-="+disleft+"px", },speedsquare, "swing");
         })    
    }
    animate();
    
});