Progressive Enhancement (Node Server)

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,40 @@
+stackerForm
+========
+
+Progressively enhanced fork of [Thinkful-Ed/stackerAJAX](https://github.com/Thinkful-Ed/stackerAJAX).
+
+## Preview
+Have a look at the synchronous and asynchronous endpoints in action.  
+
+![](http://j4p.us/0E243Q2G0r3z/stackerform.gif)
+
+## Getting Started
+
+In order to build our front end assets, you need to have Node.js/npm latest and git 1.7 or later.
+(Earlier versions might work OK, but are not tested.)
+
+For Windows you have to download and install [git](http://git-scm.com/downloads) and [Node.js](http://nodejs.org/download/).
+
+Mac OS users should install [Homebrew](http://mxcl.github.com/homebrew/). Once Homebrew is installed, run `brew install git` to install git,
+and `brew install node` to install Node.js.
+
+Linux/BSD users should use their appropriate package managers to install git and Node.js, or build from source
+if you swing that way. Easy-peasy.
+
+## Getting Started
+First, clone a copy of this git repo by running:
+
+```bash
+git clone -b grunt git@github.com:jpdevries/stackerForm.git
+```
+
+Then cd into the `stackerForm` folder and install the Node dependencies:
+```bash
+cd stackerForm
+npm install
+```
+
+You should now be able to run the Node server!
+```bash
+npm run start
+```

css/main.css

@@ -1,26 +1,68 @@
+* {
+	box-sizing: border-box;
+}
+
+input[type="text"] {
+	width: 100%;
+}
+
+@media (min-width: 641px) {
+	input[type="text"] {
+		width: auto;
+	}
+}
+
+img {
+	max-width: 100%;
+}
+
+input[type="submit"] {
+	display: block;
+	margin-top: 1em;
+}
+
+@media (min-width: 641px) {
+	input[type="submit"] {
+		display: inline-block;
+	}
+}
+
 .container {
-	margin: 3em auto;
-	width: 600px;
+	margin: 1em auto;
 }
 
-.hidden {
+[hidden] {
 	display: none;
 }
 
-.left {
-	float: left;
+@media (min-width: 641px) {
+	.container {
+		margin: 3em auto;
+		max-width: 600px;
+	}
+}
+
+.hidden {
+	display: none;
 }
 
 .stack-image {
-	background: url('../images/stack-icon.png') no-repeat center center;
-	width: 200px;
-	height: 200px;
-	-webkit-background-size: cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
-	margin-right: 1em;
 	border-radius: 5px;
+	text-align: center;
+}
+
+@media (min-width: 641px) {
+	.stack-image {
+		width: 200px;
+		height: 200px;
+		margin-right: 1em;
+		float: left;
+	}
+}
+
+.stack-image img {
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .intro {
@@ -31,7 +73,7 @@
 	clear: both;
 }
 
-.inspiration { 
+.inspiration {
 	margin-left: 3em;
 }
 

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);
@@ -31,6 +31,16 @@ var showQuestion = function(question) {
 	return result;
 };
 
+var showAnswer = function(answer) {
+	var result = $('.templates .answerer').clone();
+
+	result.find('.answerer-name a').text(answer.user.display_name);
+	result.find('.answerer-count').text(answer.post_count);
+	result.find('.answerer-count').text(answer.score);
+
+	return result;
+};
+
 
 // this function takes the results object from StackOverflow
 // and returns the number of results and tags to be appended to DOM
@@ -49,15 +59,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,
@@ -81,14 +91,56 @@ var getUnanswered = function(tags) {
 	});
 };
 
+// takes a string of semi-colon separated tags to be searched
+// for on StackOverflow
+var getTopAnswerers = function(tags) {
+
+	// the parameters we need to pass in our request to StackOverflow's API
+	var request = {
+		tagged: tags,
+		site: 'stackoverflow',
+		order: 'desc',
+		sort: 'creation'
+	};
+
+	$.ajax({
+		url: 'http://api.stackexchange.com/2.2/tags/' + tags + '/top-answerers/all_time',
+		data: request,
+		dataType: "jsonp",//use jsonp to avoid cross origin issues
+		type: "GET",
+	})
+	.done(function(result){ //this waits for the ajax to return with a succesful promise object
+		var searchResults = showSearchResults(request.tagged, 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) {
+			var answer = showAnswer(item);
+			$('.results').append(answer);
+		});
+	})
+	.fail(function(jqXHR, error){ //this waits for the ajax to return with an error promise object
+		var errorElem = showError(error);
+		$('.search-results').append(errorElem);
+	});
+};
 
 $(document).ready( function() {
 	$('.unanswered-getter').submit( function(e){
 		e.preventDefault();
 		// zero out results if previous search has run
 		$('.results').html('');
 		// get the value of the tags the user submitted
-		var tags = $(this).find("input[name='tags']").val();
+		var tags = $(this).find("input[name='tagged']").val();
 		getUnanswered(tags);
 	});
+	$('.inspiration-getter').submit( function(e){
+		e.preventDefault();
+		// zero out results if previous search has run
+		$('.results').html('');
+		// get the value of the tags the user submitted
+		var tags = $(this).find("input[name='tagged']").val();
+		getTopAnswerers(tags);
+	});
 });

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "stackerajax",
+  "version": "0.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "nodemon --watch ./ --watch ./views -e js,twig server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jpdevries/stackerAJAX.git"
+  },
+  "author": "JP de Vries",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jpdevries/stackerAJAX/issues"
+  },
+  "homepage": "https://github.com/jpdevries/stackerAJAX#readme",
+  "dependencies": {
+    "express": "^4.14.0",
+    "formidable": "^1.0.17",
+    "request": "^2.74.0",
+    "serve-static": "^1.11.1",
+    "twig": "^0.9.5"
+  },
+  "devDependencies": {
+    "nodemon": "^1.10.0"
+  }
+}