Technigo · LovisaBrorson · Feb 25, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,23 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+I used an API to get hold on my information on github. A sorted out the infomation I wanted to have on my page. After that did I style the page. 
+I used a chart for the first time.
+
+
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## 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 had som problems wiht the js, that I could't se my fetches in the browser, my team mate helped me, I had mist the letter s in two places, had been wrightng commit instead om commits, and it was some more of this small but very importet thigs I had missed. 
 
-## View it live
+I had som problems as well then I did the css, I was trying to style the wrong class ones. And I got help form team mates here as well. I have goolged a lot. 
+
+I thougt it was messy to have classes in html and js.
 
-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.
+It was a struggle to get the chart on the right place, and the border around the chart to stay as a circel.
+
+If I had more time would I made "Link to repository" in to a button.
+
+
+## View it live
+https://lovisasgithubtracker.netlify.app/
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1,2 @@
+token.js
+
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,28 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById('myChart').getContext('2d')
+Chart.defaults.font.family = 'Roboto Mono, monospace';
+
 
 //"Draw" the chart here 👇
+
+
+
+const drawChart = (numberOfProjects) => {
+    const config = {
+        type: "pie",
+        data: {
+        labels: ["Project done", "Project left"],
+        datasets:[{
+        label: "Technigo Projects",
+        data: [numberOfProjects, 19 - numberOfProjects],
+        backgroundColor:["rgb(0,0,250)", "rgb(27,27,119)"],
+        hoverOffset: 4,
+
+        }]
+
+        }
+    }
+
+    const myChart = new Chart(ctx, config);
+
+}
diff --git a/code/github-cat.png b/code/github-cat.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,44 @@
 <!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>
+      <header class="video-header">
+        <video autoplay loop muted poster="space-blue.jpg">
+        <source src="video-film.mp4" type="video/mp4" />
+        <p>Your browser dosen't support the vido tag.</p>
+        </video>
+        <h1>Welcome to my Github Tracker!</h1>
+      </header>
+
+    <main id="projects">
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
+      <div class="container-chart-name-pic">
+        <section class="user-container" id="userContainer"></section>
+        <div class="chart-container">
+            <canvas id="myChart" class="my-chart"></canvas>
+        </div>
+      </div>  
+
+      <section class="projects-container" id="projectsContainer"></section>
+
+      <footer>
+        <div class="footer">
+          <span>Lovisa Brorson - Technigo ©2022</span>
+        </div>
+      </footer>
+    </main>
+
+    <script src="./token.js"></script>
+    <script src="./chart.js"></script> 
+    <script src="./script.js"></script>
+
+  </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,105 @@
+
+
+const username = 'LovisaBrorson'
+const USER_INFO = `https://api.github.com/users/${username}` //Profilepicture and username
+const API_URL_REPOS = `https://api.github.com/users/${username}/repos` // Get the forked repos
+const userContainer = document.getElementById('userContainer')
+const projectsContainer = document.getElementById('projectsContainer')
+
+
+const options = { //opject
+    method: 'GET', //Kan också var post, patch, delete
+     headers: {
+        Authorization: `token ${API_TOKEN}`
+    }
+}
+
+//User information = profilepicture and username
+ const profileInfo = () => {
+    fetch(USER_INFO, options)
+     .then((res) => res.json())
+     .then((profileData) => {
+         userContainer.innerHTML +=
+         `<div class="user-info">
+         <img src="${profileData.avatar_url} "class="profile-pic" id="profilePic" alt="Profile picture"/>
+         </div>
+         <div class="user-text">  
+         <p class="name"> ${profileData.name}</p>
+         <p class="user-name"> Username: ${profileData.login}</p>
+         <img class="github" src="github-cat.png">
+         </div>
+         `
+
+        console.log(profileData)
+     })
+ }
+ profileInfo()
+
+//Funktion that get the repos from Github
+const getRepos = () => {
+
+    fetch(API_URL_REPOS, options)
+    .then((res) => res.json())
+    .then((reposData) => {
+        console.log(reposData)
+        const forkedRepos = reposData.filter((repo) => repo.fork && repo.name.startsWith("project-"))
+        forkedRepos.sort((oldestRepo, newestRepo) => new Date(newestRepo.pushed_at) - new Date(oldestRepo.pushed_at));
+
+        forkedRepos.forEach(repo => {
+
+            console.log('test', repo)
+
+        projectsContainer.innerHTML += `
+       <div class="forkedrepo-div">
+            <h2 class="project-name"> ${repo.name}</h2>
+            <p class="project-info"> Default branch: ${repo.default_branch}</p>
+            <p class="project-info"> Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p class="project-info" id="commits-${repo.name}"> Amount of commits: </p>  
+            <a class="project-info" href="${repo.html_url}" target="_blank">Link to repository</a>
+        </div> 
+        `
+       })
+
+       getPullRequests(forkedRepos)
+       drawChart(forkedRepos.length)
+    //    
+    })
+
+}    
+getRepos()
+
+//Funciton that shows the pull requests that has been done by the user to Technigo project
+const getPullRequests = (repos) => {
+    repos.forEach(repo => {
+          fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options)
+            .then(res => res.json())
+            .then((pullData) => {
+            let myPullRequest = pullData.find((pull) => pull.user.login === repo.owner.login)
+            if (myPullRequest) {
+                displayCommits(myPullRequest.commits_url, repo.name)
+            } else {
+                document.getElementById(`commits-${repo.name}`).innerHTML = `No pulls from this user yet.`
+            }    
+         })
+    })
+}
+
+
+
+
+const displayCommits = (commitsUrl, repo) => {
+    fetch(commitsUrl, options)
+        .then(res => res.json())
+        .then((data) => {
+
+        document.getElementById(`commits-${repo}`).innerHTML += data.length
+
+})
+}
+
+
+
+
+
+
+
diff --git a/code/space-blue.jpg b/code/space-blue.jpg