Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Code a Simple Github API Webapp using jQuery & Ajax - Jake Rocheleau http://blog.teamtreehouse.com/code-a-simple-github-api-webapp-using-jquery-ajax
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Github API Webapp using jQuery - Treehouse Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://d15dxvojnvxp1x.cloudfront.net/assets/favicon.ico">
<link rel="icon" href="http://d15dxvojnvxp1x.cloudfront.net/assets/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="w">
<h1>Simple Github API Webapp</h1>
<p>Enter a single Github username below and click the button to display profile info via JSON.</p>
<input type="text" name="ghusername" id="ghusername" placeholder="Github username...">
<a href="#" id="ghsubmitbtn">Pull User Data</a>
<div id="ghapidata" class="clearfix"></div>
</div>
<script type="text/javascript">
$(function(){
$('#ghsubmitbtn').on('click', function(e){
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loading..."></div>');
var username = $('#ghusername').val();
var requri = 'https://api.github.com/users/'+username;
var repouri = 'https://api.github.com/users/'+username+'/repos';
requestJSON(requri, function(json) {
if(json.message == "Not Found" || username == '') {
$('#ghapidata').html("<h2>No User Info Found</h2>");
}
else {
// else we have a user and we display their info
var fullname = json.name;
var username = json.login;
var aviurl = json.avatar_url;
var profileurl = json.html_url;
var location = json.location;
var followersnum = json.followers;
var followingnum = json.following;
var reposnum = json.public_repos;
if(fullname == undefined) { fullname = username; }
var outhtml = '<h2>'+fullname+' <span class="smallname">(@<a href="'+profileurl+'" target="_blank">'+username+'</a>)</span></h2>';
outhtml = outhtml + '<div class="ghcontent"><div class="avi"><a href="'+profileurl+'" target="_blank"><img src="'+aviurl+'" width="80" height="80" alt="'+username+'"></a></div>';
outhtml = outhtml + '<p>Followers: '+followersnum+' - Following: '+followingnum+'<br>Repos: '+reposnum+'</p></div>';
outhtml = outhtml + '<div class="repolist clearfix">';
var repositories;
$.getJSON(repouri, function(json){
repositories = json;
outputPageContent();
});
function outputPageContent() {
if(repositories.length == 0) { outhtml = outhtml + '<p>No repos!</p></div>'; }
else {
outhtml = outhtml + '<p><strong>Repos List:</strong></p> <ul>';
$.each(repositories, function(index) {
outhtml = outhtml + '<li><a href="'+repositories[index].html_url+'" target="_blank">'+repositories[index].name + '</a></li>';
});
outhtml = outhtml + '</ul></div>';
}
$('#ghapidata').html(outhtml);
} // end outputPageContent()
} // end else statement
}); // end requestJSON Ajax call
}); // end click event handler
function requestJSON(url, callback) {
$.ajax({
url: url,
complete: function(xhr) {
callback.call(null, xhr.responseJSON);
}
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment