roachhd/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    ###a Bootswatch API demo
Check it out in action HERE
Awesome themes to get you started!

  
## 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>

## 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!");
});

## style.css
body {
  padding: 2em;
  text-align: center;
}

h1 {
  margin-bottom: 1em;
}

select {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
}
	<!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>