Github Profile Clone

Author: HuXn-WebDev

99. Github Profile Clone/app.js

@@ -0,0 +1,131 @@
+const form = document.querySelector("form");
+const input = document.querySelector("input");
+const reposContainer = document.querySelector(".repos");
+const mainContainer = document.querySelector(".main-container");
+
+const API = "https://api.github.com/users/";
+
+async function fetchData(username) {
+  try {
+    const response = await fetch(`${API}${username}`);
+    if (!response.ok) throw new Error(response.statusText);
+
+    const {
+      avatar_url,
+      bio,
+      blog,
+      company,
+      followers,
+      following,
+      location,
+      login,
+      twitter_username,
+    } = await response.json();
+
+    const html = `
+    
+      class="user-avatar"
+      style="background: url(${avatar_url}) no-repeat center/cover"
+    >
+    ${login}
+    Follow
+    ${bio}
+
+      
+        
+        ${followers} follower
+      
+
+      
+        ${following}  following
+      
+
+
+        
+        ${company}
+      
+
+        
+        ${location}
+      
+
+        
+        ${blog}
+      
+
+        
+        @${twitter_username}
+      
+    
+    `;
+
+    const section = document.createElement("section");
+    section.classList.add("about-user");
+    section.innerHTML = html;
+    mainContainer.insertAdjacentElement("afterbegin", section);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function fetchRepos(username) {
+  try {
+    const response = await fetch(`${API}${username}/subscriptions`);
+    if (!response.ok) throw new Error(response.statusText);
+    const data = await response.json();
+
+    data.forEach(
+      ({
+        name,
+        description,
+        forks_count,
+        language,
+        watchers_count,
+        git_url,
+      }) => {
+        const modifiedUrl = git_url
+          .replace(/^git:/, "http:")
+          .replace(/\.git$/, "");
+
+        const singleElement = document.createElement("div");
+        singleElement.classList.add("repo-card");
+        const html = `
+        ${modifiedUrl} class="repo-title">${name}
+        ${description}
+
+            ${language}
+            ${watchers_count}
+            
+            ${forks_count}
+        
+    
+        Public
+        `;
+        singleElement.innerHTML = html;
+        reposContainer.append(singleElement);
+      }
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const val = input.value;
+
+  if (val) {
+    try {
+      await fetchData(val);
+      await fetchRepos(val);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      input.value = "";
+    }
+  }
+
+  document
+    .querySelector("input")
+    .addEventListener("click", () => location.reload());
+});