Qijiang60 · January 19, 2017 19:49
diff --git a/gistfile1.txt b/gistfile1.txt
 <!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>
	<!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>