ONA Workshop: tabletop-handlebars-fake-election

Who among you at #ONA13 is learning to how to build projects with Tabletop.js and Handlebars.js? Here's a list.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>

<div id="container">
	<a href="index2.html" id="example">Next example</a>
	<h1 title="Get it?">Fake election via Tabletop.js<br> (╯°□°）╯︵ ┻━┻</h1>
	
</div><!-- #container -->

<!-- Template for table of results -->
<script id="candidates" type="text/x-handlebars-template">
		<div class="aCand {{party}} {{#if winner}}{{winner}}{{/if}}">
		{{#if winner}}
			<img src="http://www.themaxfoundation.org/gallery/images/WinnerRibbon.png" alt="Winner!">
		{{/if}}
			<h3>{{name}}</h3>
			<span><strong>{{votes}}</strong> votes</span>
			<div class="cand_bar" style="width: {{crunched}}%"> </div>
			<span class="gender {{gender}}">{{gender}}</span>
		</div>
</script>

CSS

.aCand {
	background: #ffffff;
	color: #333;
	margin: 20px;
	padding: 10px;
	position: relative;
	border-top: 3px solid #ccc;
}

	h3 {
		font-size: 20px;
		margin: 0 0 10px 0;
	}

	.aCand span {
		font-style: normal;
		margin: 0 0 5px 0;
		display: block;
	}
	
	.cand_bar {
		display: block;
		height: 10px;
		background: #000000;
		
	}
	
	span.gender {
		display: block;
		clear: both;
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 900;
		letter-spacing: 0.07em;
		padding: 5px;
		color: #fff;
		width: 55px;
		margin: 10px 0 0 0;
		position: relative;
		bottom: -10px;
		left: -10px;
		text-align: center;
		background: #ff0099;
	}
	span.male {background: #66cc66;}
	span.female {background: #cc66cc;}
	
	.aCand img {
		float: right;
	}
	
	.dem {
		border-top: 3px solid #0099ff;
	}
	.GOP {
		border-top: 3px solid #ff6666;
	}
	.winner {
		background: yellow;
	}

JavaScript

var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?key=0AmUc6Li4CgEQdHloZnFCWnQxcWVrUnpwSEx4TzdEc0E&output=html';

  $(document).ready( function() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: showInfo,
                     parseNumbers: true } );
  });

  function showInfo(data, tabletop) {
    alert("Successfully processed!")
    console.log(data);
  }

function showInfo(data, tabletop) {
    var source   = $("#candidates").html();
    var template = Handlebars.compile(source);

    $.each( tabletop.sheets("Sheet1").all(), function(i, cat) {
      var html = template(cat);
      $("#container").append(html);
    });
  }