added matches.ejs, started keyword fetch from client-side code

public/css/style.css

@@ -1,10 +1,27 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;800&display=swap');
 
+/*
+================= Base Styles =================
+*/
+
+ul {
+	margin: 0;
+	list-style: none;
+}
+
+.middle-br {
+	margin: .5rem 0;
+}
+
+/*
+================= Additional Styles =================
+*/
+
 /* html */
 
 html {
 	font-family: 'Montserrat', sans-serif;
-	color: #141414;
+	color: rgb(30, 30, 30);
 }
 
 html * {
@@ -16,7 +33,7 @@ html * {
 .frame {
 	padding: 0;
 	margin: 0;
-	border: solid 8px #141414;
+	border: solid 8px rgb(30, 30, 30);
 	margin: 2rem;
 	border-radius: 4rem;
 	overflow: hidden;
@@ -50,7 +67,8 @@ nav > img {
 /* contributors */
 
 .contributors {
-	--color: #141414;
+	--color: rgb(30, 30, 30);
+	background-color: #fff;
 	position: relative;
 	overflow: hidden;
 	border: 3px solid var(--color);
@@ -87,7 +105,7 @@ nav > img {
 }
 
 .contributors:active:before {
-	background: #141414;
+	background: rgb(30, 30, 30);
 	transition: background 0s;
 }
 
@@ -130,7 +148,7 @@ main {
 	display: flex;
 	flex-wrap: wrap;
 	flex-direction: column;
-	justify-content: space-between;
+	justify-content: space-around;
 	align-items: center;
 }
 
@@ -143,13 +161,12 @@ main {
 
 .api-test form input {
 	width: 65%;
-
 	padding: 0 0;
 	border-radius: 15px 0px 0px 15px;
 	font-size: 0.8rem;
 	padding-left: 1rem;
 	transition: width 500ms ease;
-	border: solid 2px #141414;
+	border: solid 3px rgb(30, 30, 30);
 	font-size: 1rem;
 	font-weight: 600;
 }
@@ -170,8 +187,8 @@ main {
 
 .api-test form button {
 	width: 10%;
-	background-color: #141414;
-	border: solid 2px #141414;
+	background-color: rgb(30, 30, 30);
+	border: solid 2px rgb(30, 30, 30);
 	border-radius: 0 15px 15px 0;
 	font-size: 20px;
 }
@@ -191,12 +208,45 @@ main {
 /* result */
 
 .result {
+	overflow: hidden;
+	border-radius: 25px;
 	width: 90%;
-	height: 70%;
+}
+
+
+.scroll-container {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	width: 100%;
+	height: 300px;
 	border: dashed lightgray 2px;
 	border-radius: 25px;
 }
 
+.scroll-container::-webkit-scrollbar {
+	width: 12px;
+	background-color: #F5F5F5;
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	background-color: rgb(177, 177, 177);
+}
+
+.scroll-container::-webkit-scrollbar-track {
+	border-radius: 10px;
+	background-color: #dbdbdb;
+}
+
+.json {
+	display: block;
+	white-space: pre-wrap;
+}
+
+.indent {
+	padding-left: 1rem;
+}
+
 /* documentation */
 
 .documentation {

public/js/main.js

@@ -1,14 +1,31 @@
-let resources;
-fetchResources();
+const btn = document.getElementById('keyword-btn');
+btn.addEventListener('click', getMatches);
 
-async function fetchResources() {
-	const response = await fetch(`/api/`);
-	const data = await response.json();
-	resources = data;
+async function getMatches() {
+	const keyword = document.querySelector('input').value;
+
+	try {
+		const res = await fetch('/api');
+		const data = await res.json();
+		const matches = data.filter(resource => resource.keywords.some(str => str.includes(keyword)));
+		renderMatches(matches);
+	} catch(err) {
+		console.error(err);
+	}
 }
 
-document.getElementById('keyword-btn').addEventListener('click', async () => {
-	const keyword = document.querySelector('input').value;
-	const matches = await resources.filter((obj) => obj.keywords.some(str => str.includes(keyword)));
+function renderMatches(matches) {
 	const list = document.getElementById('result-list');
-});
+	list.innerHTML = '';
+
+	matches.forEach(match => {
+		const li = document.createElement('li');
+
+		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>
+		`;
+
+		list.appendChild(li);
+	});
+}

server.js

@@ -10,10 +10,14 @@ app.use(express.static(__dirname + '/public'));
 app.use('/public', express.static(__dirname + '/public'));
 
 app.get('/', (req, res) => {
-	if (resources) {
-		res.render('index.ejs', { resources });
-	} else {
-		console.error('no resources found');
+	try {
+		if (resources) {
+			res.render('index.ejs', { resources });
+		} else {
+			throw new Error('Resources not found.')
+		}
+	} catch (err) {
+		console.error(err);
 	}
 });
 
@@ -23,14 +27,19 @@ app.get('/api', (req, res) => {
 
 app.get('/api/:keyword', (req, res) => {
 	const keyword = req.params.keyword.toLowerCase();
-
+	
 	// filter resources array, return items that match query; tag.
-	const matches = resources.filter((obj) => obj.keywords.includes(keyword));
+	const matches = resources.filter((obj) => obj.keywords.some(str => str.includes(keyword)));
 
-	if (matches.length > 0) {
-		res.json(matches);
-	} else {
-		throw new Error('Resource not found.');
+	try {
+		// if matches were found respond with json else throw error
+		if (matches.length) {
+			res.json(matches);
+		} else {
+			throw new Error('No resources found.');
+		}
+	} catch(err) {
+		console.error(err);
 	}
 });
 

views/index.ejs

@@ -47,12 +47,23 @@
 							value=""
 							placeholder="/api/'keyword'"
 						/>
-						<button id="keyword-btn" type="submit">
+						<button id="keyword-btn" type="button">
 							<i class="fa-solid fa-magnifying-glass"></i>
 						</button>
+						<button type="submit" style='display: none;'></button>
 					</form>
 					<div class="result">
-						<ul id="result-list"></ul>
+						<div class='scroll-container'>
+							<ul id="result-list">
+								<% for(let i = 0; i < resources.length; i++) { %>
+									<li>
+										<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>
+										</pre>
+									</li>
+								<% } %>
+							</ul>
+						</div>
 					</div>
 				</section>
 			</main>