diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..053c536
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,15 @@
+
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion to better our API, please fork the repo and create a pull request. Additionally, you can open an issue and offer advice.
+Don't forget to give the project a star! Thanks again!
+
+1. Visit our Issues page to check if an issue exists and does not have an assignee.
+2. Fork the Project
+3. Change to your Feature Branch (`git checkout -b feature/AmazingFeature`)
+4. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+5. Push to the Branch (`git push origin feature/AmazingFeature`)
+6. Open a Pull Request
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..fb48127
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 the-api-administration
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index e69de29..c6da429 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,154 @@
+# Coding-Resources-API
+
+
+
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+
+
+
+ Table of Contents
+
+
+ About The Project
+
+
+ Getting Started Usage Roadmap Contributing License Acknowledgments
+
+
+
+
+## About The Project
+
+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.
+
+(back to top )
+
+### Built With
+
+- EJS
+- CSS
+- JavaScript
+- Node.js
+- Express
+
+(back to top )
+
+
+
+## Getting Started
+
+Simply visit: https://coding-resources-api.herokuapp.com/ and read our documentation to learn how to interact with our API! If you would like to help us out, feel free to create issues through our github repo.
+
+(back to top )
+
+
+
+## Usage
+
+Access our API endpoints to recieve coding resource data in JSON format.
+
+(back to top )
+
+
+
+## Roadmap
+
+- [X] Add search functionality
+- [ ] Offer more resources
+- [ ] Support mobile devices
+- [ ] Create more endpoints
+
+See the [open issues](https://github.com/the-api-administration/coding-resources-api/issues) for a full list of proposed features (and known issues).
+
+(back to top )
+
+
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion to better our API, please fork the repo and create a pull request. Additionally, you can open an issue and offer advice.
+Don't forget to give the project a star! Thanks again!
+
+1. Visit our Issues page to check if an issue exists and does not have an assignee.
+2. Fork the Project
+3. Change to your Feature Branch (`git checkout -b feature/AmazingFeature`)
+4. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+5. Push to the Branch (`git push origin feature/AmazingFeature`)
+6. Open a Pull Request
+
+(back to top )
+
+
+
+## License
+
+Distributed under the MIT License. See `LICENSE.md` for more information.
+
+(back to top )
+
+
+
+## Acknowledgments
+
+- [@AlexisInTech](https://twitter.com/alexisintech)
+- [@AlysshaLewin](https://twitter.com/AlysshaLewin)
+- [@Asper_Jacob](https://twitter.com/asper_jacob)
+- [@BrianSchneeDev](https://twitter.com/BrianSchneeDev)
+- [@BytesByBianca](https://twitter.com/bytesbybianca)
+- [@DanaMiteCoder](https://twitter.com/danamitecoder)
+- [@Dev_Ethos](https://twitter.com/dev_ethos/)
+- [@ErikaTeal_](https://twitter.com/erikateal_)
+- [@JacobEGood](https://twitter.com/jacobegood)
+- [@MoraCodes](https://twitter.com/moracodes)
+
+(back to top )
+
+
+
+[contributors-shield]: https://img.shields.io/github/contributors/the-api-administration/coding-resources-api.svg?style=for-the-badge
+[contributors-url]: https://github.com/the-api-administration/coding-resources-api/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/the-api-administration/coding-resources-api.svg?style=for-the-badge
+[forks-url]: https://github.com/the-api-administration/coding-resources-api/network/members
+[stars-shield]: https://img.shields.io/github/stars/the-api-administration/coding-resources-api.svg?style=for-the-badge
+[stars-url]: https://github.com/the-api-administration/coding-resources-api/stargazers
+[issues-shield]: https://img.shields.io/github/issues/the-api-administration/coding-resources-api.svg?style=for-the-badge
+[issues-url]: https://github.com/the-api-administration/coding-resources-api/issues
+[license-shield]: https://img.shields.io/github/license/the-api-administration/coding-resources-api.svg?style=for-the-badge
+[license-url]: https://github.com/the-api-administration/coding-resources-api/blob/master/LICENSE.md
diff --git a/index.html b/index.html
deleted file mode 100644
index 4b27836..0000000
--- a/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
-
-
-
- Resources API
-
-
-
- Contributors
-
-
-
- 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.
-
-
-
-
-
-
diff --git a/public/css/style.css b/public/css/style.css
index 0798297..1b1e0a0 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,10 +1,42 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;800&display=swap');
+/*
+================= Base Styles =================
+*/
+
+ul {
+ 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;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+/*
+================= Additional Styles =================
+*/
+
/* html */
html {
font-family: 'Montserrat', sans-serif;
- color: #141414;
+ color: rgb(30, 30, 30);
}
html * {
@@ -16,7 +48,7 @@ html * {
.frame {
padding: 0;
margin: 0;
- border: solid 8px #141414;
+ border: solid 8px rgb(30, 30, 30);
margin: 2rem;
border-radius: 4rem;
overflow: hidden;
@@ -49,8 +81,9 @@ nav > img {
/* contributors */
-.contributors {
- --color: #141414;
+#contributors {
+ --color: rgb(30, 30, 30);
+ background-color: #fff;
position: relative;
overflow: hidden;
border: 3px solid var(--color);
@@ -63,7 +96,7 @@ nav > img {
color: var(--color);
}
-.contributors:before {
+#contributors:before {
content: '';
position: absolute;
z-index: -1;
@@ -76,18 +109,18 @@ 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 {
- background: #141414;
+#contributors:active:before {
+ background: rgb(30, 30, 30);
transition: background 0s;
}
@@ -95,7 +128,8 @@ nav > img {
main {
display: flex;
- padding: 2rem;
+ padding: 1.5rem;
+ margin-bottom: 2rem;
}
/* description */
@@ -109,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 */
@@ -128,10 +161,9 @@ main {
.api-test {
width: 50%;
display: flex;
- flex-wrap: wrap;
flex-direction: column;
- justify-content: space-between;
align-items: center;
+ justify-content: space-around;
}
.api-test form {
@@ -143,13 +175,12 @@ main {
.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;
+ border: solid 3px rgb(30, 30, 30);
font-size: 1rem;
font-weight: 600;
}
@@ -170,8 +201,8 @@ main {
.api-test form button {
width: 10%;
- background-color: #141414;
- border: solid 2px #141414;
+ background-color: rgb(30, 30, 30);
+ border: solid 2px rgb(30, 30, 30);
border-radius: 0 15px 15px 0;
font-size: 20px;
}
@@ -191,17 +222,396 @@ main {
/* result */
.result {
- width: 90%;
- height: 70%;
+ width: 80%;
+ overflow: hidden;
+ border-radius: 25px;
+}
+
+@media all and (min-width: 1280px) {
+ .result {
+ margin-top: 2rem;
+ }
+}
+
+.scroll-container {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ width: 100%;
+ height: 300px;
border: dashed lightgray 2px;
border-radius: 25px;
}
+.scroll-container::-webkit-scrollbar {
+ width: 12px;
+ background-color: #F5F5F5;
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: rgb(177, 177, 177);
+}
+
+.scroll-container::-webkit-scrollbar-track {
+ border-radius: 10px;
+ background-color: #dbdbdb;
+}
+
+.json {
+ display: block;
+ white-space: pre-wrap;
+}
+
+.indent {
+ 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 a508f7c..3cf2323 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,12 +1,53 @@
-let resources;
-fetchResources();
+const scrollBtn = document.getElementById('contributors')
+const targetScroll = document.getElementById('contributors-title')
+const elemRect = targetScroll.getBoundingClientRect()
+scrollBtn.addEventListener("click", function () {
+ window.scrollTo({
+ top: elemRect.top,
+ left: 0,
+ });
+});
+
+const btn = document.getElementById('keyword-btn');
+btn.addEventListener('click', getMatches);
-async function fetchResources() {
- const response = await fetch(`/api/`);
- const data = await response.json();
- resources = data;
+/**
+ * Name: getMatches
+ * Description: Find resources with keywords matching the user input
+ */
+async function getMatches() {
+ //gets the input from the text box and trims white space and makes it lower case
+ const keyword = document.querySelector('input').value.toLowerCase().trim();
+
+ try {
+ const res = await fetch('/api');
+ const data = await res.json();
+ // Filters array from the API for resources with keywords containing user value
+ const matches = data.filter(resource => resource.keywords.some(str => str.includes(keyword)));
+ renderMatches(matches);
+ } catch (err) {
+ console.error(err);
+ }
}
-document.getElementById('keyword-btn').addEventListener('click', () => {
- const keyword = document.querySelector('input').value;
-});
+/**
+ * Name: renderMatches
+ * Description: takes an array of matches, each match represents resources that had contained a resource's keyword and renders each match to the DOM.
+ * @param {*} matches - accepts an array of objects had contained a resource's keyword.
+ */
+function renderMatches(matches) {
+ const list = document.getElementById('result-list');
+ list.innerHTML = '';
+
+ // For every match found, render the objects to the DOM in JSON format
+ matches.forEach(match => {
+ const li = document.createElement('li');
+
+ // 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(", ")}]
Resources API
+
+
+
+
+ Contributors
+
+
+
+ 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
+
+ There are 3 properties/keys that come with each resource object:
+
+
+
+ PROPERTY
+ DESCRIPTION
+
+
+
+
+ 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} `;
+
+
+
+
Contributors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Thank You!
+
+
+ - THE API ADMINISTRATION.GitHub .
+
+ We would love to see what you are making with this API. Please tweet at us!
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+