$(document).ready(function() {

  generateSquares(150);

  $('body').on('keyup', '#regenSquares', function() {

    generateSquares($(this).val());

  });

});

​

function generateSquares(squares) {

  if (squares === '') {

    squares = 150;

  }

  $('#squares').html('');

  var largestSquare = 120;

  var smallestSquare = 50;

  var colours = [

    '#53a1cc',

    '#de5c5a',

    '#ffe666',

    '#c2e8ae',

    '#946fb0'

  ];

  squares = parseInt(squares);

  // noprotect

  for (var i = 0; i < squares; i++) {

    var colour = colours[Math.floor((Math.random() * (colours.length - 1)) + 1)];

    var squareSize = Math.floor((Math.random() * largestSquare) + smallestSquare);

    var topPos = Math.floor((Math.random() * (parseInt($('#squares').height()) - squareSize)) + 0);

    var leftPos = Math.floor((Math.random() * (parseInt($('#squares').width()) - squareSize)) + 0);

    var opacity = Math.random() * 1;

    console.log(opacity);

    $('#squares').append('<div style="background-color:' + colour + ';width:' + squareSize + 'px;height:' + squareSize + 'px;position:absolute;top:' + topPos + 'px;left:' + leftPos + 'px;opacity:' + opacity + '" />');

  }

}