Skip to content

Instantly share code, notes, and snippets.

@stormsweeper

stormsweeper/index.html

Created February 27, 2015 14:17
Show Gist options
  • Save stormsweeper/54ac3fa47af2385601c7 to your computer and use it in GitHub Desktop.
Save stormsweeper/54ac3fa47af2385601c7 to your computer and use it in GitHub Desktop.
Download ZIP
DAT DRESS THO // source http://jsbin.com/piyana
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>DAT DRESS THO</title>
<style id="jsbin-css">
#dressBox {
background: white;
width: 695px;
padding: 100px;
}
#colorChoice {
}
</style>
</head>
<body>
<div id="colorChoice" class="btn-group" role="group">
<button type="button" class="btn btn-default">White</button>
<button type="button" class="btn btn-default">Black</button>
<button type="button" class="btn btn-default">Gray</button>
<button type="button" class="btn btn-default">Red</button>
<button type="button" class="btn btn-default">Green</button>
<button type="button" class="btn btn-default">Blue</button>
<button type="button" class="btn btn-default">Orange</button>
<button type="button" class="btn btn-default">Purple</button>
<button type="button" class="btn btn-default">Yellow</button>
</div>
<div id="dressBox">
<img src="http://40.media.tumblr.com/a391a1b4b46dd6b498d379e50f96ecbc/tumblr_nkcjuq8Tdr1tnacy1o1_500.jpg">
</div>
<script id="jsbin-javascript">
$(
function($) {
$("#colorChoice button").on(
"click",
function(event) {
$("#dressBox").css("background-color", this.innerHTML.toLowerCase());
}
);
}
);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>DAT DRESS THO</title>
</head>
<body>
<div id="colorChoice" class="btn-group" role="group">
<button type="button" class="btn btn-default">White</button>
<button type="button" class="btn btn-default">Black</button>
<button type="button" class="btn btn-default">Gray</button>
<button type="button" class="btn btn-default">Red</button>
<button type="button" class="btn btn-default">Green</button>
<button type="button" class="btn btn-default">Blue</button>
<button type="button" class="btn btn-default">Orange</button>
<button type="button" class="btn btn-default">Purple</button>
<button type="button" class="btn btn-default">Yellow</button>
</div>
<div id="dressBox">
<img src="http://40.media.tumblr.com/a391a1b4b46dd6b498d379e50f96ecbc/tumblr_nkcjuq8Tdr1tnacy1o1_500.jpg">
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#dressBox {
background: white;
width: 695px;
padding: 100px;
}
#colorChoice {
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(
function($) {
$("#colorChoice button").on(
"click",
function(event) {
$("#dressBox").css("background-color", this.innerHTML.toLowerCase());
}
);
}
);</script></body>
</html>
Raw
jsbin.piyana.css
#dressBox {
background: white;
width: 695px;
padding: 100px;
}
#colorChoice {
}
Raw
jsbin.piyana.js
$(
function($) {
$("#colorChoice button").on(
"click",
function(event) {
$("#dressBox").css("background-color", this.innerHTML.toLowerCase());
}
);
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment