JamiesonRoberts/code-example-4

## code-example-4
<!doctype html>
<!--[if lt IE 9]><html class="ie"><![endif]-->
<!--[if gte IE 9]><!--><html><!--<![endif]-->

<!--
	The comment jumble above is handy for targeting old IE with CSS.
	http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->

	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<title>Coding Challenge | Jamieson Roberts</title>

		<!-- Please don't add "maximum-scale=1" here. It's bad for accessibility. -->
		<meta name="viewport" content="width=device-width, initial-scale=1"/>

		<!-- Feel free to split the CSS into separate files, if you like. -->
		<link rel="stylesheet" href="ggs.css"/>
		<link rel="stylesheet" href="style.css"/>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

	<body lang="en">

		<!-- Demo code begins -->

		<header>
			<div class="wrapper">
				<h1>Coding Challenge</h1>
				<div id="github-userbio"></div>
				<p>This is a coding challenge to retrieve a listing of all Google repositories listed alphabetically using the Github API. The <strong>highlighted numbers</strong> besides the title of the Repository is the number of open issues currently with that repo.</p>
				<div style="clear:both"></div>
			</div>
		</header>
		<section id="main">
			<div class="wrapper">
				<div>
				<a href="#" id="ghsubmitbtn"><br />Click here to load Repository Data</a>
				<ul id="github-projects"></ul></div>
				<div style="clear:both"></div>
			</div>
		</section>
		<script type="text/javascript">
		$(function() {

			var username = 'google';
			var requri   = 'https://api.github.com/users/'+username;
			var repouri  = 'https://api.github.com/users/'+username+'/repos?';
			var reposnum;

			$('#ghsubmitbtn').on('click', function(e){
			  	e.preventDefault();
			  	$('#ghsubmitbtn').hide();

			  	var htmlStr = "";
			    var repositories;
		        var reposInt = parseInt(reposnum);
		        var pages =  reposInt / 30;
				var repoList = [];


		       	for (var i = 0; i < pages; i++){
	        		var h = i + 1;
		        	var repouriAdd = repouri+'page='+h+'?';
					getSomething(repouriAdd);
				}

				$.each( repoList, function( key, val ) {
				  	val.desc == null || val.desc == "" ? description = "<i>No Description provided</i>" : description = val.desc;
				    $("#github-projects").append( '<li><a href="'+val.url+'" target="_blank" class="title">'+val.name + '</a><span class="openissues">'+ val.openIss +'</span><span class="description">'+description+'</span></li>' );
				});


				function getSomething(repoAddress){
				    $.ajax({
				    	async: false,
				        url: repoAddress,
				        dataType: "json",})
				        .success( function(data){
				            $.each(data, function(index){
								repoList.push({'url': data[index].html_url,'name': data[index].name, 'desc': data[index].description, 'openIss': data[index].open_issues_count });
							})
				        }
				    );
				}
			});

			requestGITINFO(requri, function(json) {

				var fullname = json.name;
				var username = json.login;
				var aviurl = json.avatar_url
				var profileurl = json.html_url;
				reposnum = json.public_repos;

				if(fullname == undefined) { fullname = username }

				var htmlProfile = '<div class="ghcontent"><div class="avi"><a href="'+profileurl+'" target="_blank"><img src="'+aviurl+'" width="80" height="80" alt="'+username+'"></a></div>';
				htmlProfile = htmlProfile + 'Public Repositories: '+reposnum+'</div>';
				htmlProfile = htmlProfile + '<div class="repolist clearfix">';

				$('#github-userbio').html(htmlProfile);

			});


			function requestGITINFO(url, callback) {
			  $.ajax({
			    url: url,
			    complete: function(xhr) {
			      callback.call(null, xhr.responseJSON);
			    }
			  });
			}

		});

		</script>
	</body>

</html>
	<!doctype html>
	<!--[if lt IE 9]><html class="ie"><![endif]-->
	<!--[if gte IE 9]><!--><html><!--<![endif]-->

	<!--
	The comment jumble above is handy for targeting old IE with CSS.
	http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
	-->

	<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<title>Coding Challenge \| Jamieson Roberts</title>

	<!-- Please don't add "maximum-scale=1" here. It's bad for accessibility. -->
	<meta name="viewport" content="width=device-width, initial-scale=1"/>

	<!-- Feel free to split the CSS into separate files, if you like. -->
	<link rel="stylesheet" href="ggs.css"/>
	<link rel="stylesheet" href="style.css"/>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>

	<body lang="en">

	<!-- Demo code begins -->

	<header>
	<div class="wrapper">
	<h1>Coding Challenge</h1>
	<div id="github-userbio"></div>
	<p>This is a coding challenge to retrieve a listing of all Google repositories listed alphabetically using the Github API. The <strong>highlighted numbers</strong> besides the title of the Repository is the number of open issues currently with that repo.</p>
	<div style="clear:both"></div>
	</div>
	</header>
	<section id="main">
	<div class="wrapper">
	<div>
	<a href="#" id="ghsubmitbtn"><br />Click here to load Repository Data</a>
	<ul id="github-projects"></ul></div>
	<div style="clear:both"></div>
	</div>
	</section>
	<script type="text/javascript">
	$(function() {

	var username = 'google';
	var requri = 'https://api.github.com/users/'+username;
	var repouri = 'https://api.github.com/users/'+username+'/repos?';
	var reposnum;

	$('#ghsubmitbtn').on('click', function(e){
	e.preventDefault();
	$('#ghsubmitbtn').hide();

	var htmlStr = "";
	var repositories;
	var reposInt = parseInt(reposnum);
	var pages = reposInt / 30;
	var repoList = [];


	for (var i = 0; i < pages; i++){
	var h = i + 1;
	var repouriAdd = repouri+'page='+h+'?';
	getSomething(repouriAdd);
	}

	$.each( repoList, function( key, val ) {
	val.desc == null \|\| val.desc == "" ? description = "<i>No Description provided</i>" : description = val.desc;
	$("#github-projects").append( '<li><a href="'+val.url+'" target="_blank" class="title">'+val.name + '</a><span class="openissues">'+ val.openIss +'</span><span class="description">'+description+'</span></li>' );
	});


	function getSomething(repoAddress){
	$.ajax({
	async: false,
	url: repoAddress,
	dataType: "json",})
	.success( function(data){
	$.each(data, function(index){
	repoList.push({'url': data[index].html_url,'name': data[index].name, 'desc': data[index].description, 'openIss': data[index].open_issues_count });
	})
	}
	);
	}
	});

	requestGITINFO(requri, function(json) {

	var fullname = json.name;
	var username = json.login;
	var aviurl = json.avatar_url
	var profileurl = json.html_url;
	reposnum = json.public_repos;

	if(fullname == undefined) { fullname = username }

	var htmlProfile = '<div class="ghcontent"><div class="avi"><a href="'+profileurl+'" target="_blank"><img src="'+aviurl+'" width="80" height="80" alt="'+username+'"></a></div>';
	htmlProfile = htmlProfile + 'Public Repositories: '+reposnum+'</div>';
	htmlProfile = htmlProfile + '<div class="repolist clearfix">';

	$('#github-userbio').html(htmlProfile);

	});



	function requestGITINFO(url, callback) {
	$.ajax({
	url: url,
	complete: function(xhr) {
	callback.call(null, xhr.responseJSON);
	}
	});
	}

	});

	</script>
	</body>

	</html>