completed gihub profile

tsr-kairi · Jul 8, 2021 · b018adf · b018adf
1 parent 7c46431
commit b018adf
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/Day 28 - Github Profiles/app.js b/Day 28 - Github Profiles/app.js
@@ -0,0 +1,90 @@
+const APIURL = "https://api.github.com/users/";
+
+const main = document.getElementById("main");
+const form = document.getElementById("form");
+const search = document.getElementById("search");
+
+async function getUser(username) {
+  try {
+    const { data } = await axios(APIURL + username);
+
+    createUserCard(data);
+    getRepos(username);
+  } catch (err) {
+    if (err.response.status == 404) {
+      createErrorcard("No profile with this username");
+    }
+  }
+}
+
+async function getRepos(username) {
+  try {
+    const { data } = await axios(APIURL + username + "/repos?sort=created");
+    addReposToCard(data);
+  } catch (err) {
+    createErrorcard("Problem fetching repos");
+  }
+}
+
+function createUserCard(user) {
+  const cardHTML = `
+      <div class="card">
+        <div>
+          <img
+            src="${user.avatar_url}"
+            alt="${user.name}"
+            class="avatar"
+          />
+        </div>
+
+        <div class="user-info">
+          <h2>${user.name}</h2>
+
+          <p>${user.bio}</p>
+
+          <ul>
+            <li>${user.followers} <strong>Followers</strong></li>
+            <li>${user.following} <strong>Followings</strong></li>
+            <li>${user.public_repos} <strong>Repos</strong></li>
+          </ul>
+
+          <div id="repos"></div>
+        </div>
+      </div>`;
+
+  main.innerHTML = cardHTML;
+}
+
+function createErrorcard(msg) {
+  const cardHTML = `<div class="card">
+  <h1>${msg}</h1>
+  </div>`;
+
+  main.innerHTML = cardHTML;
+}
+
+function addReposToCard(repos) {
+  const reposEl = document.getElementById("repos");
+
+  repos.slice(0, 10).forEach((repo) => {
+    const repoEl = document.createElement("a");
+    repoEl.classList.add("repo");
+    repoEl.href = repo.html_url;
+    repoEl.target = "_blank";
+    repoEl.innerText = repo.name;
+
+    reposEl.appendChild(repoEl);
+  });
+}
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  const user = search.value;
+
+  if (user) {
+    getUser(user);
+
+    search.value = "";
+  }
+});
diff --git a/Day 28 - Github Profiles/index.html b/Day 28 - Github Profiles/index.html
@@ -0,0 +1,29 @@
+<!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" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Github | Profiles</title>
+  </head>
+  <body>
+    <form class="user-form" id="form">
+      <input type="text" id="search" placeholder="Search a Github User" />
+    </form>
+
+    <main id="main"></main>
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
+      integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 28 - Github Profiles/style.css b/Day 28 - Github Profiles/style.css
@@ -0,0 +1,113 @@
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #2a2a72;
+  color: #fff;
+  font-family: "Poppins", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height: 100vh;
+  margin: 0;
+}
+
+.user-form {
+  width: 100%;
+  max-width: 800px;
+  margin-right: 30px;
+}
+
+.user-form input {
+  width: 100%;
+  display: block;
+  background-color: #4c2885;
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  font-family: inherit;
+  font-size: 1rem;
+  box-shadow: 0 5px 10px rgba(154, 160, 185.05), 0 15px 40px rgba(0, 0, 0, 0.1);
+}
+
+.user-form input::placeholder {
+  color: #bbb;
+}
+
+.user-form input:focus {
+  outline: none;
+}
+
+.card {
+  display: flex;
+  max-width: 800px;
+  background-color: #4c2885;
+  border-radius: 20px;
+  box-shadow: 0 5px 10px rgba(154, 160, 185.05), 0 15px 40px rgba(0, 0, 0, 0.1);
+  padding: 3rem;
+  margin: 0 1.5rem;
+}
+
+.avatar {
+  border-radius: 50%;
+  border: 10px solid #2a2a72;
+  height: 150px;
+  width: 150px;
+}
+
+.user-info {
+  color: #eee;
+  margin-left: 2rem;
+}
+
+.user-info h2 {
+  margin-top: 0;
+}
+
+.user-info ul {
+  display: flex;
+  list-style-type: none;
+  justify-content: space-between;
+  padding: 0;
+  max-width: 400px;
+}
+
+.user-info ul li {
+  display: flex;
+  align-items: center;
+}
+
+.user-info ul li strong {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+}
+
+.repo {
+  text-decoration: none;
+  color: #fff;
+  background-color: #212a72;
+  font-size: 0.7rem;
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: inline-block;
+}
+
+@media (max-width: 500px) {
+  .card {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .user-form {
+    max-width: 400px;
+  }
+}