diff --git a/index.html b/index.html index 302ee3b..2021b38 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,41 @@ + -

Resources API

-

use endpoint: https://coding-resources-api.herokuapp.com/api or https://coding-resources-api.herokuapp.com/api/'keyword'

+
+ +
+
+

+ 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/assets/logo.svg b/public/assets/logo.svg new file mode 100644 index 0000000..0aac8d9 --- /dev/null +++ b/public/assets/logo.svg @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/css/style.css b/public/css/style.css index 818d406..64d8d6c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,3 +1,185 @@ -h1 { - color: red; +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;800&display=swap'); +html * { + box-sizing: border-box; +} + +html { + font-family: 'Montserrat', sans-serif; + color: #141414; +} + +div.frame { + padding: 0; + margin: 0; + border: solid 8px #141414; + margin: 2rem; + border-radius: 4rem; + overflow: hidden; +} + +nav { + height: 10rem; + background-color: transparent; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 3rem; + background-color: lightgrey; +} + +nav::after { + height: 10rem; + background-color: transparent; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 5rem; +} + +nav > img { + height: 100px; +} + +button.contributors { + --color: #141414; + position: relative; + overflow: hidden; + border: 3px solid var(--color); + transition: color 0.5s; + z-index: 1; + font-size: 1.5rem; + padding: 1rem; + border-radius: 15px; + font-weight: 600; + color: var(--color); +} + +button.contributors:before { + content: ''; + position: absolute; + z-index: -1; + background: var(--color); + height: 200px; + width: 250px; + border-radius: 50%; +} + +button.contributors:hover { + color: #fff; + cursor: pointer; +} + +button.contributors:before { + top: 100%; + left: 100%; + transition: all 0.4s; +} + +button.contributors:hover:before { + top: -32px; + left: -30px; +} + +button.contributors:active:before { + background: #141414; + transition: background 0s; +} + +main { + display: flex; + padding: 2rem; +} + +main > section.description { + width: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +section.description > h1 { + width: 70%; + font-size: 2.5rem; + font-weight: 400; + margin: 0; +} + +section.description > h1 > span { + font-weight: 800; +} + +section.api-test { + width: 50%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +section.api-test form { + width: 100%; + height: 3.5rem; + display: flex; + justify-content: center; +} + +section.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; +} + +section.api-test form input::placeholder { + font-size: 1rem; + color: #afafaf; + font-weight: 600; +} + +section.api-test form input:hover { + width: 70%; +} + +section.api-test form input:focus { + outline: none; +} + +section.api-test form button { + width: 10%; + background-color: #141414; + border: solid 2px #141414; + border-radius: 0 15px 15px 0; + font-size: 20px; +} +section.api-test form button i { + color: lightgray; + transition: 0.3s; +} +section.api-test form button:hover { + cursor: pointer; +} + +section.api-test form button:hover > i { + color: #fff; +} + +div.result { + width: 90%; + height: 70%; + border: dashed lightgray 2px; + border-radius: 25px; +} + +section.documentation { + display: flex; + align-items: center; + justify-content: center; + background-color: lightgray; } diff --git a/server.js b/server.js index f1005db..3cbd404 100644 --- a/server.js +++ b/server.js @@ -4,6 +4,7 @@ const cors = require('cors'); const PORT = process.env.PORT || 8000; app.use(cors()); app.use(express.static(__dirname + '/public')); +app.use('/public', express.static(__dirname + '/public')); const resources = [ { @@ -33,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 {