xflahertyx/divpush.css

## divpush.css
button {
  display: inline-block;
}

div {
  border: 2px solid black;
  margin: 2px;
  display: inline-block;
  font-size: 1px;
}


.red {
  background-color: red; }
.orange {
  background-color: orange; }
.yellow {
  background-color: yellow; }
.green {
  background-color: green; }
.blue {
  background-color: blue; }
.indigo {
  background-color: indigo; }
.violet {
  background-color: violet; }
.white {
  background-color: white; }
.gray {
  background-color: gray; }
.black {
  background-color: black; }


.size0 {
  height: 8px; width: 8px; }
.size1 {
  height: 10px; width: 10px; }
.size2 {
  height: 12px; width: 12px; }
.size3 {
  height: 14px; width: 14px; }
.size4 {
  height: 16px; width: 16px; }
.size5 {
  height: 18px; width: 18px; }
.size6 {
  height: 20px; width: 20px; }
.size7 {
  height: 22px; width: 22px; }
.size8 {
  height: 24px; width: 24px; }
.size9 {
  height: 26px; width: 26px; }

## divpush.html
<!DOCTYPE html>
<html>
  <head>
    <title>Make divs of random sizes and colors</title>
    <link href="divpush.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <button id="push">Push</button>
    <button id="sSort">Sort Size</button>
    <button id="cSort">Sort Color</button>
    <section>
      <p>Start!</p>
    </section>
  </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="divpush.js"> </script>
</html>

## divpush.js
var rand;
var oneDiv = '<div></div>';
var newDiv = function(){
    $('p').after(oneDiv);
  };
var aClass = function(){
    $('div:first-of-type').addClass(rColor[randC]).addClass(rSize[randS]).text(randS);
  };

$('#push:button').on('click', function(){
  for (var i=0; i < 501; i++) {
    dPush(i);
  };
});

//Scott helped me with this
var dPush = function(){
  randC = Math.floor(Math.random()*10);
  randS = Math.floor(Math.random()*10);
  newDiv();
  aClass();
};

var rColor =["red", "orange", "yellow", "green", "blue",
            "indigo", "violet", "white", "gray", "black"];

var rSize = ["size0", "size1", "size2", "size3", "size4",
            "size5", "size6", "size7", "size8", "size9",];

//http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
$('#sSort:button').on('click', function(){
var mylist = $('section');
var listitems = mylist.children('div').get();
listitems.sort(function(a, b) {
   var compA = $(a).text();
   var compB = $(b).text();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
});
	button {
	display: inline-block;
	}

	div {
	border: 2px solid black;
	margin: 2px;
	display: inline-block;
	font-size: 1px;
	}


	.red {
	background-color: red; }
	.orange {
	background-color: orange; }
	.yellow {
	background-color: yellow; }
	.green {
	background-color: green; }
	.blue {
	background-color: blue; }
	.indigo {
	background-color: indigo; }
	.violet {
	background-color: violet; }
	.white {
	background-color: white; }
	.gray {
	background-color: gray; }
	.black {
	background-color: black; }


	.size0 {
	height: 8px; width: 8px; }
	.size1 {
	height: 10px; width: 10px; }
	.size2 {
	height: 12px; width: 12px; }
	.size3 {
	height: 14px; width: 14px; }
	.size4 {
	height: 16px; width: 16px; }
	.size5 {
	height: 18px; width: 18px; }
	.size6 {
	height: 20px; width: 20px; }
	.size7 {
	height: 22px; width: 22px; }
	.size8 {
	height: 24px; width: 24px; }
	.size9 {
	height: 26px; width: 26px; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Make divs of random sizes and colors</title>
	<link href="divpush.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
	<button id="push">Push</button>
	<button id="sSort">Sort Size</button>
	<button id="cSort">Sort Color</button>
	<section>
	<p>Start!</p>
	</section>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="divpush.js"> </script>
	</html>
	var rand;
	var oneDiv = '<div></div>';
	var newDiv = function(){
	$('p').after(oneDiv);
	};
	var aClass = function(){
	$('div:first-of-type').addClass(rColor[randC]).addClass(rSize[randS]).text(randS);
	};

	$('#push:button').on('click', function(){
	for (var i=0; i < 501; i++) {
	dPush(i);
	};
	});

	//Scott helped me with this
	var dPush = function(){
	randC = Math.floor(Math.random()*10);
	randS = Math.floor(Math.random()*10);
	newDiv();
	aClass();
	};

	var rColor =["red", "orange", "yellow", "green", "blue",
	"indigo", "violet", "white", "gray", "black"];

	var rSize = ["size0", "size1", "size2", "size3", "size4",
	"size5", "size6", "size7", "size8", "size9",];

	//http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
	$('#sSort:button').on('click', function(){
	var mylist = $('section');
	var listitems = mylist.children('div').get();
	listitems.sort(function(a, b) {
	var compA = $(a).text();
	var compB = $(b).text();
	return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
	})
	$.each(listitems, function(idx, itm) { mylist.append(itm); });
	});