Random Color JS

by sinky

HTML

<div id="colorsrnd"></div>
<hr/>
<div id="colorfall"></div>

CSS

body {
      line-height:0;
  }
  .color {
      display: inline-block;
      height: 50px;
      width: 50px;
  }
  .color:hover {
      box-shadow: inset 0 0 10px -2px #000;
  }
  .hide {
      display: none;
  }

JavaScript

loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function () {
        var numberOfItems = 32;
        var maxNumberOfItems = 100;

        $(document).ready(function () {
            addRandomRow(numberOfItems, '#colorsrnd'); // add X colors

            // Random ColorFall
            ColorFall = setInterval(function () {
                var sel = '#colorfall';
                if ($(sel + " .color").length > maxNumberOfItems) {
                    $(sel + " .color:not('.rm'):lt(" + numberOfItems + ")").addClass('rm').fadeOut(function () {
                        $(this).remove();
                    });
                    //window.clearInterval(ColorFall);
                }
                numberOfItems = Math.floor($('body').innerWidth() / 50); // One row in browser
                addRandomRow(numberOfItems, sel);
            }, '200');


        }); // END jQuery.ready
});

function addRandomRow(numberOfItems, sel) {
    for (var i = 1; i <= numberOfItems; i++) {
        var hexColour = (function co(lor) {
            return (lor += [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)]) && (lor.length == 6) ? lor : co(lor);
        })(''); // http://www.paulirish.com/2009/random-hex-color-code-snippets/
        var color = $('<div class="color">').css('background-color', '#' + hexColour).hide().attr('title', '#' + hexColour).click(function () {
            console.log($(this).attr('title'));
            prompt('HEX Color', $(this).attr('title'));
        });
        $(sel).append(color).show();
        color.fadeIn();
    }
}

function loadScript(url, callback) {

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
               ...