Skip to content

added search bar to test api and a result space to display the fetched information #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
20jasper merged 4 commits into from
Jun 10, 2022
Merged

added search bar to test api and a result space to display the fetched information #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e6d64c3
added first section of the front end
Ethodeus Jun 7, 2022
24cb0d9
created a nav with AA logo and a contributions button
Ethodeus Jun 9, 2022
5fae5cb
added search bar to test api and a result space to display the fetche…
Ethodeus Jun 9, 2022
75cdfc2
Merge branch 'main' into feature
Ethodeus Jun 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 33 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,41 @@
<!-- STYLESHEETS -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<h1>Resources API</h1>
<p>use endpoint: https://coding-resources-api.herokuapp.com/api or https://coding-resources-api.herokuapp.com/api/'keyword'</p>
<div class="frame">
<nav>
<img src="public/assets/logo.svg" alt="logo" />
<button class="contributors">Contributors</button>
</nav>
<main>
<section class="description">
<h1>
<span>Coding Resources API -</span> 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.
</h1>
</section>
<section class="api-test">
<form action="">
<input type="text" name="" value="" placeholder="https://coding-resources-api.herokuapp.com/api/'keyword'" />
<button type="button"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
<div class="result">
<!-- JSON RESULT -->
</div>
</section>
</main>
<section class="documentation">
<h1>Documentation</h1>
</section>
</div>
</body>
<script src="js/main.js"></script>
</html>
123 changes: 123 additions & 0 deletions public/assets/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
186 changes: 184 additions & 2 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 3 additions & 2 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -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 {
Expand Down