Feature/#1 inspiration getter api

css/main.css

@@ -31,7 +31,7 @@
 	clear: both;
 }
 
-.inspiration { 
+.inspiration {
 	margin-left: 3em;
 }
 
@@ -45,3 +45,7 @@
 	background-color: #F78181;
 	padding: 1em;
 }
+
+.top-answerers {
+
+}

index.html

@@ -16,7 +16,7 @@ <h1>StackOverflow Reputation Builder</h1>
 			</div>
 		</div>
 		<hr>
-		<div class="stack">	
+		<div class="stack">
 			<h3>Get Unanswered Questions</h3>
 			<p>Find unanswered questions by tag. For multiple tags, use a semi-colon to separate.</p>
 			<form class="unanswered-getter">
@@ -49,6 +49,20 @@ <h3>View the Top Answerers for a Tag</h3>
 			<p>Uh-oh! Something went wrong with your request. Here's what we know:</p>
 		</div>
 	</div>
+
+	<div class="templates hidden top-answerers">
+		<dl class="result question-top">
+
+			<a href="" id="answerers-image" target="_blank">
+				<img src="" alt="" class="image">
+			</a>
+			<dt>Asker</dt>
+				<dd class="asker"></dd>
+		</dl>
+		<div class="error">
+			<p>Uh-oh! Something went wrong with your request. Here's what we know:</p>
+		</div>
+	</div>
 	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 	<script src="js/app.js"></script>
 </body>

js/app.js

@@ -1,10 +1,10 @@
 // this function takes the question object returned by the StackOverflow request
 // and returns new result to be appended to DOM
 var showQuestion = function(question) {
-	
+
 	// clone our result template code
 	var result = $('.templates .question').clone();
-	
+
 	// Set the question properties in result
 	var questionElem = result.find('.question-text a');
 	questionElem.attr('href', question.link);
@@ -32,6 +32,34 @@ var showQuestion = function(question) {
 };
 
 
+
+
+var showTopAnswerersQuestion = function(question) {
+
+	// clone our result template code
+	var result = $('.top-answerers .question-top').clone();
+
+	// Set the question properties in result
+	var imageElem = result.find('.image');
+	imageElem.attr('src', question.user.profile_image);
+	imageElem.text(question.user.display_name);
+
+	var imageAnchor = result.find('#answerers-image');
+	imageAnchor.attr('href', question.user.link);
+
+	// set some properties related to asker
+	var asker = result.find('.asker');
+	asker.html('<p>Name: <a target="_blank" '+
+		'href=http://stackoverflow.com/users/' + question.user.user_id + ' >' +
+		question.user.display_name +
+		'</a></p>' +
+		'<p>Reputation: ' + question.user.reputation + '</p>'
+	);
+
+	return result;
+};
+
+
 // this function takes the results object from StackOverflow
 // and returns the number of results and tags to be appended to DOM
 var showSearchResults = function(query, resultNum) {
@@ -49,15 +77,15 @@ var showError = function(error){
 // takes a string of semi-colon separated tags to be searched
 // for on StackOverflow
 var getUnanswered = function(tags) {
-	
+
 	// the parameters we need to pass in our request to StackOverflow's API
-	var request = { 
+	var request = {
 		tagged: tags,
 		site: 'stackoverflow',
 		order: 'desc',
 		sort: 'creation'
 	};
-	
+
 	$.ajax({
 		url: "http://api.stackexchange.com/2.2/questions/unanswered",
 		data: request,
@@ -66,8 +94,11 @@ var getUnanswered = function(tags) {
 	})
 	.done(function(result){ //this waits for the ajax to return with a succesful promise object
 		var searchResults = showSearchResults(request.tagged, result.items.length);
+		// console.log(request.tagged);
+		// console.log(result.items.length);
 
 		$('.search-results').html(searchResults);
+
 		//$.each is a higher order function. It takes an array and a function as an argument.
 		//The function is executed once for each item in the array.
 		$.each(result.items, function(i, item) {
@@ -81,8 +112,43 @@ var getUnanswered = function(tags) {
 	});
 };
 
+// takes user results for a tag and finds top answerers for it
+var getTopAnswerers = function(tag) {
+	// parameters needed to pass our request to stackoverflow's api
+	var request = {
+		tag: tag,
+		site: 'stackoverflow',
+		period: 'all_time'
+	};
+
+	$.ajax({
+		url: "http://api.stackexchange.com/2.2/tags/"+ tag + "/top-answerers/all_time?",
+		// 2.2/tags/{tag}/top-answerers/all_time?site=stackoverflow
+		data: request,
+		dataType: "jsonp",
+		type: "GET",
+	})
+	.done(function(result){
+		var searchResults = showSearchResults(request.tag, result.items.length);
+		console.log(request);
+		console.log(result);
+		$('.search-results').html(searchResults);
+
+		$.each(result.items, function(i, item){
+			var question = showTopAnswerersQuestion(item);
+			$('.results').append(question);
+			console.log(item);
+		});
+	})
+	.fail(function(jqXHR, error) {
+		var errorElem = showError(error);
+		$('.search-results').append(errorElem);
+	});
+};
+
 
 $(document).ready( function() {
+	// event handler for unanswered question
 	$('.unanswered-getter').submit( function(e){
 		e.preventDefault();
 		// zero out results if previous search has run
@@ -91,4 +157,14 @@ $(document).ready( function() {
 		var tags = $(this).find("input[name='tags']").val();
 		getUnanswered(tags);
 	});
+
+	// event handler for top answerers
+	$('.inspiration-getter').submit(function (e) {
+		e.preventDefault();
+		// clears out previous search results
+		$('.results').html('');
+		// get value of tags user submitted
+		var tag_inspiration = $(this).find("input[name='answerers']").val();
+		getTopAnswerers(tag_inspiration);
+	})
 });