the-api-administration · Ethodeus · Jun 12, 2022 · Jun 11, 2022 · Jun 11, 2022 · Jun 11, 2022
diff --git a/index.html b/index.html
@@ -1,55 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Resources API</title>
-        <!-- 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>
-        <div class="frame">
-            <nav>
-                <img src="public/assets/logo.svg" alt="logo">
-                <button class="contributors">Contributors</button>
-            </nav>
-            <main>
-                <section class="description">
-                    <h1>Coding Resources API-</h1>
-                    <p>
-                        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.
-                    </p>
-                </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>
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0"
+		/>
+		<title>Resources API</title>
+		<!-- 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>
+		<div class="frame">
+			<nav>
+				<img src="public/assets/logo.svg" alt="logo" />
+				<button class="contributors">Contributors</button>
+			</nav>
+			<main>
+				<section class="description">
+					<h1>Coding Resources API-</h1>
+					<p>
+						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.
+					</p>
+				</section>
+				<section class="api-test">
+					<form action="">
+						<input
+							type="submit"
+							name=""
+							value=""
+							placeholder="/api/'keyword'"
+						/>
+						<button id="keyword-btn" type="button">
+							<i class="fa-solid fa-magnifying-glass"></i>
+						</button>
+					</form>
+					<div class="result">
+					</div>
+				</section>
+			</main>
+			<section class="documentation">
+				<h1>Documentation</h1>
+			</section>
+		</div>
+	</body>
+	<script src="js/main.js"></script>
 </html>
diff --git a/public/css/style.css b/public/css/style.css
@@ -7,9 +7,9 @@ html {
 	color: #141414;
 }
 
-	html * {
-		box-sizing: border-box;
-	}
+html * {
+	box-sizing: border-box;
+}
 
 /* frame */
 
@@ -34,18 +34,18 @@ nav {
 	background-color: lightgrey;
 }
 
-	nav::after {
-		height: 10rem;
-		background-color: transparent;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 5rem;
-	}
+nav::after {
+	height: 10rem;
+	background-color: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 5rem;
+}
 
-	nav > img {
-		height: 100px;
-	}
+nav > img {
+	height: 100px;
+}
 
 /* contributors */
 
@@ -63,33 +63,33 @@ nav {
 	color: var(--color);
 }
 
-	.contributors:before {
-		content: '';
-		position: absolute;
-		z-index: -1;
-		background: var(--color);
-		height: 200px;
-		width: 250px;
-		border-radius: 50%;
-		top: 100%;
-		left: 100%;
-		transition: all 0.4s;
-	}
-
-	.contributors:hover {
-		color: #fff;
-		cursor: pointer;
-	}
-
-		.contributors:hover:before {
-			top: -32px;
-			left: -30px;
-		}
-
-		.contributors:active:before {
-			background: #141414;
-			transition: background 0s;
-		}
+.contributors:before {
+	content: '';
+	position: absolute;
+	z-index: -1;
+	background: var(--color);
+	height: 200px;
+	width: 250px;
+	border-radius: 50%;
+	top: 100%;
+	left: 100%;
+	transition: all 0.4s;
+}
+
+.contributors:hover {
+	color: #fff;
+	cursor: pointer;
+}
+
+.contributors:hover:before {
+	top: -32px;
+	left: -30px;
+}
+
+.contributors:active:before {
+	background: #141414;
+	transition: background 0s;
+}
 
 /* main */
 
@@ -108,20 +108,20 @@ main {
 	justify-content: center;
 }
 
-	.description > h1 {
-		width: 70%;
-		font-size: 2.5rem;
-		font-weight: 800;
-		margin: 0;
-		display: inline;
-	}
+.description > h1 {
+	width: 70%;
+	font-size: 2.5rem;
+	font-weight: 800;
+	margin: 0;
+	display: inline;
+}
 
-	.description > p {
-		font-size: 2.5rem;
-		width: 70%;
-		margin: 1rem 0;
-		display: inline;
-	}
+.description > p {
+	font-size: 2.5rem;
+	width: 70%;
+	margin: 1rem 0;
+	display: inline;
+}
 
 /* api-test */
 
@@ -134,60 +134,60 @@ main {
 	align-items: center;
 }
 
-	.api-test form {
-		width: 100%;
-		height: 3.5rem;
-		display: flex;
-		justify-content: center;
-	}
-
-		.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;
-		}
-
-			.api-test form input::placeholder {
-				font-size: 1rem;
-				color: #afafaf;
-				font-weight: 600;
-			}
-
-			.api-test form input:hover {
-				width: 70%;
-			}
-
-			.api-test form input:focus {
-				outline: none;
-			}
-
-		.api-test form button {
-			width: 10%;
-			background-color: #141414;
-			border: solid 2px #141414;
-			border-radius: 0 15px 15px 0;
-			font-size: 20px;
-		}
-
-			.api-test form button i {
-				color: lightgray;
-				transition: 0.3s;
-			}
-
-			.api-test form button:hover {
-				cursor: pointer;
-			}
-
-				.api-test form button:hover > i {
-					color: #fff;
-				}
+.api-test form {
+	width: 100%;
+	height: 3.5rem;
+	display: flex;
+	justify-content: center;
+}
+
+.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;
+}
+
+.api-test form input::placeholder {
+	font-size: 1rem;
+	color: #afafaf;
+	font-weight: 600;
+}
+
+.api-test form input:hover {
+	width: 70%;
+}
+
+.api-test form input:focus {
+	outline: none;
+}
+
+.api-test form button {
+	width: 10%;
+	background-color: #141414;
+	border: solid 2px #141414;
+	border-radius: 0 15px 15px 0;
+	font-size: 20px;
+}
+
+.api-test form button i {
+	color: lightgray;
+	transition: 0.3s;
+}
+
+.api-test form button:hover {
+	cursor: pointer;
+}
+
+.api-test form button:hover > i {
+	color: #fff;
+}
 /* result */
 
 .result {
@@ -204,4 +204,4 @@ main {
 	align-items: center;
 	justify-content: center;
 	background-color: lightgray;
-}
+}
diff --git a/public/js/main.js b/public/js/main.js
@@ -1 +1,12 @@
-console.log('Hello World');
+let resources;
+fetchResources();
+
+async function fetchResources() {
+	const response = await fetch(`/api/`);
+	const data = await response.json();
+	resources = data;
+}
+
+document.getElementById('keyword-btn').addEventListener('click', () => {
+	const keyword = document.querySelector('input').value;
+});