From 56ebad53f350b17645bf9ae57d4fcb3b58f09b1a Mon Sep 17 00:00:00 2001
From: JP DeVries <mail@devries.jp>
Date: Sun, 7 Aug 2016 22:43:12 +0200
Subject: [PATCH 1/5] Labels for Inputs

> Make sure placeholder attributes are NOT being used in place of label
tags.
Closes Thinkful-Ed/stackerAJAX#7
---
 index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 17c6029..53931dc 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,14 @@ <h1>StackOverflow Reputation Builder</h1>
 			<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">
-				<input type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
+				<label for="unanswered">Tag</label>
+				<input id="unanswered" type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
 				<input type="submit" value="Submit">
 			</form>
 			<h3>View the Top Answerers for a Tag</h3>
 			<form class="inspiration-getter">
-				<input type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
+				<label for="answerers">Tag</label>
+				<input id="answerers" type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
 				<input type="submit" value="Submit">
 			</form>
 		</div>

From 61e9f1033c4273a535ba92660ef78e85c9f67c58 Mon Sep 17 00:00:00 2001
From: JP DeVries <mail@devries.jp>
Date: Tue, 9 Aug 2016 15:53:26 +0200
Subject: [PATCH 2/5] more semantically hide templates

---
 css/main.css | 4 ++--
 index.html   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/css/main.css b/css/main.css
index 0fedd8d..cca2baa 100644
--- a/css/main.css
+++ b/css/main.css
@@ -3,7 +3,7 @@
 	width: 600px;
 }
 
-.hidden {
+[hidden] {
 	display: none;
 }
 
@@ -31,7 +31,7 @@
 	clear: both;
 }
 
-.inspiration { 
+.inspiration {
 	margin-left: 3em;
 }
 
diff --git a/index.html b/index.html
index 53931dc..ab9299a 100644
--- a/index.html
+++ b/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">
@@ -36,7 +36,7 @@ <h3>View the Top Answerers for a Tag</h3>
 			<div class="results"></div>
 		</div>
 	</div>
-	<div class="templates hidden">
+	<div hidden class="templates">
 		<dl class="result question">
 			<dt>Question</dt>
 				<dd class="question-text"><a href="" target="_blank"></a></dd>

From f9e915d7a958c3acdc77f91b1212e5c3f8dea32f Mon Sep 17 00:00:00 2001
From: JP DeVries <mail@devries.jp>
Date: Tue, 9 Aug 2016 15:55:10 +0200
Subject: [PATCH 3/5] More semantically hide templates

http://www.w3schools.com/tags/att_global_hidden.asp
---
 css/main.css | 2 +-
 index.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/main.css b/css/main.css
index 0fedd8d..3a1f516 100644
--- a/css/main.css
+++ b/css/main.css
@@ -3,7 +3,7 @@
 	width: 600px;
 }
 
-.hidden {
+[hidden] {
 	display: none;
 }
 
diff --git a/index.html b/index.html
index 17c6029..eacbaef 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@ <h3>View the Top Answerers for a Tag</h3>
 			<div class="results"></div>
 		</div>
 	</div>
-	<div class="templates hidden">
+	<div hidden class="templates">
 		<dl class="result question">
 			<dt>Question</dt>
 				<dd class="question-text"><a href="" target="_blank"></a></dd>

From 0f846ee8529285ce3730ccdae8c8091e9943c46f Mon Sep 17 00:00:00 2001
From: JP DeVries <mail@devries.jp>
Date: Tue, 9 Aug 2016 16:08:11 +0200
Subject: [PATCH 4/5] HTML5 semantics

main, header, section
---
 index.html | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 17c6029..22af9cc 100644
--- a/index.html
+++ b/index.html
@@ -6,34 +6,38 @@
 	<link rel="stylesheet" href="css/main.css">
 </head>
 <body>
-	<div class="container">
-		<div class="intro">
+	<main class="container">
+		<header class="intro">
 			<div class="left stack-image"></div>
 			<div class="explanation">
 				<h1>StackOverflow Reputation Builder</h1>
 				<p>This app lets you search by topic for unanswered questions on Stack Overflow to help you build your reputation.  Find unanswered questions for a topic you know about, write quality answers, and watch your reputation go up.</p>
 				<p>Sometimes, you also need some inspiration. This page also lets you search for the top answerers for a tag. If you want to rise to the top ranks for a topic, see how many reputation points you'll need to aim for!</p>
 			</div>
-		</div>
+		</header>
 		<hr>
-		<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">
-				<input type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
-				<input type="submit" value="Submit">
-			</form>
-			<h3>View the Top Answerers for a Tag</h3>
-			<form class="inspiration-getter">
-				<input type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
-				<input type="submit" value="Submit">
-			</form>
+		<div class="stack">
+			<section>
+				<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">
+					<input type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
+					<input type="submit" value="Submit">
+				</form>
+			</section>
+			<section>
+				<h3>View the Top Answerers for a Tag</h3>
+				<form class="inspiration-getter">
+					<input type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
+					<input type="submit" value="Submit">
+				</form>
+			</section>
 		</div>
 		<div class="results-container">
 			<div class="search-results"></div>
 			<div class="results"></div>
 		</div>
-	</div>
+	</main>
 	<div class="templates hidden">
 		<dl class="result question">
 			<dt>Question</dt>

From ef9f945d4eb9762f883fabcfa4433eb3cda7ae17 Mon Sep 17 00:00:00 2001
From: JP DeVries <mail@devries.jp>
Date: Wed, 10 Aug 2016 00:48:32 +0200
Subject: [PATCH 5/5] Sync Endpoints (Node Server)

full support (.no-js)
---
 .gitignore          |   1 +
 README.md           |  40 ++++++++++++++++++
 css/main.css        |  68 ++++++++++++++++++++++++------
 index.html          |  62 ---------------------------
 js/app.js           |  64 +++++++++++++++++++++++++---
 package.json        |  30 +++++++++++++
 server.js           | 100 ++++++++++++++++++++++++++++++++++++++++++++
 views/answerer.twig |   8 ++++
 views/error.twig    |   3 ++
 views/index.twig    |  70 +++++++++++++++++++++++++++++++
 views/question.twig |  12 ++++++
 11 files changed, 377 insertions(+), 81 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 README.md
 delete mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 server.js
 create mode 100644 views/answerer.twig
 create mode 100644 views/error.twig
 create mode 100644 views/index.twig
 create mode 100644 views/question.twig

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b4d31b4
--- /dev/null
+++ b/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&nbsp;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&nbsp;dependencies:
+```bash
+cd stackerForm
+npm install
+```
+
+You should now be able to run the Node&nbsp;server!
+```bash
+npm run start
+```
diff --git a/css/main.css b/css/main.css
index 3a1f516..686a6b8 100644
--- a/css/main.css
+++ b/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] {
 	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;
 }
 
diff --git a/index.html b/index.html
deleted file mode 100644
index fb14d3e..0000000
--- a/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<title>Stack Overflow AJAX Demo</title>
-	<link rel="stylesheet" href="css/main.css">
-</head>
-<body>
-	<main class="container">
-		<header class="intro">
-			<div class="left stack-image"></div>
-			<div class="explanation">
-				<h1>StackOverflow Reputation Builder</h1>
-				<p>This app lets you search by topic for unanswered questions on Stack Overflow to help you build your reputation.  Find unanswered questions for a topic you know about, write quality answers, and watch your reputation go up.</p>
-				<p>Sometimes, you also need some inspiration. This page also lets you search for the top answerers for a tag. If you want to rise to the top ranks for a topic, see how many reputation points you'll need to aim for!</p>
-			</div>
-		</header>
-		<hr>
-		<div class="stack">
-			<section>
-				<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">
-					<label for="unanswered">Tag</label>
-					<input id="unanswered" type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
-					<input type="submit" value="Submit">
-				</form>
-			</section>
-			<section>
-				<h3>View the Top Answerers for a Tag</h3>
-				<form class="inspiration-getter">
-					<label for="answerers">Tag</label>
-					<input id="answerers" type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
-					<input type="submit" value="Submit">
-				</form>
-			</section>
-		</div>
-		<div class="results-container">
-			<div class="search-results"></div>
-			<div class="results"></div>
-		</div>
-	</main>
-	</div>
-	<div hidden class="templates">
-		<dl class="result question">
-			<dt>Question</dt>
-				<dd class="question-text"><a href="" target="_blank"></a></dd>
-			<dt>Asked</dt>
-				<dd class="asked-date"></dd>
-			<dt>Viewed</dt>
-				<dd class="viewed"></dd>
-			<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>
-</html>
diff --git a/js/app.js b/js/app.js
index 18599b4..4da1478 100644
--- a/js/app.js
+++ b/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,6 +91,40 @@ 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){
@@ -88,7 +132,15 @@ $(document).ready( function() {
 		// 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);
+	});
 });
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6b83643
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..9f7f635
--- /dev/null
+++ b/server.js
@@ -0,0 +1,100 @@
+var http = require('http'),
+fs = require('fs'),
+Twig = require("twig"),
+express = require('express'),
+formidable = require("formidable"),
+app = express(),
+request = require("request");
+
+app.get('/', function(req, res) {
+  res.render('index.twig', {
+
+  });
+});
+
+app.post('/', function(req, res) {
+  var form = new formidable.IncomingForm();
+  form.parse(req, function (err, fields, files) {
+    console.log(fields);
+    switch(fields.action) {
+      case 'answerers':
+      getTopAnswerers(fields).then(function(data) {
+        res.render('index.twig', Object.assign({},data,fields));
+      }, function(error) {
+        res.render('index.twig', { error: error });
+      });
+      break;
+
+      case 'unanswered':
+      default:
+      getUnanswered(fields).then(function(data) {
+        res.render('index.twig', Object.assign({},data,fields));
+      }, function(err) {
+        res.render('index.twig', { error: error });
+      });
+
+      break;
+    }
+
+  });
+});
+
+function getUnanswered(fields) {
+  return new Promise(function(resolve, reject) {
+
+    request.get("http://api.stackexchange.com/2.2/questions/unanswered", {
+  		form: Object.assign({},{
+    		site: 'stackoverflow',
+    		order: 'desc',
+    		sort: 'creation'
+      },fields),
+      gzip: true,
+      json: true
+  	}, function(error, response, body) {
+      if (!error && response.statusCode == 200) {
+        resolve(body);
+      } else {
+        reject(error);
+      }
+    });
+
+  });
+}
+
+function getTopAnswerers(fields) {
+  return new Promise(function(resolve, reject) {
+
+    request.get(`http://api.stackexchange.com/2.2/tags/${fields.tagged}/top-answerers/all_time`, {
+  		form: Object.assign({},{
+    		site: 'stackoverflow',
+    		order: 'desc',
+    		sort: 'creation'
+      },fields),
+      gzip: true,
+      json: true
+  	}, function(error, response, body) {
+      if (!error && response.statusCode == 200) {
+        resolve(body);
+      } else {
+        reject(error);
+      }
+    });
+
+  });
+}
+
+
+/*             __
+/\ \__         /\ \__  __
+____\ \ ,_\    __  \ \ ,_\/\_\    ___         ____     __   _ __   __  __     __   _ __
+/',__\\ \ \/  /'__`\ \ \ \/\/\ \  /'___\      /',__\  /'__`\/\`'__\/\ \/\ \  /'__`\/\`'__\
+/\__, `\\ \ \_/\ \L\.\_\ \ \_\ \ \/\ \__/     /\__, `\/\  __/\ \ \/ \ \ \_/ |/\  __/\ \ \/
+\/\____/ \ \__\ \__/.\_\\ \__\\ \_\ \____\    \/\____/\ \____\\ \_\  \ \___/ \ \____\\ \_\
+\/___/   \/__/\/__/\/_/ \/__/ \/_/\/____/     \/___/  \/____/ \/_/   \/__/   \/____/ \/*/
+
+app.use(express.static(__dirname));
+
+app.listen(process.env.PORT || 1188);
+
+console.log("server listening on " + (process.env.PORT || 1188));
+console.log("Visit http://localhost:" + (process.env.PORT || 1188) + " in your browser");
diff --git a/views/answerer.twig b/views/answerer.twig
new file mode 100644
index 0000000..05b7d69
--- /dev/null
+++ b/views/answerer.twig
@@ -0,0 +1,8 @@
+<dl class="result answerer">
+  <dt>Answerer</dt>
+  <dd class="answerer-name"><a href="{{ user.link }}">{{ user.display_name }}</a></dd>
+  <dt>Post Count</dt>
+  <dd class="answerer-count">{{ post_count }}</dd>
+  <dt>Score</dt>
+  <dd class="answerer-score">{{ score }}</dd>
+</dl>
diff --git a/views/error.twig b/views/error.twig
new file mode 100644
index 0000000..da1d98e
--- /dev/null
+++ b/views/error.twig
@@ -0,0 +1,3 @@
+<div class="error">
+  <p>Uh-oh! Something went wrong with your request. Here's what we know:</p>
+</div>
diff --git a/views/index.twig b/views/index.twig
new file mode 100644
index 0000000..e2afa4e
--- /dev/null
+++ b/views/index.twig
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Stack Overflow AJAX Demo</title>
+	<link rel="stylesheet" href="/css/main.css">
+</head>
+<body>
+	<main class="container">
+		<header class="intro">
+			<div class="stack-image">
+				<img src="images/stack-icon.png" alt="Stack Overflow Logo" />
+			</div>
+			<div class="explanation">
+				<h1>StackOverflow Reputation Builder</h1>
+				<p>This app lets you search by topic for unanswered questions on Stack Overflow to help you build your reputation.  Find unanswered questions for a topic you know about, write quality answers, and watch your reputation go up.</p>
+				<p>Sometimes, you also need some inspiration. This page also lets you search for the top answerers for a tag. If you want to rise to the top ranks for a topic, see how many reputation points you'll need to aim for!</p>
+			</div>
+		</header>
+		<hr>
+		<div class="stack">
+			<section>
+				<h3>Get Unanswered Questions</h3>
+				<p>Find unanswered questions by tag. For multiple tags, use a semi-colon to separate.</p>
+				<form action="/" method="post" class="unanswered-getter">
+					<input type="hidden" name="action" value="unanswered">
+					<label for="unanswered">Tag</label>
+					<input id="unanswered" name="tagged" type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
+					<input type="submit" value="Submit">
+				</form>
+			</section>
+			<section>
+				<h3>View the Top Answerers for a Tag</h3>
+				<form action="/" method="post" class="inspiration-getter">
+					<input type="hidden" name="action" value="answerers">
+					<label for="answerers">Tag</label>
+					<input id="answerers" name="tagged" type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
+					<input type="submit" value="Submit">
+				</form>
+			</section>
+		</div>
+		<div class="results-container">
+			{% if error %}
+				{% include 'error.twig' %}
+			{% endif %}
+			<div class="search-results">{% if action %}{{ items|length }} results for <strong>{{ tagged }}</strong>{% endif %}</div>
+			<div class="results">
+				<h3>{% if action == 'unanswered' %}Unanswered Questions{% elseif action == 'answerers'%}Top Answerers{% endif %}</h3>
+				{% for item in items %}
+					{% if action == 'unanswered' %}
+						{% include 'question.twig' with item %}
+					{% elseif action == 'answerers' %}
+						{% include 'answerer.twig' with item %}
+					{% endif %}
+				{% endfor %}
+			</div>
+		</div>
+	</main>
+	</div>
+	<div hidden class="templates">
+		{% include 'question.twig' %}
+		{% include 'answerer.twig' %}
+		{% include 'error.twig' %}
+	</div>
+
+	<!-- handy way of loading the most recent version of jQuery but DO NOT USE THIS IN PRODUCTION it will only be cached for ~10 minutes. Instead use a minified and versioned link found at https://code.jquery.com -->
+	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
+	<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/views/question.twig b/views/question.twig
new file mode 100644
index 0000000..c336fd5
--- /dev/null
+++ b/views/question.twig
@@ -0,0 +1,12 @@
+<dl class="result question">
+  <dt>Question</dt>
+    <dd class="question-text"><a href="{{ link }}" target="_blank">{{ title }}</a></dd>
+  <dt>Asked</dt>
+    <dd class="asked-date">{{ creation_date }}</dd>
+  <dt>Viewed</dt>
+    <dd class="viewed">{{ view_count }}</dd>
+  <dt>Asker</dt>
+    <dd class="asker">
+      <p>Name: <a target="_blank" href="http://stackoverflow.com/users/{{ owner.user_id }}">{{ owner.display_name }}</a></p>
+    </dd>
+</dl>