fetching data with axios

Author: ayezabashir

Github Profiles/main.js

@@ -9,7 +9,10 @@ async function getUser(username) {
     try {
         const { data } = await axios(APIURL + username);
         console.log(data);
+
         createUserCard(data);
+        getRepos(username);
+
     }
     catch (err) {
         if (err.response.status == 404) {
@@ -18,6 +21,16 @@ async function getUser(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">
@@ -50,6 +63,23 @@ function createErrorCard(msg) {
     main.innerHTML = cardHTML;
 }
 
+function addReposToCard(repos) {
+    const reposEl = document.getElementById('repos');
+    repos
+        .slice(1, 10)
+        .forEach(
+            repo => {
+                const repoElement = document.createElement('a');
+                repoElement.classList.add('repo');
+                repoElement.href = repo.html_url;
+                repoElement.target = '_blank';
+                repoElement.innerText = repo.name;
+
+                reposEl.appendChild(repoElement);
+            }
+        )
+}
+
 form.addEventListener('submit', (e) => {
     e.preventDefault();
     const user = search.value;

Github Profiles/styles.css

@@ -97,6 +97,9 @@ body {
 }
 
 @media screen and (max-width: 500px) {
+  body {
+    overflow: visible;
+  }
   .card {
     flex-direction: column;
     align-items: center;