diff --git a/package.json b/package.json index 49b0f64..b4c9e0a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js" }, "author": "", "license": "ISC", diff --git a/public/assets/Alex.png b/public/assets/Alex.png new file mode 100644 index 0000000..f3b01f3 Binary files /dev/null and b/public/assets/Alex.png differ diff --git a/public/assets/Alondra.png b/public/assets/Alondra.png new file mode 100644 index 0000000..7a3c70d Binary files /dev/null and b/public/assets/Alondra.png differ diff --git a/public/assets/Alyssha.jpg b/public/assets/Alyssha.jpg new file mode 100644 index 0000000..8fe1cb6 Binary files /dev/null and b/public/assets/Alyssha.jpg differ diff --git a/public/assets/Bianca.jpg b/public/assets/Bianca.jpg new file mode 100644 index 0000000..6ef2fa6 Binary files /dev/null and b/public/assets/Bianca.jpg differ diff --git a/public/assets/Brian.png b/public/assets/Brian.png new file mode 100644 index 0000000..6406870 Binary files /dev/null and b/public/assets/Brian.png differ diff --git a/public/assets/Dana.jpg b/public/assets/Dana.jpg new file mode 100644 index 0000000..8ecbf19 Binary files /dev/null and b/public/assets/Dana.jpg differ diff --git a/public/assets/Erika.jpg b/public/assets/Erika.jpg new file mode 100644 index 0000000..e21da1c Binary files /dev/null and b/public/assets/Erika.jpg differ diff --git a/public/assets/Jacob.jpg b/public/assets/Jacob.jpg new file mode 100644 index 0000000..8872e78 Binary files /dev/null and b/public/assets/Jacob.jpg differ diff --git a/public/assets/JacobGood.jpg b/public/assets/JacobGood.jpg new file mode 100644 index 0000000..c77622b Binary files /dev/null and b/public/assets/JacobGood.jpg differ diff --git a/public/assets/Sebastian.png b/public/assets/Sebastian.png new file mode 100644 index 0000000..b9e1f45 Binary files /dev/null and b/public/assets/Sebastian.png differ diff --git a/public/css/style.css b/public/css/style.css index 4c95a9f..1b1e0a0 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -5,13 +5,27 @@ */ ul { - margin: 0; - padding: 0 1rem; + margin: 1.5rem 2.5rem; list-style: none; + padding: 0; +} + +pre { + margin: 0; +} + +a { + font-weight: 700; + text-decoration: none; + color: #4c8bf5; +} + +a:hover { + color: #3670d5; } -.middle-br { - margin: .5rem 0; +html { + scroll-behavior: smooth; } /* @@ -67,7 +81,7 @@ nav > img { /* contributors */ -.contributors { +#contributors { --color: rgb(30, 30, 30); background-color: #fff; position: relative; @@ -82,7 +96,7 @@ nav > img { color: var(--color); } -.contributors:before { +#contributors:before { content: ''; position: absolute; z-index: -1; @@ -95,17 +109,17 @@ nav > img { transition: all 0.4s; } -.contributors:hover { +#contributors:hover { color: #fff; cursor: pointer; } -.contributors:hover:before { +#contributors:hover:before { top: -32px; left: -30px; } -.contributors:active:before { +#contributors:active:before { background: rgb(30, 30, 30); transition: background 0s; } @@ -114,7 +128,8 @@ nav > img { main { display: flex; - padding: 2rem; + padding: 1.5rem; + margin-bottom: 2rem; } /* description */ @@ -128,18 +143,17 @@ main { } .description > h1 { - width: 70%; + width: 80%; font-size: 2.5rem; font-weight: 800; margin: 0; - display: inline; } .description > p { - font-size: 2.5rem; - width: 70%; - margin: 1rem 0; - display: inline; + font-size: 2rem; + width: 80%; + margin-top: 2rem; + margin-bottom: 0; } /* api-test */ @@ -147,10 +161,9 @@ main { .api-test { width: 50%; display: flex; - flex-wrap: wrap; flex-direction: column; - justify-content: space-around; align-items: center; + justify-content: space-around; } .api-test form { @@ -209,9 +222,15 @@ main { /* result */ .result { + width: 80%; overflow: hidden; border-radius: 25px; - width: 90%; +} + +@media all and (min-width: 1280px) { + .result { + margin-top: 2rem; + } } .scroll-container { @@ -244,14 +263,355 @@ main { } .indent { - padding-left: 1rem; + padding-left: 2rem; + margin-top: -2rem; + line-height: 2; } /* documentation */ .documentation { + padding: 3rem; + padding-bottom: 2rem; + background-color: lightgray; +} + +h4 { + font-size: 0.8rem; + margin: -1rem; + margin-bottom: 1rem; + font-weight: 500; + padding-left: 2rem; +} + +h2 { + margin: 0; + font-size: 1.8rem; + text-align: center; +} + +.object-table { + margin: 3rem 0; display: flex; + flex-direction: column; + align-items: center; +} + +.object-table h3 { + font-size: 1.5rem; + font-weight: 500; + margin: 0; + margin-bottom: 3rem; +} + + + +/* table */ + +table.darkTable { + background-color: #FFFFFF; + width: 80%; + height: 200px; + text-align: center; + border-collapse: collapse; + border-radius: 15px; +} + +table.darkTable td, table.darkTable th { + padding: 2px 2px; + padding-top: 7px; +} + +table.darkTable tbody td { + font-size: 16px; + color: #1E1E1E; +} + +table.darkTable tr:nth-child(even) { + background: #e7e7e7; +} + +table.darkTable thead { + background: #1E1E1E; + border-bottom: 3px solid #1E1E1E; + +} + +table.darkTable thead th { + font-size: 17px; + font-weight: bold; + color: #E6E6E6; + text-align: center; +} + +table.darkTable thead th:first-child { + border-left: none; +} + +table.darkTable tfoot td { + font-size: 12px; +} + +table.darkTable #property { + border-radius: 15px 0 0 0; + border-right: 2px solid rgba(211, 211, 211, 0.3); +} + +table.darkTable #description{ + border-radius: 0 15px 0 0; +} + +table.darkTable #array{ + border-radius: 0 0 15px 0; +} + +table.darkTable #keywords{ + border-radius: 0 0 0 15px; +} + +#name, #url, #keywords { + border-right: 2px solid lightgray; +} + +/* Endpoints */ + +.endpoints { + margin: 3rem 0; + gap: 5rem; + display: flex; + justify-content: space-around; +} + +.endpoints h3 { + font-size: 1rem; + font-weight: 500; + margin: 0; +} + +.url, .js-fetch { + display: flex; + flex-direction: column; + gap: 2rem; + width: 50%; +} + +.js-fetch h3 { + text-align: center; +} + +.url code, .js-fetch code { + font-size: 1.2rem; + background: #fff; + padding: 0.8rem 1.2rem; + border-radius: 15px; +} + +.js-fetch code { + color: white; + font-size: 1.2rem; + background: #979797; + padding: 0.8rem 1.2rem; + border-radius: 15px; +} + +.endpoints span { + color: #F7BF50; + font-weight: 700; +} + +/* Contributor cards */ + +#contributors-title { + padding-top: 3rem; +} + +.contributors { + margin: 3rem 15rem; + display: flex; + flex-direction: row; + justify-content: center; +} + +@media all and (max-width: 1790px) { + .contributors { + margin: 3rem 11rem; + } +} + +@media all and (max-width: 1441px) { + .contributors { + margin: 3rem 3rem; + } +} + +.contributors .section { + padding: 0 2rem; + width: 435px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.card * { + margin: 0; + padding: 0; +} + +.card { + width: 100%; + height: 150px; + margin: 1.5rem; + border-radius: 12px; + box-shadow: 0.5px 0.5px 12px 0px #80808042; + display: flex; + align-items: center; + gap: 25px; + position: relative; + z-index: 2; + padding: 0 1.3rem; +} + +.card::after { + position: absolute; + content: ''; + width: 20%; + height: 100%; + background-color: lightgray; + z-index: -2; + border-radius: 12px 0 0 12px; + top: 0; + left: 0; +} + +.card img { + height: 109px; + width: 109px; + border-radius: 50%; + border: solid 3px lightgray; + object-fit: cover; +} + +.cont-info { + display: flex; + flex-direction: column; align-items: center; justify-content: center; + gap: 10px; +} +.cont-info h4 { + color: #7a7a7a; + font-size: 1.7rem; + font-weight: 700; +} + +.icons { + display: flex; + gap: 1.5rem; + font-size: 1.8rem; +} + +#jacob::after { + background-color: #F37121; +} + +#jacob i { + color: #F37121; +} + +#erika::after { + background-color: #A6B4A2; +} + +#erika i { + color: #A6B4A2; +} + +#alexisintech::after { + background-color: #961711; +} + +#alexisintech i{ + color: #961711; +} + +#brian::after { + background-color: #0075bd; +} + +#brian i{ + color: #0075bd; +} + +#sebastian::after { + background-color: #0CA4BD; +} + +#sebastian i{ + color: #0CA4BD; +} + +#bianca::after { + background-color: #AE5ADB; +} + +#bianca i{ + color: #AE5ADB; +} + +#jacobg::after { + background-color: rgb(0, 85, 255); +} + +#jacobg i{ + color: rgb(0, 85, 255); +} + +#alondra::after { + background-color: #C2A08F; +} + +#alondra i{ + color: #C2A08F; +} + +#alyssha::after { + background-color: #ADB0E0; +} + +#alyssha i{ + color: #ADB0E0; +} + +#dana::after { + background-color: #2de6e2; +} + +#dana i{ + color: #2de6e2; +} + +/* Footer */ + +footer { background-color: lightgray; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding-top: 2rem; } + +footer h2 { + font-weight: 500; +} + +footer i { + font-size: 2rem; +} + +hr { + border: #979797 solid 1px; + width: 80% ; +} + + diff --git a/public/js/main.js b/public/js/main.js index c60856a..fe434d7 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -35,8 +35,7 @@ function renderMatches(matches) { // Create an element that looks like a JSON object for every match li.innerHTML = ` - 
{

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

}
-
+ 
{

name: '${match.name}',
url: '${match.url}',
keywords: [${match.keywords.map(keyword => `'${keyword}'`).join(", ")}]
},
`; list.appendChild(li); diff --git a/server.js b/server.js index 707c260..765e7e5 100644 --- a/server.js +++ b/server.js @@ -32,7 +32,7 @@ app.get('/api/:keyword', (req, res) => { const matches = resources.filter((obj) => obj.keywords.some(str => str.includes(keyword))); try { - // if matches were found respond with json else throw error + // if matches were found respond with json if (matches.length) { res.json(matches); } else { diff --git a/views/index.ejs b/views/index.ejs index 1f3a50e..5948006 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -27,11 +27,11 @@
-

Coding Resources API-

+

Coding Resources API

Search for coding resources by relevant keywords. This API serves educational content for a wide @@ -45,7 +45,7 @@ type="text" name="" value="" - placeholder="/api/'keyword'" + placeholder="keyword" />

-

Documentation

+

Documentation

+
+

There are 3 properties/keys that come with each resource object:

+ + + + + + + + + + + + + + + + +
PROPERTYDESCRIPTION
name[String] Name or title of the document, article or website.
url[String] Link to website.
keywords[Array] Relevant keywords related to the resource's topic.
+
+

Endpoints

+
+
+

Direct link to the complete resources object or a filtered object after using a keyword:

+ https://coding-resources-api.herokuapp.com/api +

*The "/api" endpoint will return every resource object in an array.

+ https://coding-resources-api.herokuapp.com/api/<keyword> +

*The "/api/keyword" endpoint accepts a keyword that will be used to search through an array of resources by the content the resource provides.

+
+
+

Example code-block of how to fetch with JavaScript:

+ const URL = `https://coding-resources-api.herokuapp.com/api/${keyword}`;

+ fetch(URL)
+    .then(res => res.json())
+    .then(data => console.log(data))
+    .catch(err => console.error(err)); +
+
+
+

Contributors

+
+
+
+ Jacob's photo +
+

Jacob Asper

+
+ + + +
+
+
+
+ Erika's photo +
+

Erika Teal

+
+ + + +
+
+
+
+ Alexis' photo +
+

Alexisintech

+
+ + + +
+
+
+
+
+
+ Brian's photo +
+

Brian Schnee

+
+ + + +
+
+
+
+ Alondra's photo +
+

Alondra Mora

+
+ + + +
+
+
+
+ Biancas's photo +
+

Bianca T.

+
+ + + +
+
+
+
+ Jacob Good's photo +
+

Jacob Good

+
+ + + +
+
+
+
+
+
+ Sebastian's photo +
+

Sebastian O.

+
+ + + +
+
+
+
+ Alyssha's photo +
+

Alyssha L.

+
+ + + +
+
+
+
+ Dana's photo +
+

Dana Lee

+
+ + + +
+
+
+
+