Technigo · JustineZwiazek · Feb 23, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 25, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,21 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+This week we are creating a GitHub tracker
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+Requirements:
+• A list of all repos that are forked from Technigo
+• Your username and profile picture
+• Most recent update (push) for each repo
+• Name of your default branch for each repo
+• URL to the actual GitHub repo
+• Number of commits for each repo
+• It should be responsive (mobile first)
+• A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using Chart.js.
 
 ## 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?
+I stated by reviewing the GitHub documentation. Then looked at the instructions hos to use the dynamic id. The profile section was easy to get up, but then I struggled with getting commits up. I had an error in the dynamic id. Once I solved it I moved on to the chart. Getting the data up was not easy, it took me some time to understand how to pass on the info from script to the chart.
 
 ## 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://laughing-bardeen-1bdbb2.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,26 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
-
+const ctx = document.getElementById("chart").getContext("2d");
+Chart.defaults.font.family = "Poppins";
 //"Draw" the chart here 👇
+const drawChart = (projects) => {
+  const labels = ["DONE", "STILL TO DO"];
+
+  const data = {
+    labels: labels,
+    datasets: [
+      {
+        data: [projects, 19 - projects],
+        backgroundColor: ["rgb(157,219,201)", "#8286db"],
+        borderColor: ["rgb(157,219,201)", "#8286db"],
+      },
+    ],
+  };
+
+  const config = {
+    type: "doughnut",
+    data: data,
+    //     // options: {}
+  };
+
+  new Chart(document.getElementById("chart"), config);
+};
diff --git a/code/images/bag.png b/code/images/bag.png
diff --git a/code/images/blob-red.png b/code/images/blob-red.png
diff --git a/code/images/wave-2.png b/code/images/wave-2.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,37 @@
 <!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">
-  <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>
-
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+  <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" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <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=Poppins:wght@200;300;500&family=Source+Code+Pro&family=Source+Sans+3&display=swap"
+      rel="stylesheet"
+    />
+    <title>Justine's GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="profile" class="profile"></div>
+    <img src="images/bag.png" alt="a bag of repos" class="img-bag" />
+    <div class="wrapper">
+      <div class="wave"></div>
+      <div id="repoGrid" class="repo-grid"></div>
+      <div class="wave"></div>
+    </div>
+    <section class="chart-section">
+      <img src="images/bag.png" alt="a bag of repos" class="img-bag-2" />
+      <div class="chart-container">
+        <canvas class="chart" id="chart" width="60vw"> </canvas>
+      </div>
+    </section>
+    <footer>
+      <h5>Justine Zwiazek for Technigo: project week 7</h5>
+    </footer>
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,78 @@
+// DOM selectors:
+const repoGrid = document.getElementById("repoGrid");
+const profile = document.getElementById("profile");
+
+// Global variables:
+const userName = "JustineZwiazek";
+const API_USER = `https://api.github.com/users/${userName}`;
+const API_REPOS = `https://api.github.com/users/${userName}/repos`;
+
+// Profile information function:
+const getProfile = () => {
+  fetch(API_USER)
+    .then((res) => res.json())
+    .then((data) => {
+      profile.innerHTML = `
+      <img src="${data.avatar_url}" class="user-img">
+      <div class="profile-info">
+      <h2>${data.name}</h2>
+      <p>Front End Development student 👩🏻‍💻</p>
+      <p>Stockholm, Sweden 🇸🇪</p></div>
+      `;
+    });
+  getRepos();
+};
+
+// Fetch repositories function:
+const getRepos = () => {
+  fetch(API_REPOS)
+    .then((res) => res.json())
+    .then((data) => {
+      // Filtering out not forked repositories:
+      const forkedRepos = data.filter(
+        (repo) => repo.name.startsWith("project") && repo.fork === true
+      );
+      forkedRepos.forEach((repo) => {
+        repoGrid.innerHTML += `
+        <div class='repos' id="${repo.name}">
+          <h3>${repo.name}</h3>
+          <p>Default branch: ${repo.default_branch}</p>
+          <p>Recent Push: ${new Date(repo.pushed_at).toDateString()}</p>
+          <a href="${repo.html_url}">Link to repo</a>
+          `;
+      });
+      getPullRequests(forkedRepos);
+      drawChart(forkedRepos.length);
+    });
+};
+
+// Fetch pull requests function:
+const getPullRequests = (forkedRepos) => {
+  forkedRepos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const myPullsOnly = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        const myCommitsURL = myPullsOnly.commits_url;
+        const repoName = repo.name;
+        getCommits(myCommitsURL, repoName);
+      });
+  });
+};
+
+// Fetch number of commits function:
+const getCommits = (myCommitsURL, repoName) => {
+  fetch(myCommitsURL)
+    .then((res) => res.json())
+    .then((data) => {
+      // Count the number of commits:
+      document.getElementById(repoName).innerHTML += `
+            <p># of Commits: ${data.length}</p>`;
+    });
+};
+// Initiate the first function
+getProfile();