jsheroes · alexnm · Nov 14, 2022 · Nov 16, 2022 · Nov 17, 2022 · Nov 17, 2022
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+.idea
diff --git a/src/assets/js-heroes-bear.png b/src/assets/js-heroes-bear.png
diff --git a/src/index.html b/src/index.html
@@ -1,21 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>JSHeroes Bootcamp</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
   </head>
   <body>
     <header>
-      <h1>Welcome to the JSHeroes Bootcamp!</h1>
+      <div class="content-wrapper">
+        <h1>Welcome to the JSHeroes Bootcamp!</h1>
+      </div>
+      <img class="bear" src="assets/js-heroes-bear.png" />
     </header>
-    <main>
-      <ul class="repo-list">
-        <!-- repo list -->
-      </ul>
+    <main class="content-wrapper">
+      <section>
+        <form class="search-form">
+          <input
+            class="input"
+            type="search"
+            placeholder="Search repos..."
+            data-search
+          />
+          <button class="button" type="submit" id="search-repos-btn">
+            Search
+          </button>
+        </form>
+      </section>
+      <section>
+        <h2 class="u-screen-reader-text">Repositories</h2>
+        <!-- remove content from ul, so we can use :empty to display the loading
+    mesage inside the ul -->
+        <!-- <p data-loading>loading...</p> -->
+        <ul class="repo-cards" data-repo-cards-container></ul>
+        <template data-repo-template>
+          <li class="repo-card">
+            <span class="title" data-header></span>
+            <span class="description" data-description></span>
+            <section class="footer">
+              <div data-stars></div>
+              <div data-forks></div>
+            </section>
+          </li>
+        </template>
+      </section>
     </main>
-    <script src="script.js"></script>
   </body>
-</html>
+</html>
diff --git a/src/script.js b/src/script.js
@@ -1,23 +1,75 @@
-// TODO: Add some sample repositories as a static array
+const repoCardTemplate = document.querySelector("[data-repo-template]");
+const repoCardContainer = document.querySelector("[data-repo-cards-container]");
+const searchInput = document.querySelector("[data-search]");
+const loadingText = document.querySelector("[data-loading]")
+const searchButton = document.getElementById('search-repos-btn')
 
-function createRepositoryCard() {
-  // Implement string template HTML builder for repo card
-}
 
-function renderRepositories() {
-  // Implement DOM manipulation function to add list items in the repo list
+// form submission
+searchButton.addEventListener("click", async (event) => {
+  event.preventDefault()
+  const searchValue = searchInput.value;
+
+  if (!searchValue) {
+    alert("Please type something")
+    return;
+  }
+
+  clearRepos()
+  await fetchRepos(searchValue)
+
+});
+
+// fetch initial repos when clearing the input
+searchInput.addEventListener('input', async (event) => {
+  const searchValue = event.target.value;
+
+  if (!searchValue) {
+    clearRepos()
+    await fetchRepos()
+  }
+})
+
+function clearRepos() {
+  // loadingText.classList.remove('hide')
+  repoCardContainer.textContent = null;
 }
 
-// Comment this out when you start working on the search functionality
-renderRepositories();
+// we can commented these out, if we use :empty
+// function hideLoadingMessage() {
+//   loadingText.classList.add('hide');
+// }
 
-function handleSearch() {
-  // Implement form submit event handler
+function renderRepositories(repository) {
+  // get the content inside the template / card
+  const card = repoCardTemplate.content.cloneNode(true).children[0];
+
+  const header = card.querySelector('[data-header]');
+  const description = card.querySelector('[data-description]');
+  const stars = card.querySelector('[data-stars]');
+  const forks = card.querySelector('[data-forks]');
+
+  header.textContent = repository.full_name;
+  description.textContent = repository.description;
+  stars.textContent = `Stars: ${repository.stargazers_count}`;
+  forks.textContent = `Forks: ${repository.forks}`;
+
+  repoCardContainer.append(card)
 }
 
-async function fetchRepositories() {
-  // Pass parameter to the search endpoint
-  return fetch("https://api.github.com/legacy/repos/search/<placeholder>")
-    .then((res) => res.json())
-    .then((res) => res.repositories);
+function fetchRepos(searchParam = '') {
+  const API_URL = `https://api.github.com/search/repositories${searchParam ? '?q=' + searchParam : '?q=stars:>10000'}`;
+
+  return fetch(API_URL)
+    .then((response) => response.json())
+    .then(data => {
+      // hideLoadingMessage();
+
+      data.items.map((repo) => {
+        return renderRepositories(repo)
+      })
+    })
 }
+
+fetchRepos();
+