cheneytsai/jsbin.qokof.html

## jsbin.qokof.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Proof of Concept: Water Projects" />

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script src="http://code.jquery.com/jquery.min.js"></script>

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <meta charset="utf-8">
  <title>Example: Water Project Cards</title>
</head>
<body>

  <!--Nav Bar-->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <h4>Water Projects</h4>
  </div>
  </nav>

  <!--Main Stuff-->
  <div class="main-content">
    <div class="container">

      <!--Project Cards go in Here-->
      <div class="row" id="card-holder">
      </div>
    </div>
  </div>
</body>
</html>

## jsbin.qokof.js
// Load the Visualization API
google.load('visualization', '1.0',
{
  'packages':['table']
});

// Call a function when API has loaded
google.setOnLoadCallback(getQuery);

function getQuery() {
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheet/ccc?key=0AjENGhln_vxfdFlOSzNUVGxhejN6WFdiRG5uOUlxYnc#gid=0');

  query.send(drawCards);

}

function drawCards(response) {
  var dataTable = response.getDataTable();

  var dataObj = $.parseJSON(dataTable.toJSON());

  //Iterate on Each Row
  dataObj.rows.forEach(function(row) {
    var id = "<h5>ID: " + row.c[0].v + "</h5>";
    var country = "<h5>Country: " + row.c[1].v + "</h5>";
    var partner = "<h5>Partner: " + row.c[2].v + "</h5>";


    var newCard = $('<div class="col-md-4"><div class="card">' + id + country + partner + '</div></div>');


    $('#card-holder').append(newCard);

  });

}

## jsbin.qokof.less

.main-content {
  padding-top: 50px;
}

.card {
  padding: 10px;
  margin: 40px 0px 0px 0px;
  border: 1px solid #AAA;
  height: 400px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Proof of Concept: Water Projects" />

	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

	<script src="http://code.jquery.com/jquery.min.js"></script>

	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />

	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

	<meta charset="utf-8">
	<title>Example: Water Project Cards</title>
	</head>
	<body>

	<!--Nav Bar-->
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
	<h4>Water Projects</h4>
	</div>
	</nav>

	<!--Main Stuff-->
	<div class="main-content">
	<div class="container">

	<!--Project Cards go in Here-->
	<div class="row" id="card-holder">
	</div>
	</div>
	</div>
	</body>
	</html>
	// Load the Visualization API
	google.load('visualization', '1.0',
	{
	'packages':['table']
	});

	// Call a function when API has loaded
	google.setOnLoadCallback(getQuery);

	function getQuery() {
	var query = new google.visualization.Query(
	'https://docs.google.com/spreadsheet/ccc?key=0AjENGhln_vxfdFlOSzNUVGxhejN6WFdiRG5uOUlxYnc#gid=0');

	query.send(drawCards);

	}

	function drawCards(response) {
	var dataTable = response.getDataTable();

	var dataObj = $.parseJSON(dataTable.toJSON());

	//Iterate on Each Row
	dataObj.rows.forEach(function(row) {
	var id = "<h5>ID: " + row.c[0].v + "</h5>";
	var country = "<h5>Country: " + row.c[1].v + "</h5>";
	var partner = "<h5>Partner: " + row.c[2].v + "</h5>";


	var newCard = $('<div class="col-md-4"><div class="card">' + id + country + partner + '</div></div>');


	$('#card-holder').append(newCard);

	});

	}

	.main-content {
	padding-top: 50px;
	}

	.card {
	padding: 10px;
	margin: 40px 0px 0px 0px;
	border: 1px solid #AAA;
	height: 400px;
	}