diff --git a/public/assets/logo.svg b/public/assets/logo.svg
index 0aac8d9..daeca1d 100644
--- a/public/assets/logo.svg
+++ b/public/assets/logo.svg
@@ -3,7 +3,7 @@
diff --git a/public/css/style.css b/public/css/style.css
index 0798297..1d42e56 100644
--- a/public/css/style.css
+++ b/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 {
diff --git a/public/js/main.js b/public/js/main.js
index c43718c..d2821b1 100644
--- a/public/js/main.js
+++ b/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 = `
+ {
name: ${match.name},
url: ${match.url},
keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]
}
+
+ `;
+
+ list.appendChild(li);
+ });
+}
\ No newline at end of file
diff --git a/server.js b/server.js
index 7639721..707c260 100644
--- a/server.js
+++ b/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);
}
});
diff --git a/views/index.ejs b/views/index.ejs
index 88844cc..d4aae88 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -47,12 +47,23 @@
value=""
placeholder="/api/'keyword'"
/>
-