public
Last active

A baseline webpage used at Code Across NYC (http://www.meetup.com/openny/events/103151862/) to introduce people to programming through Javascript and open data. This is not the best example of good HTML (or Javascript), but we used it as a platform for exploration.

  • Download Gist
codeacross-final.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="submit" id="submit"></input><br>
<script>
$(function(){
$("#submit").click(function(){
console.log("button clicked!");
// https://data.cityofnewyork.us/Environmental-Sustainability/Electric-Consumption-by-ZIP-Code-2010/74cu-ncm4
$.ajax({
url: 'http://data.cityofnewyork.us/resource/74cu-ncm4.json?building_type_service_class_=Commercial',
dataType: 'jsonp',
jsonp: '$jsonp'
}).success(function(buildingElectricityUse){
 
var totalElectricity = 0;
 
$.each(buildingElectricityUse, function(index, value) {
// for each building,
// find its consumption in kwh
var buildingElectricity = buildingElectricityUse[index]["consumption_kwh_"];
 
totalElectricity = totalElectricity + parseInt(buildingElectricity);
 
// add a new item to the list
$("#dataList").append("<li>" + buildingElectricity + "</li>");
});
 
$("#total").append(totalElectricity);
});
});
});
</script>
Total Electricity (kWh): <span id="total"></span><br>
My Data List:<br>
<ul id="dataList">
</ul>
</body>
</html>
codeacross-original.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="submit" id="submit"></input>
<script>
$(function(){
$("#submit").click(function(){
console.log("button clicked!");
 
// https://data.cityofnewyork.us/Environmental-Sustainability/Electric-Consumption-by-ZIP-Code-2010/74cu-ncm4
$.ajax({
url: 'http://data.cityofnewyork.us/resource/74cu-ncm4.json',
dataType: 'jsonp',
jsonp: '$jsonp'
}).success(function(data){
 
 
});
});
});
</script>
</body>
</html>
resources.md
Markdown

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.