Technigo · isomoth · Sep 28, 2021 · Sep 29, 2021 · Oct 1, 2021 · Oct 2, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,21 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+A site made to practice fetching from the GitHub API. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## Features
 
-## The problem
+- Dynamic styling through DOM manipulation in JavaScript. 
+- Mobile-first styling. 
+- Data retrieved from GitHub's API: Basic user info, projects forked from Technigo (filtered by date of creation), number of commits,  and whether there has been a pull request yet. 
+- Use of methods like filter, find, and sort to organize the data. 
+- A chart visualization of completed projects vs. projects left to do, using chart.js. 
 
-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?
+## Challenges and Lessons learned
 
-## View it live
+- The biggest challenge in terms of fetching was the getCommits function, since the API didn't have a direct path to fetch each commit. The solution was to first fetch all repos, then filter the forked ones. Then get their pull requests, and finally invoke the getCommits function within a conditional (if the project had any pull requests). 
+- Dynamic CSS with JavaScript was also a challenge, since the styling mindset was purely based on the HTML document up to this point. I learned to check the dev tools more often, to make sure the dynamic structure of the document was still coherent.
+- The responsiveness of the chart was tricky because of the quirky nature of chart.js. I used a combination of the library's documentation and Stack Overflow answers to get ahead. In the end, I decided to go for a bar graphic instead of a donut. Its rectangular forms matched my layout better. 
 
-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.
+## Deployed version
+
+github-tracker-gonzalez.netlify.app
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,39 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+// DOM-selector for the canvas
+const ctx = document.getElementById('myChart').getContext('2d');
 
-//"Draw" the chart here 👇
+// Generate the chart based on the data fetched on script.js
+const drawChart = (amount) => {
+  const config = {
+    type: 'bar',
+    data: {
+      labels: ['Finished Projects', 'Projects Left'],
+      datasets: [
+        {
+          label: 'Completed Projects',
+          data: [amount, 19 - amount],
+          backgroundColor: ['#D365C8', '#3aafc9'],
+          hoverOffset: 4,
+        },
+      ],
+    },
+    options: {
+      // The first two options make the chart responsive
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltips: {
+          callbacks: {
+            label: function (tooltipItem) {
+              return tooltipItem.yLabel;
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,40 @@
 <!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" />
+    <title>Project GitHub Tracker</title>
+    <meta
+      name="description"
+      content="GitHub Technigo forked projects tracker"
+    />
+    <meta name="author" content="Isabel González" />
+    <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=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <div class="profile-container">
+      <header>
+        <div id="user-info"></div>
+      </header>
+      <section id="projects">
+        <h1 class="divider-title">Technigo Projects</h1>
+        <div id="project-grid"></div>
+      </section>
+    </div>
+    <!-- Draw a donut chart containing completed projects versus projects left -->
+    <section class="chart-container">
+      <canvas id="myChart"></canvas>
+    </section>
+    <script src="./script.js"></script>
+    <!--Link the chart library-->
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,96 @@
+// The strict mode in JavaScript prevents several bugs. For example, it won't let you use undeclared variables.
+'use strict';
+
+// Global variables
+const USER = 'isomoth';
+const USER_URL = `https://api.github.com/users/${USER}`;
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const userInfo = document.getElementById('user-info');
+const projectsContainer = document.getElementById('project-grid');
+
+// Fetch user info and inject it into a div
+const getUserProfile = () => {
+  fetch(USER_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      userInfo.innerHTML += `
+      <div class="user-info">
+        <img class="user-image" src='${data.avatar_url}'/>
+        <div class="user-names">
+          <h2 class="nickname">${data.name}</h2>
+          <h3><a href="https://github.com/isomoth">${data.login}</a></h3>
+          <p class="bio">${data.bio}</p>
+          <p class= "public">Public repos: ${data.public_repos}</p>
+          <p class= "twitter">Twitter: <a href="https://twitter.com/isomoth">@${data.twitter_username}</a></p>
+        </div>
+      </div>
+      `;
+    });
+};
+
+getUserProfile();
+
+// Fetch all of the user's projects where a pull request has been made
+const getPullRequests = (allRepos) => {
+  allRepos.forEach((repo) => {
+    const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+    fetch(PULL_URL)
+      .then((response) => response.json())
+      .then((data) => {
+        const userPullRequest = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        // Filter out pull requests from other users and fetch commits from them
+        if (userPullRequest) {
+          getCommits(userPullRequest.commits_url, repo.name);
+        } else {
+          // Catch exception when no pull request has been made
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            'No pull requests so far.';
+        }
+      });
+  });
+};
+
+//Fetch all commits from filtered projects
+const getCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl) // this will be 'commits_url' from line 45
+    .then((res) => res.json())
+    .then((data) => {
+      // Count amount of commits
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+// Fetch all repositories that the user has forked from Technigo
+const getRepositories = () => {
+  fetch(REPOS_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      let forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.includes('project-')
+      );
+      // Sort repos based on date of creation ("created_at")
+      forkedRepos.sort(
+        (b, a) => new Date(a.created_at) - new Date(b.created_at)
+      );
+      // Finally, use a loop to generate a card container for each project and fetch other relevant info about it
+      forkedRepos.forEach((repo) => {
+        projectsContainer.innerHTML += `<div class="repo-card">
+            <h3><a class="repo-link" href="${repo.html_url}" target="_blank">${
+          repo.name
+        }</a><h3>
+            <span>
+            <p>Default branch: ${repo.default_branch}</p>
+            <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p id="commit-${repo.name}">Amount of commits: </p>
+            <span>
+          </div>`;
+      });
+      getPullRequests(forkedRepos),
+        //Use the data above to generate the chart from chart.js, displaying elapsed vs. remaining projects
+        drawChart(forkedRepos.length);
+    });
+};
+
+getRepositories();