bgb-2015-color-randomizer

Color Randomizer

by johnnytrinh

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<title>Random Color Generator</title>

  <button id="button">Click me</button>
  <button id="colorset">Switch to RGB</button>
  <ul>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
       ...

CSS

body {
  text-align: center;
}
ul {
  width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style:none;
}
li {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px;
  border-radius: 3px;
  line-height: 100px;
  text-align: center;
}

JavaScript

// random color generator by mtf

var safeColors = ['00','33','66','99','cc','ff', '11', '22', '44', '55'];
var rand = function() {
    return Math.floor(Math.random()*10);
};
var randomColor = function() {
    var r = safeColors[rand()];
    var g = safeColors[rand()];
    var b = safeColors[rand()];
    return "#"+r+g+b;
};
var rnd = function() {
    return ("0"+Math.floor(Math.random()*256).toString(16)).substr(-2,2);
};
var rndColor = function() {
    var r = rnd();
    var g = rnd();
    var b = rnd();
    return "#"+r+g+b;
};
$(document).ready(function() {
    var RGBsafe = true;
    var txt = "";
    var func = randomColor;
    var newColor;
    $('#button').click(function() {
        $('li').each(function() {
            newColor = func().toUpperCase();
            $(this).animate(
              {'backgroundColor':newColor},500
            ).html('<span>'+newColor+'</span>');
        });
    });
    $('#colorset').click(function() {
        RGBsafe = !RGBsafe;
        func = !RGBsafe ? rndColor : randomColor;
        txt = RGBsafe ? "Switch to RGB" : "Switch to Web Safe";
        $(this).text(txt);
        $('#button').trigger('click');
    });
});