Technigo · AschwinSiaila · Oct 1, 2021 · Oct 1, 2021 · Oct 3, 2021 · Oct 3, 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.
+This week was quite a challenge because I was traveling. Got a lot of help from the recorded videos. So thank God for this week!
 
 ## 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?
+to understand which and what data comes from where or what. Using console.log(data) explained alot.
 
 ## 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://practical-fermi-1dc0a6.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,24 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
-//"Draw" the chart here 👇
+const drawProgressChart = (repos) => {
+  const completedProjects = repos.length;
+  const totalProjects = 20;
+
+  const labels = repos.map((repo) => repo.name);
+  const data = repos.map((repo) => repo.size);
+
+  const chart = new Chart(ctx, {
+    type: "doughnut",
+    data: {
+      labels: ["Completed Projects", "Projects left to build"],
+      datasets: [
+        {
+          data: [completedProjects, totalProjects - completedProjects],
+          backgroundColor: ["blue", "red"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  });
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,31 @@
 <!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" />
+    <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=IBM+Plex+Sans:ital,wght@0,100;0,300;0,400;0,700;1,100;1,400&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Project GitHub Tracker</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <h1>GitHub Tracker Aschwin Siaila</h1>
+      <h2>Name and Picture:</h2>
+      <main id="nameandpicture"></main>
+    </div>
+    <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>
+    <!-- This will be used to draw the chart 👇 -->
+    <h2>Diagram:</h2>
+    <canvas id="chart"></canvas>
+    <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,68 @@
+const USER = "AschwinSiaila";
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const nameAndPicture = document.getElementById("nameandpicture");
+const projectsContainer = document.getElementById("projects");
+
+const NameandPicture = () => {
+  const personal_ID = `https://api.github.com/users/${USER}`;
+  fetch(personal_ID)
+    .then((res) => res.json())
+    .then((data) => {
+      global__UserData = data;
+    })
+    .then(() => NameAndPicture());
+};
+
+const NameAndPicture = () => {
+  const picture = global__UserData.avatar_url;
+
+  nameAndPicture.innerHTML += `
+        <img class="profile-pic" src="${picture}" alt="Picture of gitHub-user"/>
+        <div class="profile-name">${USER}</div>
+      `;
+};
+
+const fetchRepositories = () => {
+  fetch(REPOS_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      const technigoRepositories = data.filter((repo) => repo.name.includes("project-") && repo.fork);
+
+      console.log(technigoRepositories);
+
+      technigoRepositories.forEach((repo) => {
+        projectsContainer.innerHTML += `
+          <div class="project-info">
+          <a class="project-links" href="${repo.html_url}">${repo.name} with default branch ${repo.default_branch}</a>
+          <p class="push">Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+          <a href="${repo.html_url}"><p class="commits" id="commit-${repo.name}">Commits amount: </p></a>
+
+          </div>
+          `;
+      });
+
+      fetchPullRequestArray(technigoRepositories);
+      drawProgressChart(technigoRepositories);
+    });
+};
+
+const fetchPullRequestArray = (allrepositories) => {
+  allrepositories.forEach((repo) => {
+    fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`)
+      .then((res) => res.json())
+      .then((data) => {
+        const myPullRequest = data.find((pull) => pull.user.login === repo.owner.login);
+        fetchCommits(myPullRequest.commits_url, repo.name);
+      });
+  });
+};
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+NameandPicture();
+fetchRepositories();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,101 @@
 body {
-  background: #FFECE9;
-}
+  background: #d6c5c2;
+}
+
+#nameandpicture {
+  position: relative;
+  max-width: 100%;
+  height: auto;
+}
+
+#projects {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 10px;
+}
+
+.profile-pic {
+  border-radius: 30px;
+  max-width: 100%;
+  height: auto;
+}
+
+.profile-name {
+  font-size: 100%;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  background-color: rgb(56, 172, 88);
+  color: white;
+  padding: 20px;
+  max-width: 100%;
+  height: auto;
+}
+
+.project-info {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  color: white;
+  max-width: 100%;
+  height: auto;
+  border: 2px solid black;
+  padding: 10px;
+  background-color: rgb(130, 110, 109);
+}
+
+.project-links {
+  color: white;
+  font-size: 12px;
+  max-width: 100%;
+  height: auto;
+}
+
+.push {
+  background-color: teal;
+  padding: 20px;
+  max-width: 100%;
+  height: auto;
+  border: 2px solid black;
+}
+
+.commits {
+  background-color: turquoise;
+  padding: 20px;
+  max-width: 100%;
+  height: auto;
+  border: 2px solid black;
+}
+
+@media (min-width: 768px) {
+  .profile-name {
+    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+    background-color: rgb(56, 172, 88);
+    color: white;
+    position: absolute;
+    top: 8px;
+    left: 16px;
+    font-size: 20px;
+  }
+
+  #projects {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 10px;
+    padding: 10px;
+  }
+}
+@media (min-width: 992px) {
+  .profile-name {
+    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+    background-color: rgb(56, 172, 88);
+    color: white;
+    position: absolute;
+    top: 8px;
+    left: 16px;
+    font-size: 20px;
+  }
+
+  #projects {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    gap: 10px;
+    padding: 10px;
+  }
+}