Bijesse/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>

  <meta charset="utf-8">
  <title>Color Changer Project jQuery</title>
<style id="jsbin-css">
body {
  background-color: black;
  height: 100%;
  width: 100%;
}

div {
  width: 100px;
  height: 100px;
  position: absolute;
   left: 50%;
   top: 50%;
}

div button {
  margin: 0 auto;
}
</style>
</head>
<body>

  <div>
    <button type="button" id="button">Change</button>
  </div>

<script id="jsbin-javascript">
var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];

var index = 0;

$("#button").on("click", function(){
  if(index == colors.length) {
    index = 0;
  }

  $("body").css("background-color", colors[index]);

  index++;
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>

  <meta charset="utf-8">
  <title>Color Changer Project jQuery</title>
</head>
<body>

  <div>
    <button type="button" id="button">Change</button>
  </div>

</body>
</html></script>

<script id="jsbin-source-css" type="text/css">body {
  background-color: black;
  height: 100%;
  width: 100%;
}

div {
  width: 100px;
  height: 100px;
  position: absolute;
   left: 50%;
   top: 50%;
}

div button {
  margin: 0 auto;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];

var index = 0;

$("#button").on("click", function(){
  if(index == colors.length) {
    index = 0;
  }

  $("body").css("background-color", colors[index]);

  index++;
});</script></body>
</html>

## jsbin.kokuju.css
body {
  background-color: black;
  height: 100%;
  width: 100%;
}

div {
  width: 100px;
  height: 100px;
  position: absolute;
   left: 50%;
   top: 50%;
}

div button {
  margin: 0 auto;
}

## jsbin.kokuju.js
var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];

var index = 0;

$("#button").on("click", function(){
  if(index == colors.length) {
    index = 0;
  }

  $("body").css("background-color", colors[index]);

  index++;
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>

	<meta charset="utf-8">
	<title>Color Changer Project jQuery</title>
	<style id="jsbin-css">
	body {
	background-color: black;
	height: 100%;
	width: 100%;
	}

	div {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	}

	div button {
	margin: 0 auto;
	}
	</style>
	</head>
	<body>

	<div>
	<button type="button" id="button">Change</button>
	</div>

	<script id="jsbin-javascript">
	var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];

	var index = 0;

	$("#button").on("click", function(){
	if(index == colors.length) {
	index = 0;
	}

	$("body").css("background-color", colors[index]);

	index++;
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery.min.js"><\/script>

	<meta charset="utf-8">
	<title>Color Changer Project jQuery</title>
	</head>
	<body>

	<div>
	<button type="button" id="button">Change</button>
	</div>

	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">body {
	background-color: black;
	height: 100%;
	width: 100%;
	}

	div {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	}

	div button {
	margin: 0 auto;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var colors = ["cyan", "aliceblue", "darkmagenta", "gold", "azure", "green", "moccasin"];

	var index = 0;

	$("#button").on("click", function(){
	if(index == colors.length) {
	index = 0;
	}

	$("body").css("background-color", colors[index]);

	index++;
	});</script></body>
	</html>