From b991356f87fcf9ea1db8cda0e6e2e59fd71ca730 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Jun 2022 13:58:27 -0500 Subject: [PATCH 01/13] heroku changes --- public/css/style.css | 218 +++++++++++++++++++++---------------------- server.js | 8 +- 2 files changed, 112 insertions(+), 114 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 2fef638..0798297 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -7,9 +7,9 @@ html { color: #141414; } - html * { - box-sizing: border-box; - } +html * { + box-sizing: border-box; +} /* frame */ @@ -34,18 +34,18 @@ nav { background-color: lightgrey; } - nav::after { - height: 10rem; - background-color: transparent; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 5rem; - } +nav::after { + height: 10rem; + background-color: transparent; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 5rem; +} - nav > img { - height: 100px; - } +nav > img { + height: 100px; +} /* contributors */ @@ -63,33 +63,33 @@ nav { color: var(--color); } - .contributors:before { - content: ''; - position: absolute; - z-index: -1; - background: var(--color); - height: 200px; - width: 250px; - border-radius: 50%; - top: 100%; - left: 100%; - transition: all 0.4s; - } - - .contributors:hover { - color: #fff; - cursor: pointer; - } - - .contributors:hover:before { - top: -32px; - left: -30px; - } - - .contributors:active:before { - background: #141414; - transition: background 0s; - } +.contributors:before { + content: ''; + position: absolute; + z-index: -1; + background: var(--color); + height: 200px; + width: 250px; + border-radius: 50%; + top: 100%; + left: 100%; + transition: all 0.4s; +} + +.contributors:hover { + color: #fff; + cursor: pointer; +} + +.contributors:hover:before { + top: -32px; + left: -30px; +} + +.contributors:active:before { + background: #141414; + transition: background 0s; +} /* main */ @@ -108,20 +108,20 @@ main { justify-content: center; } - .description > h1 { - width: 70%; - font-size: 2.5rem; - font-weight: 800; - margin: 0; - display: inline; - } +.description > h1 { + width: 70%; + font-size: 2.5rem; + font-weight: 800; + margin: 0; + display: inline; +} - .description > p { - font-size: 2.5rem; - width: 70%; - margin: 1rem 0; - display: inline; - } +.description > p { + font-size: 2.5rem; + width: 70%; + margin: 1rem 0; + display: inline; +} /* api-test */ @@ -134,60 +134,60 @@ main { align-items: center; } - .api-test form { - width: 100%; - height: 3.5rem; - display: flex; - justify-content: center; - } - - .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; - font-size: 1rem; - font-weight: 600; - } - - .api-test form input::placeholder { - font-size: 1rem; - color: #afafaf; - font-weight: 600; - } - - .api-test form input:hover { - width: 70%; - } - - .api-test form input:focus { - outline: none; - } - - .api-test form button { - width: 10%; - background-color: #141414; - border: solid 2px #141414; - border-radius: 0 15px 15px 0; - font-size: 20px; - } - - .api-test form button i { - color: lightgray; - transition: 0.3s; - } - - .api-test form button:hover { - cursor: pointer; - } - - .api-test form button:hover > i { - color: #fff; - } +.api-test form { + width: 100%; + height: 3.5rem; + display: flex; + justify-content: center; +} + +.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; + font-size: 1rem; + font-weight: 600; +} + +.api-test form input::placeholder { + font-size: 1rem; + color: #afafaf; + font-weight: 600; +} + +.api-test form input:hover { + width: 70%; +} + +.api-test form input:focus { + outline: none; +} + +.api-test form button { + width: 10%; + background-color: #141414; + border: solid 2px #141414; + border-radius: 0 15px 15px 0; + font-size: 20px; +} + +.api-test form button i { + color: lightgray; + transition: 0.3s; +} + +.api-test form button:hover { + cursor: pointer; +} + +.api-test form button:hover > i { + color: #fff; +} /* result */ .result { @@ -204,4 +204,4 @@ main { align-items: center; justify-content: center; background-color: lightgray; -} \ No newline at end of file +} diff --git a/server.js b/server.js index 3cbd404..3e0de71 100644 --- a/server.js +++ b/server.js @@ -34,10 +34,10 @@ 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)); - + if (matches.length > 0) { res.json(matches); } else { @@ -46,7 +46,5 @@ app.get('/api/:keyword', (req, res) => { }); app.listen(PORT, () => { - console.log( - `The 👨‍🏭 server 🚗 is 🏃‍♀️ running 👡 on ⚓ port 🐹 ${PORT}, 🛒 better 💅 go 😝 catch 🙀 it! 🍟`, - ); + console.log(`The 👨‍🏭 server 🚗 is 🏃‍♀️ running 👡 on ⚓ port 🐹 ${PORT}, 🛒 better 💅 go 😝 catch 🙀 it! 🍟`); }); From 6fcb896abdb7e73e0074d150569f0eeeac693b13 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Jun 2022 15:32:35 -0500 Subject: [PATCH 02/13] fetch/api route on page load - added event listener for button click --- index.html | 98 ++++++++++++++++++++++------------------------- public/js/main.js | 13 ++++++- 2 files changed, 58 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index 1bb8dc6..153ff09 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,49 @@ - - - - - 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. -

-
-
-
- - -
-
-
-
-
-
-

Documentation

-
-
- - + + + + + 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. +

+
+
+
+ + +
+
+
+
+
+

Documentation

+
+
+ + diff --git a/public/js/main.js b/public/js/main.js index 3451e9b..a508f7c 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1 +1,12 @@ -console.log('Hello World'); +let resources; +fetchResources(); + +async function fetchResources() { + const response = await fetch(`/api/`); + const data = await response.json(); + resources = data; +} + +document.getElementById('keyword-btn').addEventListener('click', () => { + const keyword = document.querySelector('input').value; +}); From c2c8c6c31ce70bf4b24902386c21e6825e67345a Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sat, 11 Jun 2022 17:12:01 -0400 Subject: [PATCH 03/13] created js file for resources --- index.html | 21 ++++++++++++++++----- resources.js | 19 +++++++++++++++++++ server.js | 19 +------------------ 3 files changed, 36 insertions(+), 23 deletions(-) create mode 100644 resources.js diff --git a/index.html b/index.html index 153ff09..4b27836 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + Resources API @@ -26,18 +29,26 @@

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. + 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.

- +
-
+
+
diff --git a/resources.js b/resources.js new file mode 100644 index 0000000..45bf8a9 --- /dev/null +++ b/resources.js @@ -0,0 +1,19 @@ +const resources = [ + { + name: 'Oh Shit, Git!', + url: 'https://ohshitgit.com/', + keywords: ['git', 'version control', 'command line'], + }, + { + name: 'Javascript.info - Arrays', + url: 'https://javascript.info/array', + keywords: ['arrays'], + }, + { + name: 'Building a Simple CRUD App with Node, Express, and MongoDB', + url: 'https://zellwk.com/blog/crud-express-mongodb/', + keywords: ['mongodb', 'express', 'node', 'backend'], + }, +]; + +exports.resources = resources; \ No newline at end of file diff --git a/server.js b/server.js index 3e0de71..e55dcdf 100644 --- a/server.js +++ b/server.js @@ -1,29 +1,12 @@ const express = require('express'); const app = express(); const cors = require('cors'); +const { resources } = require("./resources"); const PORT = process.env.PORT || 8000; app.use(cors()); app.use(express.static(__dirname + '/public')); app.use('/public', express.static(__dirname + '/public')); -const resources = [ - { - name: 'Oh Shit, Git!', - url: 'https://ohshitgit.com/', - keywords: ['git', 'version control', 'command line'], - }, - { - name: 'Javascript.info - Arrays', - url: 'https://javascript.info/array', - keywords: ['arrays'], - }, - { - name: 'Building a Simple CRUD App with Node, Express, and MongoDB', - url: 'https://zellwk.com/blog/crud-express-mongodb/', - keywords: ['mongodb', 'express', 'node', 'backend'], - }, -]; - app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); From f306097cc1cb35cf46647e1f4a49db0ae7731cea Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Jun 2022 16:35:01 -0500 Subject: [PATCH 04/13] added new resource, and changed filtering in backend --- resources.js | 9 +++++++-- server.js | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/resources.js b/resources.js index 45bf8a9..93d3e68 100644 --- a/resources.js +++ b/resources.js @@ -7,12 +7,17 @@ const resources = [ { name: 'Javascript.info - Arrays', url: 'https://javascript.info/array', - keywords: ['arrays'], + keywords: ['arrays', 'javascript'], }, { name: 'Building a Simple CRUD App with Node, Express, and MongoDB', url: 'https://zellwk.com/blog/crud-express-mongodb/', - keywords: ['mongodb', 'express', 'node', 'backend'], + keywords: ['mongodb', 'express', 'node', 'backend', 'javascript'], + }, + { + name: 'Useful string methods', + url: 'https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods', + keywords: ['string methods', 'javascript'], }, ]; diff --git a/server.js b/server.js index e55dcdf..af5e5c9 100644 --- a/server.js +++ b/server.js @@ -19,7 +19,7 @@ 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); From dd77f79d9d668125d1541ec5764f54865d322148 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 14:44:39 -0700 Subject: [PATCH 05/13] added jsway and first timers only resources --- resources.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/resources.js b/resources.js index 93d3e68..d93a037 100644 --- a/resources.js +++ b/resources.js @@ -19,6 +19,16 @@ const resources = [ url: 'https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods', keywords: ['string methods', 'javascript'], }, + { + name: 'The JavaScript Way', + url: 'https://github.com/thejsway/thejsway', + keywords: ['javascript'], + }, + { + name: 'First Timers Only: Beginner Guide to Open Source', + url: 'https://www.firsttimersonly.com/', + keywords: ['open source'], + }, ]; exports.resources = resources; \ No newline at end of file From b1fd088dbb8d787708dae709d83864375339ee70 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 14:50:09 -0700 Subject: [PATCH 06/13] added complete guide to flexbox and shay howe html and css --- resources.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/resources.js b/resources.js index d93a037..7ea4853 100644 --- a/resources.js +++ b/resources.js @@ -29,6 +29,16 @@ const resources = [ url: 'https://www.firsttimersonly.com/', keywords: ['open source'], }, + { + name: 'A Complete Guide to Flexbox', + url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/', + keywords: ['css', 'flexbox'], + }, + { + name: 'Learn to Code HTML & CSS', + url: 'https://learn.shayhowe.com/html-css/', + keywords: ['css', 'html'], + }, ]; exports.resources = resources; \ No newline at end of file From 4c93168d2ea32c4f82a8f4b7f625ea3d4c87eda0 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Jun 2022 17:03:43 -0500 Subject: [PATCH 07/13] arrays explain like im five --- resources.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/resources.js b/resources.js index 7ea4853..c0ed2ad 100644 --- a/resources.js +++ b/resources.js @@ -39,6 +39,11 @@ const resources = [ url: 'https://learn.shayhowe.com/html-css/', keywords: ['css', 'html'], }, + { + name: 'JavaScript Arrays: Explain Like I\'m Five', + url: 'https://sumudusiriwardana.hashnode.dev/javascript-arrays-explain-like-im-five', + keywords: ['arrays', 'basics', 'fundamentals', 'javascript'], + }, ]; exports.resources = resources; \ No newline at end of file From 6a32816c62b6041c8bce49d51c29e034fa4b14e2 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 15:06:58 -0700 Subject: [PATCH 08/13] added css tricks and floats resource' --- resources.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/resources.js b/resources.js index 7ea4853..de186ba 100644 --- a/resources.js +++ b/resources.js @@ -39,6 +39,16 @@ const resources = [ url: 'https://learn.shayhowe.com/html-css/', keywords: ['css', 'html'], }, + { + name: 'CSS-Tricks', + url: 'https://css-tricks.com/', + keywords: ['css'], + }, + { + name: 'All About Floats', + url: 'https://css-tricks.com/all-about-floats/', + keywords: ['css', 'floats'] + }, ]; exports.resources = resources; \ No newline at end of file From 7d848e2bd709b9147c36c0e013575b01ddd02200 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 11 Jun 2022 17:12:32 -0500 Subject: [PATCH 09/13] objects vs arrays --- resources.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/resources.js b/resources.js index c0ed2ad..c0a25a2 100644 --- a/resources.js +++ b/resources.js @@ -44,6 +44,11 @@ const resources = [ url: 'https://sumudusiriwardana.hashnode.dev/javascript-arrays-explain-like-im-five', keywords: ['arrays', 'basics', 'fundamentals', 'javascript'], }, + { + name: 'Objects vs. Arrays', + url: 'https://medium.com/@zac_heisey/objects-vs-arrays-42601ff79421', + keywords: ['arrays', 'basics', 'fundamentals', 'javascript', 'objects'], + }, ]; exports.resources = resources; \ No newline at end of file From 8b243ed7d8505065b32ddfe8cb7edc82c15e9ca7 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 15:21:49 -0700 Subject: [PATCH 10/13] added flexbox zombies --- resources.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/resources.js b/resources.js index 2642456..95eded1 100644 --- a/resources.js +++ b/resources.js @@ -59,6 +59,11 @@ const resources = [ url: 'https://medium.com/@zac_heisey/objects-vs-arrays-42601ff79421', keywords: ['arrays', 'basics', 'fundamentals', 'javascript', 'objects'], }, + { + name: 'Flexbex Zombies', + url: 'https://mastery.games/flexboxzombies/', + keywords: ['css', 'flexbox'], + }, ]; exports.resources = resources; \ No newline at end of file From 4e09410cd3fdfc9f80a803d9ad8af9b27978b451 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 15:27:42 -0700 Subject: [PATCH 11/13] added media queries resource --- resources.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/resources.js b/resources.js index 95eded1..a9adcc0 100644 --- a/resources.js +++ b/resources.js @@ -64,6 +64,11 @@ const resources = [ url: 'https://mastery.games/flexboxzombies/', keywords: ['css', 'flexbox'], }, + { + name: 'A Complete Guide to CSS Media Queries', + url: 'https://css-tricks.com/a-complete-guide-to-css-media-queries/', + keywords: ['css', 'media queries', 'responsive web design', 'responsive'] + }, ]; exports.resources = resources; \ No newline at end of file From 507ccd59d35309516480ef39002b17097c5828f5 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 15:42:16 -0700 Subject: [PATCH 12/13] added css grid resource --- resources.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/resources.js b/resources.js index a9adcc0..3645a0f 100644 --- a/resources.js +++ b/resources.js @@ -69,6 +69,11 @@ const resources = [ url: 'https://css-tricks.com/a-complete-guide-to-css-media-queries/', keywords: ['css', 'media queries', 'responsive web design', 'responsive'] }, + { + name: 'A Complete Guide to Grid', + url: 'https://css-tricks.com/snippets/css/complete-guide-grid/', + keywords: ['css', 'css grid', 'grid'] + } ]; exports.resources = resources; \ No newline at end of file From 6cb977313df3b8aba3c463a8c1b0350514179ae8 Mon Sep 17 00:00:00 2001 From: alondramora Date: Sat, 11 Jun 2022 15:52:17 -0700 Subject: [PATCH 13/13] added objects resource --- resources.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/resources.js b/resources.js index 3645a0f..507a1c1 100644 --- a/resources.js +++ b/resources.js @@ -73,7 +73,12 @@ const resources = [ name: 'A Complete Guide to Grid', url: 'https://css-tricks.com/snippets/css/complete-guide-grid/', keywords: ['css', 'css grid', 'grid'] - } + }, + { + name: 'Objects', + url: 'https://javascript.info/object', + keywords: ['javascript', 'objects'] + }, ]; exports.resources = resources; \ No newline at end of file