From 5658a345ea6b898e5276dd4c0b85e64e65e75c83 Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sat, 11 Jun 2022 18:25:44 -0400 Subject: [PATCH 01/11] replaced html with ejs, rendered through server-side code --- package-lock.json | 278 ++++++++++++++++++++++++++++++++++ package.json | 1 + public/js/main.js | 4 +- server.js | 8 +- index.html => views/index.ejs | 9 +- 5 files changed, 296 insertions(+), 4 deletions(-) rename index.html => views/index.ejs (90%) diff --git a/package-lock.json b/package-lock.json index 03e3591..f8b29e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "cors": "^2.8.5", + "ejs": "^3.1.8", "express": "^4.18.1" } }, @@ -25,11 +26,35 @@ "node": ">= 0.6" } }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, + "node_modules/async": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", + "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==" + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, "node_modules/body-parser": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz", @@ -53,6 +78,15 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -73,6 +107,42 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -147,6 +217,20 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, + "node_modules/ejs": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz", + "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==", + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -209,6 +293,33 @@ "node": ">= 0.10.0" } }, + "node_modules/filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", + "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/finalhandler": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", @@ -271,6 +382,14 @@ "node": ">= 0.4.0" } }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", @@ -321,6 +440,23 @@ "node": ">= 0.10" } }, + "node_modules/jake": { + "version": "10.8.5", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", + "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", + "dependencies": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.1", + "minimatch": "^3.0.4" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -372,6 +508,17 @@ "node": ">= 0.6" } }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -565,6 +712,17 @@ "node": ">= 0.8" } }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", @@ -620,11 +778,29 @@ "negotiator": "0.6.3" } }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, + "async": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", + "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==" + }, + "balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, "body-parser": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz", @@ -644,6 +820,15 @@ "unpipe": "1.0.0" } }, + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, "bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -658,6 +843,33 @@ "get-intrinsic": "^1.0.2" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, "content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -713,6 +925,14 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, + "ejs": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz", + "integrity": "sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==", + "requires": { + "jake": "^10.8.5" + } + }, "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -766,6 +986,32 @@ "vary": "~1.1.2" } }, + "filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "requires": { + "minimatch": "^5.0.1" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "requires": { + "balanced-match": "^1.0.0" + } + }, + "minimatch": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz", + "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==", + "requires": { + "brace-expansion": "^2.0.1" + } + } + } + }, "finalhandler": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", @@ -813,6 +1059,11 @@ "function-bind": "^1.1.1" } }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + }, "has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", @@ -848,6 +1099,17 @@ "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" }, + "jake": { + "version": "10.8.5", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", + "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", + "requires": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.1", + "minimatch": "^3.0.4" + } + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -881,6 +1143,14 @@ "mime-db": "1.52.0" } }, + "minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "requires": { + "brace-expansion": "^1.1.7" + } + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -1020,6 +1290,14 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==" }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "requires": { + "has-flag": "^4.0.0" + } + }, "toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", diff --git a/package.json b/package.json index 0d8ae87..49b0f64 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "cors": "^2.8.5", + "ejs": "^3.1.8", "express": "^4.18.1" } } diff --git a/public/js/main.js b/public/js/main.js index a508f7c..c43718c 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -7,6 +7,8 @@ async function fetchResources() { resources = data; } -document.getElementById('keyword-btn').addEventListener('click', () => { +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))); + const list = document.getElementById('result-list'); }); diff --git a/server.js b/server.js index e55dcdf..7639721 100644 --- a/server.js +++ b/server.js @@ -3,12 +3,18 @@ const app = express(); const cors = require('cors'); const { resources } = require("./resources"); const PORT = process.env.PORT || 8000; + +app.set('view engine', 'ejs') app.use(cors()); app.use(express.static(__dirname + '/public')); app.use('/public', express.static(__dirname + '/public')); app.get('/', (req, res) => { - res.sendFile(__dirname + '/index.html'); + if (resources) { + res.render('index.ejs', { resources }); + } else { + console.error('no resources found'); + } }); app.get('/api', (req, res) => { diff --git a/index.html b/views/index.ejs similarity index 90% rename from index.html rename to views/index.ejs index 4b27836..88844cc 100644 --- a/index.html +++ b/views/index.ejs @@ -8,6 +8,10 @@ content="width=device-width, initial-scale=1.0" /> Resources API + + + + @@ -38,16 +42,17 @@

Coding Resources API-

-
+
    From b2d0f547ed5068e5be3c0e70b25ae0e13d1ff350 Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sat, 11 Jun 2022 19:41:18 -0400 Subject: [PATCH 02/11] added matches.ejs, started keyword fetch from client-side code --- public/css/style.css | 30 +++++++++++++++-- public/js/main.js | 23 ++++++++----- server.js | 30 +++++++++++------ views/index.ejs | 14 +++++++- views/matches.ejs | 80 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 154 insertions(+), 23 deletions(-) create mode 100644 views/matches.ejs diff --git a/public/css/style.css b/public/css/style.css index 0798297..1483b62 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,5 +1,18 @@ @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; +} + +/* +================= Additional Styles ================= +*/ + /* html */ html { @@ -130,7 +143,7 @@ main { display: flex; flex-wrap: wrap; flex-direction: column; - justify-content: space-between; + justify-content: space-around; align-items: center; } @@ -192,9 +205,20 @@ main { .result { width: 90%; - height: 70%; + height: 300px; border: dashed lightgray 2px; - border-radius: 25px; + /* border-radius: 25px; */ + overflow-y: auto; + overflow-x: hidden; +} + +.json { + display: block; + white-space: pre-wrap; +} + +.indent { + padding-left: 1rem; } /* documentation */ diff --git a/public/js/main.js b/public/js/main.js index c43718c..65e2169 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,14 +1,19 @@ -let resources; -fetchResources(); +// let resources; +// fetchResources(); -async function fetchResources() { - const response = await fetch(`/api/`); - const data = await response.json(); - resources = data; -} +// async function fetchResources() { +// const response = await fetch(`/api/`); +// const data = await response.json(); +// resources = data; +// } 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))); - const list = document.getElementById('result-list'); + + try { + const res = await fetch(`/api/${keyword}`); + const data = await res.json(); + } catch (err) { + console.error(err); + } }); diff --git a/server.js b/server.js index 7639721..c308661 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,20 @@ 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, render matches.ejs / response with json else throw error + if (matches.length) { + res.render('matches.ejs', { matches }); + 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..b5e994e 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -52,7 +52,19 @@
    -
      +
        + <% for(let i = 0; i < resources.length; i++) { %> +
      • + 
        +										{
        
+												name: <%= resources[i].name %>,
+												url: <%= resources[i].url %>,
+												keywords: [<%= resources[i].keywords %>]
        
+											}        
+
        +
        • + <% } %> +
      diff --git a/views/matches.ejs b/views/matches.ejs new file mode 100644 index 0000000..a9ae817 --- /dev/null +++ b/views/matches.ejs @@ -0,0 +1,80 @@ + + + + + + + Resources API + + + + + + + + + + +
      + +
      +
      +

      Coding Resources API-

      +

      + Search for coding resources by relevant keywords. + This API serves educational content for a wide + variety of computer science topics, languages and + technologies relevant to web development. +

      +
      +
      +
      + + +
      +
      +
        + <% for(let i = 0; i < matches.length; i++) { %> +
      • + 
        +                                        
+                                        {
+                                        
        
+                                            name: <%= matches[i].name %>,
+                                            url: <%= matches[i].url %>,
+                                            keywords: [<%= matches[i].keywords %>]
+                                        
        
+                                        }        
+
        +
        • + <% } %> +
      +
      +
      +
      +
      +

      Documentation

      +
      +
      + + + From 7194f22bc62d522c19bf9b9df657b99ebbb7b65c Mon Sep 17 00:00:00 2001 From: Jacob Asper Date: Sat, 11 Jun 2022 19:50:20 -0400 Subject: [PATCH 03/11] fixed styling of code blocks --- views/index.ejs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/views/index.ejs b/views/index.ejs index b5e994e..909f144 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -56,7 +56,8 @@ <% for(let i = 0; i < resources.length; i++) { %> 
    • -										{
      
+										
+											{
      
 												name: <%= resources[i].name %>,
 												url: <%= resources[i].url %>,
 												keywords: [<%= resources[i].keywords %>]
      

From ac8544c3b9a55a61e8cc8fa87d581818c7236ec9 Mon Sep 17 00:00:00 2001
From: Jacob Asper 
Date: Sat, 11 Jun 2022 20:00:55 -0400
Subject: [PATCH 04/11] changed button type to button

---
 views/index.ejs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/views/index.ejs b/views/index.ejs
index 909f144..0be33bb 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -47,9 +47,10 @@
 							value=""
 							placeholder="/api/'keyword'"
 						/>
-						
+						
 					
 					
      
 						
        

From 67449fd38723790354b24bc1b5892ef4c17a6efd Mon Sep 17 00:00:00 2001
From: Jacob Asper 
Date: Sat, 11 Jun 2022 20:49:25 -0400
Subject: [PATCH 05/11] formatted strings in code block

---
 views/index.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/index.ejs b/views/index.ejs
index 0be33bb..08b878c 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -61,7 +61,7 @@
 											{
        
 												name: <%= resources[i].name %>,
 												url: <%= resources[i].url %>,
-												keywords: [<%= resources[i].keywords %>]
        
+												keywords: [<%= resources[i].keywords.map(resource => `'${resource}'`).join(", ") %>]
      
 											}
      • From 1a541aab739e928be91233309e4d966bc77e8fd3 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Jun 2022 19:51:44 -0500 Subject: [PATCH 06/11] chnaged scroll bar styling of the result div, and changed some color tones --- public/assets/logo.svg | 15 +++++++------- public/css/style.css | 44 +++++++++++++++++++++++++++++++----------- views/index.ejs | 30 +++++++++++++++------------- views/matches.ejs | 34 +++++++++++++++++--------------- 4 files changed, 75 insertions(+), 48 deletions(-) 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 @@ + c0-5.1,0-10.2-0.1-15.4c-0.1-2.4,0.6-3.5,3.2-3.5c6.5,0,6.4-0.1,6.3,6.4C188.2,247.2,188.3,256.1,188.3,265L188.3,265z"/> + C242.5,247,242.5,255.9,242.6,264.8L242.6,264.8z"/> + C417.3,247.2,417.2,256.1,417.3,265L417.3,265z"/> diff --git a/public/css/style.css b/public/css/style.css index 1483b62..72294c5 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -17,7 +17,7 @@ ul { html { font-family: 'Montserrat', sans-serif; - color: #141414; + color: rgb(30, 30, 30); } html * { @@ -29,7 +29,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; @@ -63,7 +63,8 @@ nav > img { /* contributors */ .contributors { - --color: #141414; + --color: rgb(30, 30, 30); + background-color: #fff; position: relative; overflow: hidden; border: 3px solid var(--color); @@ -100,7 +101,7 @@ nav > img { } .contributors:active:before { - background: #141414; + background: rgb(30, 30, 30); transition: background 0s; } @@ -156,13 +157,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; } @@ -183,8 +183,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; } @@ -204,12 +204,34 @@ main { /* result */ .result { + overflow: hidden; + border-radius: 25px; width: 90%; +} + + +.scroll-container { + overflow-y: scroll; + overflow-x: hidden; + width: 100%; height: 300px; border: dashed lightgray 2px; - /* border-radius: 25px; */ - overflow-y: auto; - overflow-x: hidden; + 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 { diff --git a/views/index.ejs b/views/index.ejs index b5e994e..a2a75ac 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -52,19 +52,23 @@
      -
        - <% for(let i = 0; i < resources.length; i++) { %> -
      • - 
        -										{
        
-												name: <%= resources[i].name %>,
-												url: <%= resources[i].url %>,
-												keywords: [<%= resources[i].keywords %>]
        
-											}        
-
        -
        • - <% } %> -
      +
      +
        + <% for(let i = 0; i < resources.length; i++) { %> +
      • + 
        +											
+												{
        
+													name: <%= resources[i].name %>,
+													url: <%= resources[i].url %>,
+													keywords: [<%= resources[i].keywords %>]
        
+												}
+											        
+
        +
        • + <% } %> +
      +
      diff --git a/views/matches.ejs b/views/matches.ejs index a9ae817..00b85a4 100644 --- a/views/matches.ejs +++ b/views/matches.ejs @@ -52,22 +52,24 @@
      -
        - <% for(let i = 0; i < matches.length; i++) { %> -
      • - 
        -                                        
-                                        {
-                                        
        
-                                            name: <%= matches[i].name %>,
-                                            url: <%= matches[i].url %>,
-                                            keywords: [<%= matches[i].keywords %>]
-                                        
        
-                                        }        
-
        -
        • - <% } %> -
      +
      +
        + <% for(let i = 0; i < matches.length; i++) { %> +
      • + 
        +											
+											{
+											
        
+												name: <%= matches[i].name %>,
+												url: <%= matches[i].url %>,
+												keywords: [<%= matches[i].keywords %>]
+											
        
+											}        
+
        +
        • + <% } %> +
      +
      From 2d78225ae3de75d3b8bf205d9fb2b2c29e270a13 Mon Sep 17 00:00:00 2001 From: Jacob Asper Date: Sat, 11 Jun 2022 20:59:52 -0400 Subject: [PATCH 07/11] formatted code blocks with map function --- views/matches.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/matches.ejs b/views/matches.ejs index 00b85a4..2133747 100644 --- a/views/matches.ejs +++ b/views/matches.ejs @@ -62,7 +62,7 @@
      name: <%= matches[i].name %>, url: <%= matches[i].url %>, - keywords: [<%= matches[i].keywords %>] + keywords: [<%= matches[i].keywords.map(resource => `'${resource}'`).join(", ") %>]
      }       From f9d0399c3c0230a0fcf9e67003aba002020d7266 Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sat, 11 Jun 2022 21:26:04 -0400 Subject: [PATCH 08/11] fixed object render to DOM --- public/css/style.css | 4 ++++ views/index.ejs | 7 +------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 72294c5..1d42e56 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -9,6 +9,10 @@ ul { list-style: none; } +.middle-br { + margin: .5rem 0; +} + /* ================= Additional Styles ================= */ diff --git a/views/index.ejs b/views/index.ejs index 45adb6b..fb6c74d 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -58,12 +58,7 @@ <% for(let i = 0; i < resources.length; i++) { %> 
    • -											
-												{
      
-													name: <%= resources[i].name %>,
-													url: <%= resources[i].url %>,
-													keywords: [<%= resources[i].keywords.map(resource => `'${resource}'`).join(", ") %>]
      
-												}      
+											{

      name: <%= resources[i].name %>,
      url: <%= resources[i].url %>,
      keywords: [<%= resources[i].keywords.map(resource => `'${resource}'`).join(", ") %>]

      }
      • <% } %> From e8e9fae319d1038e19f44e11f71072bea93bebc3 Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sat, 11 Jun 2022 21:46:58 -0400 Subject: [PATCH 09/11] fully functional api search --- public/js/main.js | 31 +++++++++++------- server.js | 3 +- views/index.ejs | 2 +- views/matches.ejs | 82 ----------------------------------------------- 4 files changed, 22 insertions(+), 96 deletions(-) delete mode 100644 views/matches.ejs diff --git a/public/js/main.js b/public/js/main.js index 65e2169..fbae544 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,19 +1,28 @@ -// let resources; -// fetchResources(); - -// async function fetchResources() { -// const response = await fetch(`/api/`); -// const data = await response.json(); -// resources = data; -// } - document.getElementById('keyword-btn').addEventListener('click', async () => { const keyword = document.querySelector('input').value; + const list = document.getElementById('result-list'); + list.innerHTML = ''; try { - const res = await fetch(`/api/${keyword}`); + const res = await fetch('/api'); const data = await res.json(); - } catch (err) { + const matches = data.filter(resource => resource.keywords.some(str => str.includes(keyword))); + + console.log(matches); + + 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); + }); + + console.log('here') + } catch(err) { console.error(err); } }); diff --git a/server.js b/server.js index c308661..707c260 100644 --- a/server.js +++ b/server.js @@ -32,9 +32,8 @@ app.get('/api/:keyword', (req, res) => { const matches = resources.filter((obj) => obj.keywords.some(str => str.includes(keyword))); try { - // if matches were found, render matches.ejs / response with json else throw error + // if matches were found respond with json else throw error if (matches.length) { - res.render('matches.ejs', { matches }); res.json(matches); } else { throw new Error('No resources found.'); diff --git a/views/index.ejs b/views/index.ejs index fb6c74d..d4aae88 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -58,7 +58,7 @@ <% for(let i = 0; i < resources.length; i++) { %> 
    • -											{

      name: <%= resources[i].name %>,
      url: <%= resources[i].url %>,
      keywords: [<%= resources[i].keywords.map(resource => `'${resource}'`).join(", ") %>]

      }      
+											{

      name: <%= resources[i].name %>,
      url: <%= resources[i].url %>,
      keywords: [<%= resources[i].keywords.map(keyword => `'${keyword}'`).join(", ") %>]

      }
      • <% } %> diff --git a/views/matches.ejs b/views/matches.ejs deleted file mode 100644 index 2133747..0000000 --- a/views/matches.ejs +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - Resources API - - - - - - - - - - -
      - -
      -
      -

      Coding Resources API-

      -

      - Search for coding resources by relevant keywords. - This API serves educational content for a wide - variety of computer science topics, languages and - technologies relevant to web development. -

      -
      -
      -
      - - -
      -
      -
      -
        - <% for(let i = 0; i < matches.length; i++) { %> -
      • - 
        -											
-											{
-											
        
-												name: <%= matches[i].name %>,
-												url: <%= matches[i].url %>,
-												keywords: [<%= matches[i].keywords.map(resource => `'${resource}'`).join(", ") %>]
-											
        
-											}        
-
        -
        • - <% } %> -
      -
      -
      -
      -
      -
      -

      Documentation

      -
      -
      - - - From 8edbd9f42d4774c174957664dde1d902f8f75beb Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sat, 11 Jun 2022 22:05:37 -0400 Subject: [PATCH 10/11] separated main.js into separate functions, need event listener for enter keypress --- public/js/main.js | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index fbae544..d2821b1 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,28 +1,31 @@ -document.getElementById('keyword-btn').addEventListener('click', async () => { +const btn = document.getElementById('keyword-btn'); +btn.addEventListener('click', getMatches); + +async function getMatches() { const keyword = document.querySelector('input').value; - const list = document.getElementById('result-list'); - list.innerHTML = ''; 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); + } +} - console.log(matches); - - matches.forEach(match => { - const li = document.createElement('li'); +function renderMatches(matches) { + const list = document.getElementById('result-list'); + list.innerHTML = ''; - li.innerHTML = ` - 
      {

      name: ${match.name},
      url: ${match.url},
      keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]

      }      
-
      - `; + matches.forEach(match => { + const li = document.createElement('li'); - list.appendChild(li); - }); + li.innerHTML = ` + 
      {

      name: ${match.name},
      url: ${match.url},
      keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]

      }      
+
      + `; - console.log('here') - } catch(err) { - console.error(err); - } -}); + list.appendChild(li); + }); +} \ No newline at end of file From ba53c2472473cf0ac90da89d91d6470f972f9d5b Mon Sep 17 00:00:00 2001 From: Jacob Asper Date: Sat, 11 Jun 2022 22:43:22 -0400 Subject: [PATCH 11/11] made input lower case and trimmed --- public/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/main.js b/public/js/main.js index d2821b1..6aeac1a 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -2,7 +2,7 @@ const btn = document.getElementById('keyword-btn'); btn.addEventListener('click', getMatches); async function getMatches() { - const keyword = document.querySelector('input').value; + const keyword = document.querySelector('input').value.toLowerCase().trim(); try { const res = await fetch('/api');