From e6d64c3f77351485057416dc874b45303caa223b Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 6 Jun 2022 21:49:46 -0500 Subject: [PATCH 1/3] added first section of the front end --- index.html | 21 ++++-- public/assets/logo.svg | 149 +++++++++++++++++++++++++++++++++++++++++ public/css/style.css | 47 ++++++++++++- server.js | 17 ++--- 4 files changed, 220 insertions(+), 14 deletions(-) create mode 100644 public/assets/logo.svg diff --git a/index.html b/index.html index 302ee3b..e5f5237 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,22 @@ - -

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..e944380 --- /dev/null +++ b/public/assets/logo.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/css/style.css b/public/css/style.css index 818d406..dced6bd 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,3 +1,46 @@ -h1 { - color: red; +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;800&display=swap'); +html { + font-family: 'Montserrat', sans-serif; +} + +div { + padding: 0; + margin: 0; + border: solid 8px #141414; + margin: 2rem; + border-radius: 4rem; + overflow: hidden; +} + +main { + display: flex; +} + +main > section { + width: 50%; + height: 600px; + display: flex; + align-items: center; + justify-content: center; +} + +section > img { + width: 70%; +} + +section.description > h1 { + width: 70%; + font-size: 2.5rem; + font-weight: 400; +} + +section.description > h1 > span { + font-weight: 800; +} + +section.documentation { + display: flex; + align-items: center; + justify-content: center; + background-color: lightgray; } diff --git a/server.js b/server.js index fb42d64..b055602 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 = [ { @@ -27,16 +28,16 @@ app.get('/api', (req, res) => { }); app.get('/api/:tag', (req, res) => { - const tag = req.params.tag.toLowerCase(); + const tag = req.params.tag.toLowerCase(); - // filter resources array, return items that match query; tag. - const filteredArr = resources.filter((obj) => obj.tags.includes(tag)); + // filter resources array, return items that match query; tag. + const filteredArr = resources.filter((obj) => obj.tags.includes(tag)); - if (filteredArr.length > 0) { - res.json(filteredArr); - } else { - throw new Error('Resource not found.'); - } + if (filteredArr.length > 0) { + res.json(filteredArr); + } else { + throw new Error('Resource not found.'); + } }); app.listen(PORT, () => { From 24cb0d910b50741aec6446fa5133bd4f8b19672a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 8 Jun 2022 21:33:02 -0500 Subject: [PATCH 2/3] created a nav with AA logo and a contributions button --- index.html | 33 +++--- public/assets/logo.svg | 252 ++++++++++++++++++----------------------- public/css/style.css | 73 +++++++++++- 3 files changed, 200 insertions(+), 158 deletions(-) diff --git a/index.html b/index.html index e5f5237..7563353 100644 --- a/index.html +++ b/index.html @@ -9,22 +9,25 @@ -
-
- -
-

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

-
-
+ + +
+
+

+ 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

-
-
+
+

Documentation

+
+ + diff --git a/public/assets/logo.svg b/public/assets/logo.svg index e944380..0aac8d9 100644 --- a/public/assets/logo.svg +++ b/public/assets/logo.svg @@ -1,149 +1,123 @@ + viewBox="0 0 548.2 357.3" style="enable-background:new 0 0 548.2 357.3;" xml:space="preserve"> - + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/public/css/style.css b/public/css/style.css index dced6bd..a115dd1 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,6 +1,75 @@ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;800&display=swap'); html { font-family: 'Montserrat', sans-serif; + color: #141414; +} + +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; +} + +button { + --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:before { + content: ''; + position: absolute; + z-index: -1; + background: var(--color); + height: 200px; + width: 250px; + border-radius: 50%; +} + +button:hover { + color: #fff; + cursor: pointer; +} + +button:before { + top: 100%; + left: 100%; + transition: all 0.4s; +} + +button:hover:before { + top: -32px; + left: -30px; +} + +button:active:before { + background: #141414; + transition: background 0s; +} + +nav > img { + height: 100px; } div { @@ -24,10 +93,6 @@ main > section { justify-content: center; } -section > img { - width: 70%; -} - section.description > h1 { width: 70%; font-size: 2.5rem; From 5fae5cb95e54de9d8a3fb186db88b0420231968a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 8 Jun 2022 23:18:41 -0500 Subject: [PATCH 3/3] added search bar to test api and a result space to display the fetched data --- index.html | 21 ++++++-- public/css/style.css | 116 +++++++++++++++++++++++++++++++++++-------- 2 files changed, 113 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 7563353..2021b38 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,19 @@ + -
+
@@ -22,8 +29,16 @@

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 a115dd1..64d8d6c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,9 +1,22 @@ @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; @@ -23,7 +36,11 @@ nav::after { padding: 0 5rem; } -button { +nav > img { + height: 100px; +} + +button.contributors { --color: #141414; position: relative; overflow: hidden; @@ -37,7 +54,7 @@ button { color: var(--color); } -button:before { +button.contributors:before { content: ''; position: absolute; z-index: -1; @@ -47,47 +64,34 @@ button:before { border-radius: 50%; } -button:hover { +button.contributors:hover { color: #fff; cursor: pointer; } -button:before { +button.contributors:before { top: 100%; left: 100%; transition: all 0.4s; } -button:hover:before { +button.contributors:hover:before { top: -32px; left: -30px; } -button:active:before { +button.contributors:active:before { background: #141414; transition: background 0s; } -nav > img { - height: 100px; -} - -div { - padding: 0; - margin: 0; - border: solid 8px #141414; - margin: 2rem; - border-radius: 4rem; - overflow: hidden; -} - main { display: flex; + padding: 2rem; } -main > section { +main > section.description { width: 50%; - height: 600px; display: flex; align-items: center; justify-content: center; @@ -97,12 +101,82 @@ 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;