Technigo · Smelbows · Sep 28, 2021 · Sep 29, 2021 · Sep 30, 2021 · Oct 1, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+Github tracker uses various parts of the Github REST api to reproduce some data from different github projects. 
 
 ## 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?
+This week I began by reading and reviewing the learning materials before starting the project. I found it quite hard to plan this week as I didn't know exacly what information would be found in each endpoint and so what I would want to display. So I found that both the HTML and CSS were hard to write or plan beforehand. If I were to do this project again I would look through the api first so that I could plan how my HTML and CSS would look, then go back to the javascript after this.
 
 ## 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://sarah-mottram-github-tracker.netlify.app/
diff --git a/code/Images/GitHub-headpic.jpeg b/code/Images/GitHub-headpic.jpeg
diff --git a/code/Images/icons8-code-24.png b/code/Images/icons8-code-24.png
diff --git a/code/Images/icons8-css-filetype-32.png b/code/Images/icons8-css-filetype-32.png
diff --git a/code/Images/icons8-github-24.png b/code/Images/icons8-github-24.png
diff --git a/code/Images/icons8-html-50.png b/code/Images/icons8-html-50.png
diff --git a/code/Images/icons8-javascript-48.png b/code/Images/icons8-javascript-48.png
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,34 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById('chart').getContext('2d');
 
 //"Draw" the chart here 👇
+const drawChart = (repos) => {
+	const labels = ["Projects completed", "Projects to go"];
+	const data = [repos.length, 19-repos.length];
+
+	new Chart(ctx, {
+		type: "doughnut",
+		data: {
+			labels,
+			datasets: [
+				{
+					data,
+					backgroundColor: ['#0b293f', '#459ec6'],
+				},
+			],
+		},
+        options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                position: "top",
+              },
+              title: {
+                display: true,
+                text: "Technigo Bootcamp Projects",
+              },
+            },
+          }
+	});
+};
+
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,51 @@
 <!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>Project GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header>
+      <div class="hero-image">
+        <div class="hero-text">
+          <h1>GitHub Tracker</h1>  
+        </div>
+      </div> 
+      <div class="user-info" id="user-info"> 
+      </div>
+    </header>
+    <hr />
+    <h2>Projects</h2>
+    <div>
+      <p class="dark">Filter Repos by main language:</p>
+      <button id="HTML-button">HTML</button>
+      <button id="CSS-button">CSS</button>
+      <button id="Javascript-button">Javascript</button>
+    </div>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <main id="projects"></main>
+
+    <!-- This will be used to draw the chart 👇 -->
+    <section class="chart-container">
+      <canvas class="chart" id="chart"></canvas>
+    </section>
+
+    <footer>
+      <div class = "icon-link">
+        <a target="_blank" href="https://icons8.com/icon/87310/code">Code</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>
+      </div>
+    </footer>
+
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
 
-  <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,79 @@
+// DOM selectors
+
+// HTML sections to inject into
+const main = document.getElementById("projects");
+const userInfo = document.getElementById("user-info");
+
+const username = "Smelbows";
+const USERS_REPOS_API = `https://api.github.com/users/${username}/repos`;
+
+const fetchUserRepos = (userUrl) => {
+  fetch(userUrl)
+    .then((res) => res.json())
+    .then(filterForTechnigoRepos)
+    .then((repos) => {
+      userInfo.innerHTML = createHTMLForUser(repos[0]);
+      repos.forEach((repo) => {
+        main.innerHTML += createHTMLForRepo(repo);
+        fetchPullRequests(repo);
+      });
+      drawChart(repos);
+    });
+};
+
+const filterForTechnigoRepos = (data) => {
+  return data.filter((repo) => repo.name.startsWith("project"));
+};
+
+const createHTMLForUser = (repo) => {
+  return `<img class="avatar" src=${repo.owner.avatar_url} alt="github avatar"/><p class="name">${repo.owner.login}</p>`;
+};
+
+const createHTMLForRepo = (repo) => {
+  return `<a target="blank" href="${repo.html_url}" class="repo-container ${
+    repo.language
+  }" id="${repo.name}"><p class="repo-name">${
+    repo.name
+  }</p><p>Default branch: ${repo.default_branch}</p><p>Last pushed: ${new Date(
+    repo.pushed_at
+  ).toDateString()}</p><div id="commit-${repo.name}"></div></a>`;
+};
+
+const fetchPullRequests = (repo) => {
+  fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+    .then((res) => res.json())
+    .then((data) => {
+      myPullRequest = findMyPullRequest(data, repo.name);
+    //   Only continues to fetch commit data if there is a pull request there
+      if (myPullRequest === undefined) {
+        document.getElementById(`commit-${repo.name}`).innerHTML +=
+          "<p>No pull request made yet</p>";
+      } else {
+        fetchCommits(myPullRequest.commits_url, repo.name);
+      }
+    });
+};
+
+const findMyPullRequest = (pullsData, repoName) => {
+    // this project was pulled from Anna's fork
+  if (repoName === "project-weather-app") {
+    return pullsData.find((pull) => pull.user.login === "anndimi");
+  } else {
+    return pullsData.find((pull) => pull.user.login === username);
+  }
+};
+
+const fetchCommits = (url, name) => {
+  fetch(url)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(
+        `commit-${name}`
+      ).innerHTML += `<p>Number of commits: ${
+        data.length
+      }</p><p>Last commit message: ${data[data.length - 1].commit.message}</p>`;
+    });
+};
+
+fetchUserRepos(USERS_REPOS_API);
+