Random Square Generator

make squares with random colors in random places.

CSS

.hexagons {
  position:relative;
  transition: all 1s;
}
p#circle {
  height: auto;
  width: 200px;
  position: relative;
  border: 1px solid;
  margin: 57px;
}

JavaScript

// fix me!  Make me randomly return 1 of 2 colors
function pickColor(){
    var colorArray = ["url(http://www.iconsdb.com/icons/preview/deep-pink/hexagon-xxl.png) no-repeat", "url(http://res.cloudinary.com/demo/image/upload/hexagon_sample.png) no-repeat"];
    return colorArray[Math.floor(Math.random() * colorArray.length)];
}

// fix me!  Make me randomly return a number.  You can pick the range of numbers returned.
var leftPos = [];
var topPos = [];
function pickSize() {
		var randomSize = Math.floor((Math.random()*40)+10) + "px";
    return randomSize;
}
function pickPos(posType){
    
		if(posType == "left") {
      var randomNum = Math.floor((Math.random()*700)+50) + "px";
      while(leftPos.indexOf(randomNum) != -1) {
          var randomNum = Math.floor((Math.random()*700)+50) + "px";
      }
    	leftPos.push(randomNum);
    } else {
      var randomNum = Math.floor((Math.random()*20)+10) + "px";
      while(topPos.indexOf(randomNum) != -1) {
          var randomNum = Math.floor((Math.random()*20)+10) + "px";
      }
    	topPos.push(randomNum);
    }
    return randomNum;
}

function addSquare(){
    var div = document.createElement("div");
    
    // fix me! Use pickColor to randomly assign a color to the square's background
    div.style.background = pickColor();
    div.style.backgroundSize = "contain";
		var size = pickSize();
    div.style.height = size;
    div.style.width = size;
    div.className += ' hexagons'
    // Right now this doesn't change the left or top values since pickPos hasn't been implemented  :(
    div.style.left=pickPos("left");
    div.style.top=pickPos("top");
    
    // Extra credit! Also set the width and height of the squares with pickPos
    
    $("body").append(div);
}
var count = 0;
var intervalId = window.setInterval(function(){
	addSquare();
  count++;
  if(count > 15) {
    window.clearInterval(intervalId);
  }
},100);