Playing with Random Colors

Just a small jQuery script to adjust colors on the fly.

by psyne

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<h1>Playing with Colors</h1>
<div id="box"></div>

<div class="btn-group">
  <a id="genColor" class="btn btn-large btn-inverse" href="#"><i class="icon-user icon-white"></i> Click for a New Color </a>
  <a class="btn btn-large btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu wide-menu">
    <li><a href="#" id="originalColor"><i class="icon-pencil"></i> Restore Original Color</a></li>
    <li class="divider"></li>
      <li class='sectionTitle'><h5>Last Five Colors</h5></li>
    <li class="divider"></li>
    <div id="historyMenu">
        
    </div>
  </ul>
</div>

CSS

#box{
    height: 400px;
    width: 400px;
    margin: 25px 0 25px 0;
    border-radius: 15px;
    box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.5);
}

#genColor{
    width: 330px;
}

.wide-menu{
    width: 400px;
}

li.sectionTitle{
    text-align: center;
}

.colorSwatch{
    background-color: black;
    height: 25px;
    width: 25px;
    display: inline-block;
    margin-left: 20px;
    margin-right: 5px;
}
.prevColor{
    position: relative;
}

.prevColor > span:hover{
    background-color: #0081C2;
    color: white;
}

.prevColor > span {
    position: absolute;
    width: 340px;
    top: -13px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 17px;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    var initColor = rc(),
        colorArray = new Array(initColor),
        firstClick = 0,
        historyItems = 10;

    // generate a unique number for the RGB
        
    function rn(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Return a random rgb color
    
    function rc() {
        return 'rgb(' + rn(0, 255) + ',' + rn(0, 255) + ',' + rn(0, 255) + ')';
    }

    // New Color on button click
    
    $('#genColor').on('click', function() {
        $('#box').css('backgroundColor', function() {
            var color = rc(),
                currentColor = $('#box').css('backgroundColor'),
                prevColor = '<li><span class="prevColor" data-color="' + currentColor + '"><i class="colorSwatch" style="background-color: ' + currentColor + ';"></i><span> ' + currentColor + '</span></span></li>';

            // Check to make sure we are storing the initial color twice
            
            if (firstClick != 0) {
                colorArray.push(currentColor);
            } else {
                firstClick = 1;
            }

            $('#box').css('backgroundColor', color);

            // Keeping the history menu managable
     
            if ($('#historyMenu').children().length > historyItems ) {
                $('#historyMenu li:first-child').remove();
                $('#historyMenu').append(prevColor);
            } else {
                $('#historyMenu').append(prevColor);
            }


        });
    });

    //Restore Original Color
    $('#originalColor').click(function() {
        $('#box').css('backgroundColor', function() {
            $('#box').css('backgroundColor', initColor);
        });
    });

    //Restore Prior Color
    $('#historyMenu').on('click', '.prevColor', function() {
        var clickedColor = $(this).data('color');
        $('#box').css('backgroundColor', clickedColor);
    });

    //Set color on load       
   ...