beautifulcode/simon-says

## simon-says
<html>

  <head>

    <style>

      #wrapper{}
      .box{float: left; border: 1px solid black;}
      #main{width: 500px; height: 500px;}

      .quad-holder{float: left; width: 450px; }
      .quad{width: 100px; height: 100px; display: block; margin: 20px;}

      .red{background: red;}
      .green{background: green; }
      .blue{background: blue;}
      .yellow{background: yellow;}

      .clear{display: block; clear: both;}

    </style>

    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>

    <script>
      $(document).ready(function(){

        var main = $('#main');
        var quads = $('.quad');

        $('.quad').click(function(e){
          var quad = $(e.currentTarget)[0];
          var color = findColor(quad);
          setColor(main, color);
        });

        var setColor = function(el, color){
          el.css({backgroundColor: color});
        }

        var findColor = function(el){
          var classes = el.className.split(' ');
          var color = classes[classes.length-1];
          return color;
        }

        var randomizeColor = function(){
          var pos = Math.floor(Math.random() * quads.length);
          var quad = quads[pos];
          var color = findColor(quad);
          setColor(main, color);
        }

        var timer = window.setInterval(randomizeColor, 500);

      });

    </script>

  </head>

  <body>

    <div id="wrapper">

      <div id="main" class="box">

      </div>

      <div class="quad-holder">
        <div id="box-1" class="box quad red">

        </div>

        <div id="box-2" class="box quad green">

        </div>

        <div class="clear"></div>

        <div id="box-3" class="box quad blue">

        </div>

        <div id="box-4" class="box quad yellow">

        </div>
      </div>

    </div>

  </body>

</html>
	<html>

	<head>

	<style>

	#wrapper{}
	.box{float: left; border: 1px solid black;}
	#main{width: 500px; height: 500px;}

	.quad-holder{float: left; width: 450px; }
	.quad{width: 100px; height: 100px; display: block; margin: 20px;}

	.red{background: red;}
	.green{background: green; }
	.blue{background: blue;}
	.yellow{background: yellow;}

	.clear{display: block; clear: both;}

	</style>

	<script src="http://code.jquery.com/jquery-2.1.0.js"></script>

	<script>
	$(document).ready(function(){

	var main = $('#main');
	var quads = $('.quad');

	$('.quad').click(function(e){
	var quad = $(e.currentTarget)[0];
	var color = findColor(quad);
	setColor(main, color);
	});

	var setColor = function(el, color){
	el.css({backgroundColor: color});
	}

	var findColor = function(el){
	var classes = el.className.split(' ');
	var color = classes[classes.length-1];
	return color;
	}

	var randomizeColor = function(){
	var pos = Math.floor(Math.random() * quads.length);
	var quad = quads[pos];
	var color = findColor(quad);
	setColor(main, color);
	}

	var timer = window.setInterval(randomizeColor, 500);

	});

	</script>

	</head>

	<body>

	<div id="wrapper">

	<div id="main" class="box">

	</div>

	<div class="quad-holder">
	<div id="box-1" class="box quad red">

	</div>

	<div id="box-2" class="box quad green">

	</div>

	<div class="clear"></div>

	<div id="box-3" class="box quad blue">

	</div>

	<div id="box-4" class="box quad yellow">

	</div>
	</div>

	</div>

	</body>

	</html>