jsheroes · Pasca22 · Nov 19, 2022
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
@@ -6,24 +6,44 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>JSHeroes Bootcamp</title>
     <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     <script src='script.js' defer></script>
   </head>
   <body>
     <header>
-      <h1>GitHub Explorer</h1>
+      <div class="container"> 
+        <h1>Welcome to the JSHeroes Bootcamp!</h1>
+      </div>
+      <img src="/assets/js-heroes-bear.png" class="bear_pic">
     </header>
-    <main>
-      <ul class="repo-cards">
-        <!--       Card example     -->
-        <li>
-          <span>test header</span>
-          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab earum perferendis provident? Architecto aut corporis cupiditate, id ipsum minus nihil nisi non nostrum, obcaecati omnis, perferendis provident qui rerum tempora!</span>
-          <section>
-            <p>Stars: 25</p>
-            <p>Forks: 44</p>
-          </section>
-        </li>
-      </ul>
+    <main class="container">
+      <section>
+        <form class="form-search">
+          <input class="input" type="search" name="searchBar" placeholder="Search repos...">
+          <button class="button" type="submit">Search</button>
+        </form>
+      </section>
+      <section>
+
+        <ul class="repo-cards" data-repo-list>
+
+          <template data-template-card>
+            <li class="card">
+              <h2 data-header></h2>
+              <p data-paragraph></p>
+              <section class=footer-card>
+                <p data-stark>Stars: </p>
+                <p data-forks>Forks: </p>
+              </section>
+            </li>
+          </template>
+
+        </ul>
+
+      </section>
     </main>
   </body>
 </html>
diff --git a/src/script.js b/src/script.js
@@ -36,24 +36,58 @@ const repositories = [
   },
 ];
 
-function createRepositoryCard() {
+var formSearch = document.querySelector("form");
+
+var temp = document.querySelector("[data-template-card]");
+
+const repoList = document.querySelector("[data-repo-list]");
+
+function createRepositoryCard(repository) {
   // Implement string template HTML builder for repo card
+  const clone = temp.content.cloneNode("true");
+  const nameElement = clone.querySelector("[data-header]");
+  const paragraph = clone.querySelector("[data-paragraph]");
+  const stars = clone.querySelector("[data-stark]");
+  const forks = clone.querySelector("[data-forks]");
+
+  nameElement.textContent = repository.full_name;
+  paragraph.textContent = repository.description;
+  stars.textContent += repository.stargazers_count;
+  forks.textContent += repository.forks;
+
+  repoList.append(clone);
 }
 
-function renderRepositories() {
+function renderRepositories(repos) {
   // Implement DOM manipulation function to add list items in the repo list
+  repos.map((repository) => createRepositoryCard(repository));
 }
 
 // Comment this out when you start working on the search functionality
-renderRepositories();
+//renderRepositories();
+formSearch.addEventListener("submit", handleSearch);
 
-function handleSearch() {
+function handleSearch(event) {
   // Implement form submit event handler
+  event.preventDefault();
+  const data = new FormData(event.target);
+  const searchText = data.get("searchBar");
+  const query = searchText ? `q=${searchText}` : "q=stars:>10000";
+  fetchRepositories(query);
 }
 
-async function fetchRepositories() {
+async function fetchRepositories(query) {
   // Pass parameter to the search endpoint
-  return fetch("https://api.github.com/legacy/repos/search/<placeholder>")
+  return fetch(`https://api.github.com/search/repositories?${query}`, {
+    headers: {
+      Authorization: "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",
+    },
+  })
     .then((res) => res.json())
-    .then((res) => res.repositories);
+    .then((res) => {
+      var repositories = res.items;
+      renderRepositories(repositories);
+    });
 }
+
+fetchRepositories("q=stars:>10000");
diff --git a/src/style.css b/src/style.css
@@ -1,6 +1,101 @@
 body {
   margin: 0;
-  font-family: system-ui, sans-serif;
+  font-family: "Ubuntu", sans-serif;
+}
+
+header h1 {
+  font-weight: 800;
+}
+
+.bear_pic {
+  height: 100%;
+  position: absolute;
+  left: 0;
+}
+
+.input {
+  border-radius: 8px 0 0 8px;
+  border: 0.1px solid;
+  border-color: grey;
+  border-right: 0;
+  padding: 1rem;
+  flex: 1;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #0098ff;
+}
+
+.button {
+  border: 0;
+  border-radius: 0 8px 8px 0;
+  color: white;
+  background-color: #0098ff;
+  padding: 1rem 2rem;
+}
+
+.card {
+  border: 1px solid grey;
+  border-radius: 8px;
+  padding: 1.5rem 2.5rem;
+}
+
+.card:hover {
+  box-shadow: 0px 0px 8px grey;
+  transform: scale(1.03);
+}
+
+.footer-card {
+  display: flex;
+  gap: 1rem;
+}
+
+.repo-cards {
+  padding: 0;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
+.button:hover {
+  background-color: #0b1b44;
+  cursor: pointer;
+}
+
+.form-search {
+  display: flex;
+  margin-bottom: 4rem;
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+  padding: 3rem 2rem;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+header {
+  display: flex;
+  background-color: #0b1b44;
+  color: white;
+  align-items: center;
+  position: relative;
+}
+
+@media only screen and (max-width: 1400px) {
+  header {
+    flex-direction: row-reverse;
+    justify-content: left;
+  }
+  .bear_pic {
+    left: auto;
+    right: 0;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+  }
 }
 
 ul {