NateWr#6 created a Client-side functionality for the Helpful and Not …

…Helpful buttons

public/main.js

@@ -0,0 +1,17 @@
+var helpful = 0;
+var unhelpful = 0;
+var total = 0;
+var display = document.getElementById("displayCount");
+var totalNumber = document.getElementById("totalNumber")
+document.getElementById("Button1").addEventListener("click", function (event) {
+    //var temp = event.target;
+    helpful++;
+    total++;
+    display.innerHTML = helpful;
+    totalNumber.innerHTML = total;
+});
+document.getElementById("Button2").addEventListener("click", function (event) {
+    unhelpful++;
+    total++;
+    totalNumber.innerHTML = total;
+});

views/index.hbs

@@ -8,23 +8,23 @@
 	</button>
 </form>
 {{#if entries}}
-	<ul class="entry-list">
-		{{#each entries}}
-			<li class="entry">
-				<h2 class="entry__question">
-					{{this.question}}
-				</h2>
-				<div class="entry__answer">
-					{{{this.answer}}}
-				</div>
-				<div class="entry__help">
-					{{this.helpful}}/?? people found this helpful. Was this entry helpful?
-					<button class="button button--small">Yes</button>
-					<button class="button button--small">No</button>
-				</div>
-			</li>
-		{{/each}}
-	</ul>
+<ul class="entry-list">
+	{{#each entries}}
+	<li class="entry">
+		<h2 class="entry__question">
+			{{this.question}}
+		</h2>
+		<div class="entry__answer">
+			{{{this.answer}}}
+		</div>
+		<div class="entry__help">
+			<span id="displayCount">{{this.helpful}}</span>/<span id="totalNumber"></span> people found this helpful. Was this entry helpful?
+			<button id="Button1" class="button button--small">Yes</button>
+			<button id="Button2" class="button button--small">No</button>
+		</div>
+	</li>
+	{{/each}}
+</ul>
 {{/if}}
 <div class="add">
 	<p class="add__prompt">Still haven't found your answer? Why not ask a question?</p>

views/layout.hbs

@@ -14,5 +14,6 @@
 			</header>
 			{{{body}}}
 		</div>
+    <script src="/main.js"></script>
   </body>
 </html>