philandstuff/client.js

## client.js
(function() {
  var jQuery = window.$;

  var OpenRegister = function(endpoint) {
    this.endpoint = endpoint;
  };

  OpenRegister.prototype.buildURL = function(path) {
    return this.endpoint + path + ".json";
  };

  OpenRegister.prototype.hash = function(id) {
    var path = this.buildURL("hash/" + id);

    return jQuery.getJSON(path).done(function (data) {
      return data;
    });
  };

  OpenRegister.prototype.all = function () {
    return jQuery.getJSON(this.buildURL("all")).done(function (data) {
      return data;
    });
  };

  window.OpenRegister = OpenRegister;
}).call(this);

## index.html
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="client.js"></script>
  </head>

  <body>
    <h1>Open Register JavaScript Client</h1>
  </body>

  <script>
    var register = new OpenRegister("http://school.openregister.org/");

    register.all().done(function (data) {
      console.log(data);
    });

    var id = "c69a72f7b145f7a1da26b00e4f9758022634359b";
    register.hash(id).done(function (data) {
      console.log(data);
    });
  </script>
</html>

## main.css
body {
    font-family: "nta", Arial, sans-serif;
    font-size: 28px;
}

#wrapper {
    width: 980px;
    margin: 0 auto;
}

#wrapper h1, #wrapper h2, #wrapper h3 {
    text-align: center;
}

#wrapper table {
    margin: 0 auto;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 50%;
    font-size: 16px;
}

table thead, td {
    text-align: left;
    border-bottom: 1px solid #333;
    padding: 12px 20px 9px 0;
}

table thead {
    font-weight: 700;
}

#map {
    width: 100%;
    height: 500px;
}

## server.py
from SimpleHTTPServer import SimpleHTTPRequestHandler
import BaseHTTPServer


class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)


if __name__ == '__main__':
    BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)

## vat-rate.html
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="client.js"></script>

    <link href="https://assets.digital.cabinet-office.gov.uk/static/fonts-13bc2e6735c0e0b82fa507663188d671.css" media="all" rel="stylesheet" type="text/css">
    <link href="main.css" media="all" rel="stylesheet" type="text/css">

    <title>VAT rate example</title>
  </head>

  <body>
    <div id="wrapper">
      <h1>VAT Rate</h1>

      <h2 id="loading">Attempting to loading data....</h2>
    </div>
  </body>

  <script src="vat-rate.js"></script>
</html>

## vat-rate.js
(function(){
  var jQuery = window.$;

  var templates = {
    base: function () {
      return jQuery('<div id="vat-rates"></div>');
    },
    count: function (n, url) {
      return jQuery('<h2>' +
                    'There are ' + n +
                    ' historical <a href="' + url + '">VAT rates</a>' +
                    '</h2>');
    },
    current: function (rate) {
      return jQuery('<h3>' +
                    'The current VAT rate is: ' +
                    rate["entry"]["rate"] + '%' +
                    '</h3>');
    },
    table: function () {
      return jQuery("<table></table>");
    },
    tableHeading: function () {
      return jQuery("<thead>" +
                    "<tr><td>rate</td><td>start date</td><td>end date</td></tr>" +
                    "</thead>");
    },
    tableRow: function(data, url) {
      return jQuery("<tr>" +
                    "<td>" +
                    '<a href="' + url + '">' + data["rate"] + "</a></td>" +
                    "<td>" + data["start-date"] + "</td>" +
                    "<td>" + data["end-date"] + "</td>" +
                    "</tr>");
    }
  };

  var sortVATRates = function(a, b) {
    var dateA = new Date(a["entry"]["start-date"]);
    var dateB = new Date(b["entry"]["start-date"]);

    if (dateA < dateB) {
        return -1;
    } else if (dateA > dateB) {
        return 1;
    } else {
      return 0;
    }
  };

  var register = new OpenRegister("http://vat-rate.openregister.org/");

  register.all().done(function (data) {
    data.sort(sortVATRates);

    var total = data.length;

    // Build out a DOM template and attach the data to it.
    var $base = templates.base();

    var $count = templates.count(total, register.endpoint);
    $base.append($count);

    var $currentRate = templates.current(data[data.length - 1]);
    $base.append($currentRate);

    var $table = templates.table();
    var $tableHeading = templates.tableHeading();
    $table.append($tableHeading);

    // Show the found VAT rates.
    jQuery.map(data, function (rate, _) {
      var dataURL = register.endpoint + "hash/" + rate["hash"];
      var rateRow = templates.tableRow(rate["entry"], dataURL);
      $table.append(rateRow);
    });

    // Do this once all the DOM templates are generated.
    var $loading = jQuery("#loading");
    $loading.remove();

    var $wrapper = jQuery("#wrapper");
    $wrapper.append($base);
    $wrapper.append($table);
  });
}).call(this);
	(function() {
	var jQuery = window.$;

	var OpenRegister = function(endpoint) {
	this.endpoint = endpoint;
	};

	OpenRegister.prototype.buildURL = function(path) {
	return this.endpoint + path + ".json";
	};

	OpenRegister.prototype.hash = function(id) {
	var path = this.buildURL("hash/" + id);

	return jQuery.getJSON(path).done(function (data) {
	return data;
	});
	};

	OpenRegister.prototype.all = function () {
	return jQuery.getJSON(this.buildURL("all")).done(function (data) {
	return data;
	});
	};

	window.OpenRegister = OpenRegister;
	}).call(this);
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="client.js"></script>
	</head>

	<body>
	<h1>Open Register JavaScript Client</h1>
	</body>

	<script>
	var register = new OpenRegister("http://school.openregister.org/");

	register.all().done(function (data) {
	console.log(data);
	});

	var id = "c69a72f7b145f7a1da26b00e4f9758022634359b";
	register.hash(id).done(function (data) {
	console.log(data);
	});
	</script>
	</html>
	body {
	font-family: "nta", Arial, sans-serif;
	font-size: 28px;
	}

	#wrapper {
	width: 980px;
	margin: 0 auto;
	}

	#wrapper h1, #wrapper h2, #wrapper h3 {
	text-align: center;
	}

	#wrapper table {
	margin: 0 auto;
	text-align: center;
	}

	table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 50%;
	font-size: 16px;
	}

	table thead, td {
	text-align: left;
	border-bottom: 1px solid #333;
	padding: 12px 20px 9px 0;
	}

	table thead {
	font-weight: 700;
	}

	#map {
	width: 100%;
	height: 500px;
	}
	from SimpleHTTPServer import SimpleHTTPRequestHandler
	import BaseHTTPServer


	class CORSRequestHandler(SimpleHTTPRequestHandler):
	def end_headers (self):
	self.send_header('Access-Control-Allow-Origin', '*')
	SimpleHTTPRequestHandler.end_headers(self)


	if __name__ == '__main__':
	BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)
	(function(){
	var jQuery = window.$;

	var templates = {
	base: function () {
	return jQuery('<div id="vat-rates"></div>');
	},
	count: function (n, url) {
	return jQuery('<h2>' +
	'There are ' + n +
	' historical <a href="' + url + '">VAT rates</a>' +
	'</h2>');
	},
	current: function (rate) {
	return jQuery('<h3>' +
	'The current VAT rate is: ' +
	rate["entry"]["rate"] + '%' +
	'</h3>');
	},
	table: function () {
	return jQuery("<table></table>");
	},
	tableHeading: function () {
	return jQuery("<thead>" +
	"<tr><td>rate</td><td>start date</td><td>end date</td></tr>" +
	"</thead>");
	},
	tableRow: function(data, url) {
	return jQuery("<tr>" +
	"<td>" +
	'<a href="' + url + '">' + data["rate"] + "</a></td>" +
	"<td>" + data["start-date"] + "</td>" +
	"<td>" + data["end-date"] + "</td>" +
	"</tr>");
	}
	};

	var sortVATRates = function(a, b) {
	var dateA = new Date(a["entry"]["start-date"]);
	var dateB = new Date(b["entry"]["start-date"]);

	if (dateA < dateB) {
	return -1;
	} else if (dateA > dateB) {
	return 1;
	} else {
	return 0;
	}
	};

	var register = new OpenRegister("http://vat-rate.openregister.org/");

	register.all().done(function (data) {
	data.sort(sortVATRates);

	var total = data.length;

	// Build out a DOM template and attach the data to it.
	var $base = templates.base();

	var $count = templates.count(total, register.endpoint);
	$base.append($count);

	var $currentRate = templates.current(data[data.length - 1]);
	$base.append($currentRate);

	var $table = templates.table();
	var $tableHeading = templates.tableHeading();
	$table.append($tableHeading);

	// Show the found VAT rates.
	jQuery.map(data, function (rate, _) {
	var dataURL = register.endpoint + "hash/" + rate["hash"];
	var rateRow = templates.tableRow(rate["entry"], dataURL);
	$table.append(rateRow);
	});

	// Do this once all the DOM templates are generated.
	var $loading = jQuery("#loading");
	$loading.remove();

	var $wrapper = jQuery("#wrapper");
	$wrapper.append($base);
	$wrapper.append($table);
	});
	}).call(this);