list of repos, most recent push, default branch, url to repo added

Camilla Hallberg · Camilla Hallberg · commit beea0440d9e9 · 2022-02-25T20:24:46.000+01:00
diff --git a/code/index.html b/code/index.html
@@ -4,12 +4,14 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Camillas GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <!-- Google Fonts -->
   <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=Shippori+Antique+B1&family=Shizuru&display=swap" rel="stylesheet">
+  <title>GitHub Tracker by Camilla</title>
 </head>
+
 <body>
   <header>
   <h1>GitHub Tracker</h1>
@@ -18,22 +20,14 @@ <h1>GitHub Tracker</h1>
   <section class="userData" id="userData"></section>
 
   <main id="projects">
-    <h2>Projects</h2>
+    <h2>&#128071;&#127997; Projects &#128071;&#127997;</h2>
   </main>
-
-
-
-
-
-
+  
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart"></canvas>
 
-
-  <footer class="footer">
-    <div class="made-by">
+  <footer class="made-by">
       <p>Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 <span style='font-size:16px;'>&#129302;</span></p>
-    </div>
   </footer>
 
   <script src="./chart.js"></script>
diff --git a/code/script.js b/code/script.js
@@ -2,14 +2,15 @@
 const username = 'CamillaHallberg'
 let reponame = ''
 
+const API_TOKEN = TOKEN || process.env.API_KEY;
+// console.log(TOKEN)
+
 // API's
 const API_USER = `https://api.github.com/users/${username}`
 const API_URL_REPO = `https://api.github.com/users/${username}/repos`
-const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`
 
-// my token
-const API_TOKEN = TOKEN;
-// console.log(TOKEN)
+const projectsContainer = document.getElementById('projects')
+
 
 const options = {
     method: 'GET',
@@ -40,8 +41,21 @@ const getRepos = () => {
     .then(data => {
         console.log(data, 'my repos')
 
+        // Filtering to get only my forked repos
         const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-'))
         console.log(forkedRepos, 'forked repos')
+
+        forkedRepos.forEach((repo) => {
+            projectsContainer.innerHTML += `
+                <div class="projects-card" id="${repo.id}">
+                    <h3><a href="${repo.html_url}">${repo.name}</a> - ${repo.default_branch}</h3>
+                    <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+                    <p id="commit_${repo.name}">Number of commits:</p>
+                    <p>Main language: ${repo.language}</p>
+                </div>
+            `
+        })
+
         getPullRequests(forkedRepos)
     })
 }
@@ -51,11 +65,22 @@ const getPullRequests = (forkedRepos) => {
         fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options)
         .then(res => res.json())
         .then(data => {
-            // console.log(data, 'all pull requests on the projects')
-
+            const commits = document.getElementById(`commit-${repo.name}`)
+            
             const pulls = data.find((pull) => pull.user.login === repo.owner.login)
-            console.log(pulls, 'my pull requests')
+            
+            getCommits(pulls.commits_url, repo.name)
+            console.log(pulls.commits_url)
         })
     })
 }
-getRepos()
+
+const getCommits = (myCommitsURL, myReposName) => {
+    fetch(myCommitsURL, options)
+    .then(res => res.json())
+    .then(data => {
+        document.getElementById(`commit-${myReposName}`).innerHTML += data.length
+    })
+}
+
+getRepos()
diff --git a/code/style.css b/code/style.css
@@ -4,9 +4,10 @@ body {
 
 h1 {
   font-family: 'Shizuru', cursive;
-  font-size: 48px;
+  font-size: 72px;
   color:palevioletred;
   text-align: center;
+  cursor: pointer;
 }
 
 h2 {
@@ -16,27 +17,31 @@ h2 {
   text-align: center;
 }
 
-.img {
-  width: 96px;
-  border-radius: 50%;
-  border: 8px solid floralwhite;
-}
-
 h3 {
   font-family: 'Shippori Antique B1', sans-serif;
   font-size: 18px;
   color: #886F6F;
-  text-align: center;
 }
 
 h4 {
   font-family: 'Shippori Antique B1', sans-serif;
   font-size: 14px;
   color: whitesmoke;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
-/* Footer styling */
+.img {
+  width: 96px;
+  border-radius: 50%;
+  border: 8px solid floralwhite;
+}
+
+/* Footer Styling */
 .made-by {
   font-family: 'Shippori Antique B1', sans-serif;
   font-size: 12px;
