Technigo · JohannaMJ · Sep 27, 2021 · Sep 28, 2021 · Sep 28, 2021 · Sep 29, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,14 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This week's project was to build a GitHub Tracker where I keep track of all GitHub repos that I've used at Technigo. The tracker updates continuously via information from the GitHub API's, so that the projects for upcoming weeks are added to the tracker.
 
 ## 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?
+The project was mostly built with JavaScript and fetched data from API's, but also styled with CSS so that it has a responsive design.
+I worked a lot with my project team and figured out the logic to find the right dta from the API's, and how to display it in th right way. I practiced fetching and filtering data, creating a chart function and sorting function, and how to use dynamic id's to display information in the rigth place.
+I created all the JavaScript functions first and then moved on to styling the website.
+I thought the project was really hard at times, and now I am really satisfied with the result. If I had more time I would like to add a search function so that the tracker can display information from different GitHub accounts.
 
 ## 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://mj-github-tracker.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/gitimg.jpeg b/code/assets/gitimg.jpeg
diff --git a/code/assets/icon.png b/code/assets/icon.png
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,21 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
+const allProjects = 19;
 
-//"Draw" the chart here 👇
+const drawChart = (finishedProjects) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Finished projects", "Projects left"],
+      datasets: [
+        {
+          label: "Technigo projects",
+          data: [finishedProjects, allProjects - finishedProjects],
+          backgroundColor: ["rgb(204, 194, 193)", "rgb(140, 100, 114)"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,35 @@
 <!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>
+  <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>Johanna MJ's GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <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=Montserrat:wght@200;300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header class="hero-img">
+      <h1 class="welcome-message">GitHub Tracker</h1>
+    </header>
+    <main class="wrapper" id="wrapper">
+      <div class="profile-container" id="profileContainer"></div>
+      <hr />
+      <h2>Projects</h2>
+      <section class="projects" id="projects"></section>
+    </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>
+    <section class="chart-container">
+      <p class="chart-text">Overview of projects</p>
+      <canvas class="chart" id="chart"></canvas>
+    </section>
+    <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,95 @@
+const userName = 'JohannaMJ';
+const REPOS_API_URL = `https://api.github.com/users/${userName}/repos`;
+const USER_URL = `https://api.github.com/users/${userName}`;
+const reposContainer = document.getElementById('projects');
+const profileContainer = document.getElementById('profileContainer');
+
+const userProfile = () => {
+  fetch(USER_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      profileContainer.innerHTML = `
+        <div class="icon-container">
+          <a href="${data.blog}" target="blank"><img class="linkedin-icon" src="./assets/icon.png"></a>
+        </div>  
+        <div class="profile-info-container">
+          <p class="profile-text">${data.name}</p>
+          <p class="profile-text">Located in ${data.location}</p>
+          <p class="profile-text">GitHub name: ${data.login}</p>
+        </div>  
+        <div class="profile-img-container">
+          <img class="profile-img" src="${data.avatar_url}"/>
+        </div>
+      `;
+    });
+};
+
+const fetchRepos = () => {
+  fetch(REPOS_API_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith('project-')
+      );
+
+      // sort function (shows latest to oldest repo)
+      forkedRepos.sort((oldestRepo, newestRepo) => {
+        return new Date(newestRepo.pushed_at) - new Date(oldestRepo.pushed_at);
+      });
+
+      forkedRepos.forEach(
+        (repo) =>
+          (reposContainer.innerHTML += `
+            <div class="repo-card">
+              <h3>${repo.name}</h3>
+              <p class="project-info">Branch: ${repo.default_branch}</p>
+              <p class="project-info">Latest push: ${new Date(
+                repo.pushed_at
+              ).toDateString()}</p>
+              <p class="project-info" id="commits-${
+                repo.name
+              }">Number of commits: </p>
+              <p class="project-info">Go to repo: <a href="${
+                repo.html_url
+              }" target="blank">Click here!</a></p>
+            </div>  
+            `)
+      );
+      drawChart(forkedRepos.length);
+      fetchPullRequests(forkedRepos);
+    })
+    .catch(() => {
+      reposContainer.innerHTML = `<h3>Sorry, we could not find the information</h3>`;
+    });
+};
+
+const fetchPullRequests = (repos) => {
+  repos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const myPullRequests = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        if (myPullRequests) {
+          fetchCommits(myPullRequests.commits_url, repo.name);
+        } else {
+          document.getElementById(`commits-${repo.name}`).innerHTML =
+            'No pull request yet';
+        }
+      });
+  });
+};
+
+const fetchCommits = (url, myRepoName) => {
+  fetch(url)
+    .then((response) => response.json())
+    .then((data) => {
+      document.getElementById(`commits-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+userProfile();
+fetchRepos();