diff --git a/index.html b/index.html index 1bb8dc6..4b27836 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,60 @@ - - - - - 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/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/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; +}); diff --git a/resources.js b/resources.js new file mode 100644 index 0000000..507a1c1 --- /dev/null +++ b/resources.js @@ -0,0 +1,84 @@ +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', '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', 'javascript'], + }, + { + name: 'Useful string methods', + 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'], + }, + { + 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'], + }, + { + 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'] + }, + { + name: 'JavaScript Arrays: Explain Like I\'m Five', + 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'], + }, + { + name: 'Flexbex Zombies', + 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'] + }, + { + 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 diff --git a/server.js b/server.js index 3cbd404..af5e5c9 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'); }); @@ -34,10 +17,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)); - + const matches = resources.filter((obj) => obj.keywords.some(str => str.includes(keyword))); + if (matches.length > 0) { res.json(matches); } else { @@ -46,7 +29,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! 🍟`); });