$(document).ready(function() { $("#butt").on("click", function() { randomizer(); }) randomizer(); function randomizer() { var c = $("#container"); c.html(""); var rand = Math.round(Math.random()); var ver = 0; var hor = 0; var r,g,b; var w = Math.round(Math.random() * 13) +8; var h = Math.round(Math.random() * 23) +8; var midX = Math.floor(w/2); var midY = Math.floor(h/2); var newDiv = $("

", {class : "div1"}) ; var x = 0,x2,y2; var y = 0; var range = midX*midY; function colors() { r = Math.floor(Math.random() * 255) ; g = Math.floor(Math.random() * 255) ; b = Math.floor(Math.random() * 255) ; } //creating the divs if(w%2 != 0) { hor = w-1 ; } if(h%2 != 0) { ver = h-1; } //origin ↓↓ if(w%2 != 0 && h%2 !=0 ) { rand = Math.round(Math.random()); if(rand) { colors(); newDiv = $("

", {class : "div1"}).css({ "top" : (midY*11+40) +"px" ,"left" : (midX*11 + 60) + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; } } // ↓ vertical line↓ if(w%2 != 0) { // console.log("h = "+ h); for(var i=0; i", {class : "div1"}).css({ "top" : y +"px" ,"left" : x + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; newDiv = $("

", {class : "div1"}) .css({ "top" : y2 +"px" ,"left" : x + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; } else { } } } // ↓ horizontal line↓ if(h%2 != 0) { for(var i=0; i", {class : "div1"}).css({ "top" : y +"px" ,"left" : x + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; newDiv = $("

", {class : "div1"}) .css({ "top" : y +"px" ,"left" : x2 + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; } } } // end of horizontal //↓quadrant randomizer↓ for(var i=0; i", {class : "div1"}) .css({ "top" : y +"px" ,"left" : x + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; //q1 newDiv = $("

", {class : "div1"}) .css({ "top" : y +"px" ,"left" : x2 + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; //q3 newDiv = $("

", {class : "div1"}) .css({ "top" : y2 +"px" ,"left" : x + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; //q4 newDiv = $("

", {class : "div1"}) .css({ "top" : y2 +"px" ,"left" : x2 + "px"}) ; newDiv.css("background","rgb("+r+","+g+","+b+")"); c.append(newDiv) ; } } } } })

Challenge : Random Symmetrical Pattern