Skip to content

Instantly share code, notes, and snippets.

@roachhd

roachhd/Readme.md

Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save roachhd/69fca2fd0d7d6c37417a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save roachhd/69fca2fd0d7d6c37417a to your computer and use it in GitHub Desktop.
Download ZIP
Bootswatch API demo
Raw
Readme.md

###a Bootswatch API demo

Check it out in action HERE

Awesome themes to get you started!

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootswatch API Demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<style id="jsbin-css">
body {
padding: 2em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
select {
display: none;
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<h1>Bootstrap</h1>
<div class="alert alert-info">
<h4>Alert!</h4>
<p>This is a demo of the Bootswatch API.</p>
</div>
<select></select>
<script id="jsbin-javascript">
$.get("http://api.bootswatch.com/3/", function (data) {
var themes = data.themes;
var select = $("select");
select.show();
$(".alert").toggleClass("alert-info alert-success");
$(".alert h4").text("Success!");
themes.forEach(function(value, index){
select.append($("<option />")
.val(index)
.text(value.name));
});
select.change(function(){
var theme = themes[$(this).val()];
$("link").attr("href", theme.css);
$("h1").text(theme.name);
}).change();
}, "json").fail(function(){
$(".alert").toggleClass("alert-info alert-danger");
$(".alert h4").text("Failure!");
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootswatch API Demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"><\/script>
</head>
<body>
<h1>Bootstrap</h1>
<div class="alert alert-info">
<h4>Alert!</h4>
<p>This is a demo of the Bootswatch API.</p>
</div>
<select></select>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
padding: 2em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
select {
display: none;
position: absolute;
top: 10px;
left: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$.get("http://api.bootswatch.com/3/", function (data) {
var themes = data.themes;
var select = $("select");
select.show();
$(".alert").toggleClass("alert-info alert-success");
$(".alert h4").text("Success!");
themes.forEach(function(value, index){
select.append($("<option />")
.val(index)
.text(value.name));
});
select.change(function(){
var theme = themes[$(this).val()];
$("link").attr("href", theme.css);
$("h1").text(theme.name);
}).change();
}, "json").fail(function(){
$(".alert").toggleClass("alert-info alert-danger");
$(".alert h4").text("Failure!");
});</script></body>
</html>
Raw
script.js
$.get("http://api.bootswatch.com/3/", function (data) {
var themes = data.themes;
var select = $("select");
select.show();
$(".alert").toggleClass("alert-info alert-success");
$(".alert h4").text("Success!");
themes.forEach(function(value, index){
select.append($("<option />")
.val(index)
.text(value.name));
});
select.change(function(){
var theme = themes[$(this).val()];
$("link").attr("href", theme.css);
$("h1").text(theme.name);
}).change();
}, "json").fail(function(){
$(".alert").toggleClass("alert-info alert-danger");
$(".alert h4").text("Failure!");
});
Raw
style.css
body {
padding: 2em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
select {
display: none;
position: absolute;
top: 10px;
left: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment