Technigo · JensBergqvist · Feb 26, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 28, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,10 @@
 # GitHub Tracker
+This week we were asked to build a github tracker for our Technigo projects. 
 
-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.
 
 ## The problem
+I had massive problems with showing my commits. Whenever I invoked the code to display it, several of my projects disappeared. I needed to make an if else statement to be able to display all the projects.
 
-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?
 
 ## 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://brave-hopper-89f38f.netlify.app
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,31 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const drawChart = (ammount) => {
+    const config = {
+        type: "doughnut",
+        data: {
+            labels: [
+                "My completed projects", "Projects left"
+            ], 
+            datasets: [
+                {
+                    label: "Dataset",
+                    data: [ammount, 19-ammount], 
+                    backgroundColor: ["rgb(255, 99, 132)", "rgb(100, 06, 130)"],
+                    borderColor: "rgb(255, 98, 133)",
+                }
+            ]
+        }
+    }
+    const myChart = new Chart(
+        document.getElementById('chart'),
+        config
+      );
+}
+
+
+
+
+
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1-0"/>
   <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>
 <body>
   <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
+
   <main id="projects"></main>
 
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <div class = "chart">
+    <canvas id="chart"></canvas>
+  </div>
 
   <script src="./script.js"></script>
-  <script src="./chart.js"></script>
+  <div class = chart> <script src="./chart.js"></script>
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,72 @@
+//DOM selectors
+const username = 'JensBergqvist'
+const projects = document.getElementById("projects")
+
+
+const API_REPOS = `https://api.github.com/users/${username}/repos`;
+const API_PROFIL = `https://api.github.com/users/${username}`
+//Picture and name
+
+const profilePic = () => {
+    fetch(API_PROFIL)
+        .then(res => res.json())
+        .then(data => {
+           // console.log(data)
+            picture = data.avatar_url
+    let profilePicture =    `<div class = "profile"><h1>${username}</h1> <img class = "photo" src="${picture}" />
+                            </div>`;
+    return (projects.innerHTML = profilePicture)
+})
+}
+
+profilePic()
+
+const getRepos = () => {
+    fetch(API_REPOS)
+      .then(response => response.json())
+      .then(data => {
+        const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project'))
+
+
+         forkedRepos.forEach(repo => {
+             projects.innerHTML += `<div class='repo-card'>
+             <a href='${repo.html_url}'><p>Repo name: ${repo.name}</p></a>
+             <p>Default branch: ${repo.default_branch}</p>
+             <p>Last push: ${new Date(repo.pushed_at).toDateString()}
+             <p id =${repo.name}>Number of commits: </p>
+
+           </div> 
+                `   
+
+
+              })
+
+             getPullRequest(forkedRepos)
+             drawChart(forkedRepos.length)
+            })
+        }
+
+    const getPullRequest= (repos) => {
+        repos.forEach((repo)=> {
+            fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`)
+            .then(response => response.json())
+            .then(data => {
+                const myPullRequest = data.find((pull)=> pull.user.login === repo.owner.login)
+                if (myPullRequest) {
+                    getCommits(myPullRequest.commits_url, repo.name)
+                } else {
+                    document.getElementById(`${repo.name}`).innerHTML=`No pullrequest `
+                }
+                })
+            })
+        }
+
+  const getCommits=(commits, myRepoName) => {
+      fetch(commits)
+      .then(response => response.json())
+      .then(data =>{
+          document.getElementById(`${myRepoName}`).innerHTML += data.length
+      })
+  }
+
+  getRepos()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,45 @@
+* {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 body {
-  background: #FFECE9;
+  background: #39c440;
+  font-family:Verdana, Geneva, Tahoma, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 100vh
+
+}
+.repo-card {
+  padding-left: 10px;
+  border-style: dashed;
+
+}
+
+h1 {
+  display: flex;
+  width: 100%;
+  margin: auto;
+  margin-top: 10%;
+  justify-content: center;
+  font-family:Verdana, Geneva, Tahoma, sans-serif
+}
+
+.chart {
+  width: 50%;
+  height:50%;
+}
+
+.profile {
+  justify-content: center;
+
+}
+
+.photo {
+  width: 100%
 }