JSFiddle - React, Tailwind, and code Playground

by eitanp461

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="results"></div>

CSS

.square{
possition:absolute,
        z-index:0;
    border:none;

}

JavaScript

var Square= function(){
    
    this.create=function(){
        var $sqr = $("<div class='square'/>");
        var maxHeight = $( window ).width();
        var maxWidth =$( window ).height()
        var height= this.generateSize(200)-height;
        var width = this.generateSize(200)-width;
        $sqr.css({
            height:height,
            width:width,
            top:this.generateSize(maxHeight),
            left:this.generateSize(maxHeight),
            backgroundColor:this.randomColor()
        });
        return $sqr;
    };
    this.generateSize=function(max){
        return  Math.floor((Math.random() * max) + 1);
    }; 
    this.randomColor=function(){
        return 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';
    }

};

for(var i=0; i<=10;i++){
    var sq=new Square();
    $("#results").append(sq.create());
}