Bootswatch API demo

###a Bootswatch API demo

Check it out in action HERE

Awesome themes to get you started!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootswatch API Demo</title>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="https://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("https://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>

h1 {
  margin-bottom: 1em;
}

select {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
}</script>

}, "json").fail(function(){
    $(".alert").toggleClass("alert-info alert-danger");
    $(".alert h4").text("Failure!");
});</script></body>
</html>

Modified http://code.jquery.com/jquery-2.1.0.min.js to a secure url

https://code.jquery.com/jquery-2.1.0.min.js