From dee27788c9c941d2a2c0ccfad6dd8e205856dd81 Mon Sep 17 00:00:00 2001
From: brianschnee <brian.a.schnee@gmail.com>
Date: Sat, 11 Jun 2022 23:20:03 -0400
Subject: [PATCH] added comments main.js and index.ejs

---
 public/css/style.css | 2 +-
 public/js/main.js    | 9 ++++++++-
 views/index.ejs      | 5 ++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 1d42e56..4c95a9f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -6,6 +6,7 @@
 
 ul {
 	margin: 0;
+	padding: 0 1rem;
 	list-style: none;
 }
 
@@ -212,7 +213,6 @@ main {
 	border-radius: 25px;
 	width: 90%;
 }
-	
 
 .scroll-container {
 	overflow-y: scroll;
diff --git a/public/js/main.js b/public/js/main.js
index 6aeac1a..57b0bba 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -14,15 +14,22 @@ async function getMatches() {
 	}
 }
 
+/**
+ * Name: renderMatches
+ * Description: takes an array of matches, each match represents resources that had contained a resource's keyword and renders each match to the DOM.
+ * @param {*} matches - accepts an array of objects had contained a resource's keyword.
+ */
 function renderMatches(matches) {
 	const list = document.getElementById('result-list');
 	list.innerHTML = '';
 
+	// For every match found, render the objects to the DOM in JSON format
 	matches.forEach(match => {
 		const li = document.createElement('li');
 
+		// Create an element that looks like a JSON object for every match
 		li.innerHTML = `
-			<pre class="json"><code>{<div class="indent"><br>name: ${match.name},<br>url: ${match.url},<br class="middle-br">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]</div><br>}</code>
+			<pre class="json"><code>{<div class="indent"><br>name: '${match.name}',<br>url: '${match.url}',<br class="middle-br">keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]</div><br>}</code>
 			</pre>
 		`;
 
diff --git a/views/index.ejs b/views/index.ejs
index d4aae88..1f3a50e 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -55,10 +55,13 @@
 					<div class="result">
 						<div class='scroll-container'>
 							<ul id="result-list">
+								<!-- Loop through resources array and render each object to the DOM -->
 								<% for(let i = 0; i < resources.length; i++) { %>
 									<li>
+										<!-- JSON Format for DOM rendering -->
 										<pre class="json">
-											<code>{<div class="indent"><br>name: <%= resources[i].name %>,<br>url: <%= resources[i].url %>,<br class="middle-br">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]</div><br>}</code>
+											<!-- Add indentation, line break and quotes around each key's value -->
+											<code>{<div class="indent"><br>name: '<%= resources[i].name %>',<br>url: '<%= resources[i].url %>',<br class="middle-br">keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]</div><br>}</code>
 										</pre>
 									</li>
 								<% } %>