JSFiddle - React, Tailwind, and code Playground

by qustosh

HTML

<!--<div style="left:20px;top:20px" id="1"></div>
<div style="left:100px;top:20px" id="2"></div>
<div style="left:50px;top:40px" id="3"></div>-->

CSS

div{background-color:black;width:50px;height:50px;position:absolute;}

JavaScript

$ = jQuery;
$(function(){
    //$("#1").animate({left:"+=250",top:"+=350"},1000);
    function mc(origin,radius){
        var o = origin,
            r = radius,
            style,
            x,y, id,
            pi = Math.PI,
            ceil = Math.ceil,
            floor = Math.floor;
    
        //center
        $("<div style='left:200px;top:200px'></div>").click(function(){
            for(var i=0;i<8;i++){
                x = floor(200 + 200 * (Math.cos(pi*0.25*i)));
                y = floor(200 + 200 * (Math.sin(pi*0.25*i)));  
                $("#"+ i).animate({left:x+"px",top:y+"px"},500);                
            }
            console.log("hey there");
        }).appendTo($("body"));
        
        for(var i=0;i<8;i++){
            id = i;
            x = floor(200 + 100 * (Math.cos(pi*0.25*i)));
            y = floor(200 + 100 * (Math.sin(pi*0.25*i)));  
            style="left:" + x + "px;top:" + y + "px;";           
            //console.log(style);  
            $("<div style="+ style +" id=" + id + "></div>").appendTo($("body"));                  
        } 

    }
    
    mc();

});