Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 12, 2015 14:35
Show Gist options
  • Save anonymous/6bac4e989963aa870f74 to your computer and use it in GitHub Desktop.
Save anonymous/6bac4e989963aa870f74 to your computer and use it in GitHub Desktop.
Download ZIP
Color Changer Project jQuery // source http://jsbin.com/kokuju
Raw
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>
Raw
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;
}
Raw
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++;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment