Technigo · joannaringqvist · Feb 22, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 24, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,6 @@
-# GitHub Tracker
+GitHub Tracker
 
-Replace this readme with your own information about your project.
+I created a tracker for my GitHub repositories that I have forked from Technigo using the GitHub API. I also showed how many projects I have done and how many I have left with the help of a pie chart built with chart.js.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
-## The problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-## View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://github-tracker-joanna.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,28 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const showChart = (countRepos) => {
 
-//"Draw" the chart here 👇
+  const ctx = document.getElementById('chart').getContext('2d');
+
+  const labels = [
+      `Finished projects`,
+      `Projects left`
+    ];
+
+  const data = {
+      labels: labels,
+      datasets: [{
+        label: 'My Technigo projects',
+        backgroundColor: ['rgb(245, 217, 237)', 'rgb(217, 245, 239)'],
+        borderColor: 'rgb(66, 66, 66)',
+        data: [countRepos, 19-countRepos],
+      }]
+    };
+
+  const config = {
+      type: 'pie',
+      data: data,
+      options: {}
+    };
+
+    const myChart = new Chart(ctx, config);
+
+}
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,44 @@
   <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 rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
-
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <header>
+    <h1 class="heading">GitHub Tracker for:</h1>
+    <div class="user">
+      <p class="username" id="username"></p>
+      <img id="picture" class="picture" />
+    </div>
+    </header>
 
-  <script src="./script.js"></script>
+  <main>
+    <table class="projects">
+      <thead>
+        <tr>
+          <td>Repo name</td>
+          <td>Updated at</td>
+          <td>Default branch</td>
+          <td>Number of commits</td>
+          <td>URL</td>
+        </tr>
+      </thead>
+      <tbody id="projects">
+      </tbody>
+    </table>
+  </main>
+  <canvas id="chart" class="chart">
+  </canvas>
+  <p id="numberOfProjects" class="number-of-projects"></p>
+
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
 </body>
-</html>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,88 @@
+const owner = 'joannaringqvist';
+const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`;
+const projects = document.getElementById('projects');
+const username = document.getElementById('username');
+const picture = document.getElementById('picture');
+const numberOfProjects = document.getElementById('numberOfProjects');
+const sort = document.getElementById('sort');
+let ownerLogin = '';
+
+//Function for getting all my repos from Github
+const getRepos = (sort) => {
+    fetch(API_URL_REPOS)
+        .then((res) => res.json())
+        .then((data) => {
+
+            //Get the name and picture from the user and pass it to the function for showing them
+            ownerLogin = data[0].owner.login;
+            userPic = data[0].owner.avatar_url;
+            showUsernameAndPic(ownerLogin, userPic);
+
+            //Array for storing the repos and counting them
+            let arrayWithRepos = [];
+
+            data.forEach((repo) => {
+                //I only want to continue working with the repos from Technigo, so they should be forked and start with project
+                if (repo.fork === true && repo.name.startsWith('project')) {
+                    arrayWithRepos.push(repo.name);
+                    //Write the table rows and cells
+                    projects.innerHTML += `
+                    <tr>
+                        <td>${repo.name}</td>
+                        <td>${new Date(repo.updated_at).toLocaleDateString('sv-SE')}</td>
+                        <td>${repo.default_branch}</td>
+                        <td id="commits-${repo.name}"></td>
+                        <td><a class="repo-url" href="${repo.html_url}">${repo.html_url}</a></td>
+                    </tr>`;
+                }
+            });
+
+            //Count the repos and show the chart
+            countRepos = arrayWithRepos.length;
+            numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`;
+            showChart(countRepos);
+
+            //Get the pull requests for each repo
+            getPullRequests(arrayWithRepos);
+        })
+}
+
+//Function for showing username and picture
+const showUsernameAndPic = (ownerLogin, userPic) => {
+    username.innerHTML = ownerLogin;
+    picture.src = userPic;
+}
+
+//Function for getting the pull requests to be able to show the commits and the comments
+const getPullRequests = (repos) => {
+    repos.forEach(repo => {
+        fetch(`https://api.github.com/repos/technigo/${repo}/pulls?per_page=90`)
+        .then((res) => res.json())
+        .then(data => {
+
+            let commitsURL = '';
+
+            data.forEach((repoData) => {
+                //Only go on with the PRs that are from the user
+                if (ownerLogin === repoData.user.login) {
+
+                    //Get the commits for each repo through the commitsURL. Pass it to the fetchCommits function.
+                    commitsURL = repoData.commits_url;
+                    fetchCommits(commitsURL, repo);
+                } 
+            });
+        })
+    })
+}
+
+//Function for showing how many commits are made for each repo
+const fetchCommits = (commitsURL, repoName) => {
+    fetch(commitsURL)
+    .then((res) => res.json())
+    .then(data => {
+        document.getElementById(`commits-${repoName}`).innerHTML += data.length;
+    });
+}
+
+//Invoke the getRepo function
+getRepos();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,114 @@
 body {
-  background: #FFECE9;
-}
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  padding: 2rem 1rem;
+}
+
+/* --- HEADER --- */
+.user {
+  display: flex;
+}
+
+h1 {
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  font-weight: 300;
+  color: #888;
+  margin: 0;
+}
+
+.heading {
+  align-self: flex-start;
+}
+
+.username {
+  align-self: center;
+  margin: 0 0.5rem 0 0;
+  font-size: 2.2rem;
+}
+
+.picture {
+  border-radius: 50%;
+  height: 13vw;
+}
+
+/* --- MAIN --- */
+main {
+  padding: 2rem 0 0 0;  
+  overflow-x: auto;
+}
+
+.projects {
+  overflow: auto;
+  white-space: nowrap; 
+  margin: 1rem 0 1.5rem 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  font-weight: 700;
+  color: #888;
+}
+
+td {
+  padding: 0.3rem 1rem;
+  border: 1px solid rgb(202, 202, 202);
+}
+
+.repo-url {
+  text-decoration: none;
+  color: #000;
+}
+
+canvas {
+  margin-top: 2rem;
+}
+
+.number-of-projects {
+  text-align: center;
+  margin: 1.6rem 0;
+}
+
+
+/* --- Desktop --- */
+@media screen and (min-width:768px) {
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .heading {
+    align-self: flex-start;
+  }
+
+  .username {
+    align-self: center;
+    margin: 0 1rem 0 1.3rem;
+    font-size: 2.5rem;
+  }
+
+  .repo-url {
+    text-decoration: none;
+    color: #000;
+  }
+
+  .repo-url:hover {
+    color: #888;
+    cursor: pointer;
+  }
+
+  /* --- CHART -- */
+  .chart {
+    max-height: 60vh;
+  }
+
+}