Technigo · Rosanna86 · Sep 27, 2021 · Sep 28, 2021 · Sep 28, 2021 · Sep 28, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,24 @@
-# GitHub Tracker
+# Project: GitHub-tracker
 
-Replace this readme with your own information about your project.
+This week, we want you to create a place to keep track of the GitHub repos that you're using here at Technigo. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## How did I do it?
+I started the project by going through the material and videos. I really struggled mentally this week. So I decided early on that I will focus on blue level.
 
-## The problem
+What I learned:
+* This week it was a lot of JS and API requests. I have learned about fetch, API:S, finding info in an API and filtering. And how to add a gitHub token so you have limitless requests.👩‍💻
 
-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 had a problem to understand the connection between the code. I really had to narrow in all down to small small small pieces. BUT after Maks Wednesday live session I got more of a hang of it, the cheese sandwich comparison really made it more clear to me. 
+
+## When I hit a dead end or a problem
+When a problem arose, I either googled, used stack-overflow or Chrome dev-tools. And I have talked a lot to my fellow Zebra colleagues. And I also had a 1:1 call support with Maks 🙌🏻
+
+My own reflection
+This week was really intense and I had a really big problem mentally. But in the end I solved everything and my page turned out alright 🙂 
 
 ## View it live
+Here it is: https://rosanna-github-tracker.netlify.app/
 
-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.
+## Sources and inspiration
+https://developer.chrome.com/docs/devtools/javascript/
+https://stackoverflow.com/c/technigo/questions/2917
diff --git a/code/assets/github_tracker_icon.png b/code/assets/github_tracker_icon.png
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,43 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+
+
+const drawChart = (amount) => {
+    const config = {
+        type: 'doughnut',
+        data: {
+            labels: [
+                'Finished projects',
+                'Projects left',
+            ],
+            datasets: [{
+                label: 'My First Dataset',
+                data: [amount, 20 - amount],
+                backgroundColor: [
+                    '#a07a99',
+                    '#a7c0b8',
+                ],
+
+
+                hoverOffset: 4
+            }]
+        },
+        options: {
+            layout: {
+                padding: 25 
+            },
+            plugins: {
+                legend: {
+                    labels: {
+                        font: {
+                            size: 15
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const myChart = new Chart(ctx, config);
+}
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,42 @@
 <!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>
+  <title>Rosanna GitHub Tracker</title>
+  <link rel="icon" href="./assets/github_tracker_icon.png" type="png">
+  <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=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   <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>
 
+<body class="main-grid">
+  <header class="header">
+    <h1 class="header-text">GitHub Tracker</h1>
+    <div class="search-container">
+      <form id="search-form">
+        <input class="input-field" id="search-field" type="text" placeholder="Search Rosannas repos here..." autocomplete="off"/>
+        <input type="submit" id="searchbtn" class="button-search" value="Search">
+    </form>
+  </div>
+  </header>
+
+  <div id="myProfile" class="my-profile"></div>
+  <div id="loading" class="lds-ripple"><div></div><div></div></div>
+
+
+  <main id="projects" class="grid-container"></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>
 </body>
+
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,90 @@
+const USER = 'Rosanna86'
+const userContainer = document.getElementById('myProfile')
+const searchField = document.getElementById('search-field')
+const searchForm = document.getElementById('search-form')
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const USER_URL = `https://api.github.com/users/${USER}`
+const projectsContainer = document.getElementById('projects')
+const ldsripple = document.getElementById('loading')
+const Auth = {  }
+
+let repos;
+
+//profile image and info
+const userProfile = () => {
+  fetch(USER_URL, Auth)
+    .then(res => res.json())
+    .then(data => {
+      userContainer.innerHTML = `
+      <div class="profileinfo">
+      <h2>${data.name}</h2>
+      <a href="https://github.com/Rosanna86">@${data.login}</a>
+      <p>${data.location}</p>
+      </div>
+      <div class="profileimg"><img src="${data.avatar_url}"/></div>
+      </div>`
+    })
+}
+
+userProfile()
+
+const getRepos = () => {
+  fetch(REPOS_URL, Auth)
+    .then(response => response.json())
+    .then(data => {
+      const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+      repos = forkedRepos
+      getPullRequests(repos)
+      drawChart(forkedRepos.length)
+    })
+
+}
+getRepos()
+
+//function to get the repos
+const getPullRequests = (repos) => {
+  projectsContainer.innerHTML = '';
+  repos.forEach(repo => {
+    fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, Auth) //added 100 (was 30)
+      .then(res => res.json())
+      .then(data => {
+        const myPullRequest = data.filter((pull) => {
+          return pull.user.login === repo.owner.login
+        })
+        if (myPullRequest.length === 0) {
+          return
+        }
+        getCommits(myPullRequest[0].commits_url, (data) => {
+          const numberOfCommits = data.length
+          //added function so the DOM do not self close tags
+          let boxHtml = `<div class="box-repo ${repo.name}">`; // https://stackoverflow.com/questions/46300108/innerhtml-closes-tags
+          boxHtml += `<h3>${repo.name}</h3>`
+          boxHtml += `<p id="commit-${repo.name}">Number of commits: ${numberOfCommits}</p>`
+          boxHtml += `<p>Last update: ${new Date(repo.pushed_at).toDateString()}</p>`
+          boxHtml += `<p>Default branch: ${repo.default_branch}</p>`
+          boxHtml += `<p><a href="${repo.html_url}" target="_blank">Go to repo</a></p>`
+          boxHtml += '</div>'
+          projectsContainer.innerHTML += boxHtml; //closing the div tag
+          ldsripple.style.display = 'none' //loading icon
+        })
+      })
+  })
+}
+
+//get my commits
+const getCommits = (url, callbackFunction) => {
+  fetch(url, Auth)
+    .then(res => res.json())
+    .then(data => {
+      callbackFunction(data)
+    })
+}
+
+//eventlistener on form-submit
+searchForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+
+  // this function filters your repos where name contains searchField.value. Where IndexOf returns the position of substring and -1 = doesn't exist in string
+  const found = repos.filter(r => r.name.indexOf(searchField.value) > -1);
+  getPullRequests(found);
+})