Technigo · rijad90 · Feb 22, 2022 · Feb 23, 2022 · Feb 26, 2022 · Feb 26, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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 weeks project was about deepening our knowledge of API and also some unit testing. 
 
 ## 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've had huge issues with getting my personal token to work and I must say that it has defeted me, I never managed to solve it (this time). I have never spent so much time on a single problem, but I still like the fact that I never gave in, I kept trying. 
+
+If I had more time, I would make the token work :D 
 
 ## 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://w7-project-github-tracker.netlify.app/
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')
 
-//"Draw" the chart here 👇
+//Draws the chart and displays progress in projects finished vs left
+const drawChart = (amount) => {
+  const config = {
+    type: 'doughnut',
+    data: {
+      labels: ['Finished projects', 'Projects left'],
+      datasets: [
+        {
+          label: 'Technigo projects',
+          data: [amount, 19 - amount],
+          backgroundColor: ['rgb(63, 114, 175)', 'rgb(17, 45, 78)'],
+        },
+      ],
+    },
+  }
+
+  const myChart = new Chart(ctx, config)
+}
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,25 @@
 <!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" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <body>
+    <div class="main" id="main">
+      <div class="" id="profile"></div>
+      <div class="projects-container" id="projects-container"></div>
+      <div class="chart" id="">
+        <canvas id="chart"></canvas>
+      </div>
+
+    </div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
+    <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 @@
+// USERNAME
+let username = 'rijad90'
+// API
+const GITHUB_USER_API = `https://api.github.com/users/${username}`
+const GITHUB_REPOS_API = `https://api.github.com/users/${username}/repos`
+
+//FETCH API TO PROFILE. INJECTS PIC,USERNAME,BIO
+const getProfile = () => {
+  fetch(GITHUB_USER_API)
+    .then((res) => res.json())
+    .then((data) => {
+        profile.innerHTML += `
+            <div class="profile">
+                <h1> Github Tracker </h1>
+                <img class="profile_picture" src ="${data.avatar_url}"/>
+                <p>${username}</p>
+                <p>${data.bio}</p>
+            </div>
+        `
+    })
+}
+getProfile()
+
+//DOM SELECTOR
+const projects = document.getElementById('projects-container')
+//FETCH API AND FILTERS REPO. INJECTS REPO URL, NAME, DEF BRANCH, PUSHED DATE AND COMMIT 
+const fetchRepo = () => {
+  fetch(GITHUB_REPOS_API)
+    .then((res) => res.json())
+    .then((data) => {
+      const technigoRepo = data.filter(
+          // FILTERS MY FORKED REPOS ONLY TO DESPLAY THE ONES NAMNED "project-"
+        (repo) => repo.name.includes('project-') && repo.fork 
+      )
+
+      technigoRepo.forEach((repo) => {
+        projects.innerHTML += `
+            <div class="projects"> 
+            <a href="${repo.html_url}" target="_blank" class="">${repo.name.toUpperCase()}</a>
+            <p>Default branch: ${repo.default_branch}</p>
+            <p>Most recent push: ${new Date(repo.pushed_at).toISOString().substring(0, 10)}</p>
+            <p id="commit-${repo.name}"> Number of commits: </p>  
+            </div>          
+            `
+      })
+      fetchPull(technigoRepo)
+      drawChart(technigoRepo.length)
+    })
+}
+
+// FETCH ALL REPO PULLS
+const fetchPull = (allRepo) => {
+  allRepo.forEach((repo) => {
+    fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`)
+      .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(`commit-${repo.name}`).innerHTML +=
+            'No pull request'
+        }
+      })
+  })
+}
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((response) => response.json())
+    .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+    })
+}
+
+fetchRepo()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,62 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: "Montserrat", sans-serif;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 body {
-  background: #FFECE9;
-}
+  display: grid;
+  justify-content: center;
+  background-color: #3F72AF;
+}
+
+.main {
+  display: grid;
+  height: auto;
+  text-align: center;
+  justify-content: center;
+  row-gap: 1em;
+
+}
+
+.projects-container {
+  display: grid;
+  gap: 1rem;
+}
+
+.projects, .profile, .chart {
+  background-color: whitesmoke;
+  border-radius: 3%;
+  align-items: center;
+
+  margin: 10px;
+  padding: 10%;
+}
+
+.profile_picture {
+  border-radius: 50%;
+  width: 50%;
+}
+
+a, a:visited, a:hover, a:active {
+  color: #3F72AF;
+}
+
+p, h1, a {
+  color: #3F72AF;
+}
+
+@media (min-width: 668px) {
+  .projects-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 1080px) {
+    .projects-container {
+      grid-template-columns: repeat(3, 1fr);
+    }