Technigo · annatbg · Sep 27, 2021 · Sep 28, 2021 · Sep 28, 2021 · Sep 28, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,18 @@
 # 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.
+A site that keeps track of my Github repositories. 
+The project name (with url), latest push, number of commits and pull request is fetched from the Github API, along with my profile info.
 
 ## 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 fetched all my repos and used the filter method to only keep the ones forked from Technigo that start with "project". 
+I fetched the other data using a similar method, either directly from the API if possible, and filtered it when necessary. 
+For sorting the repos in order by date, I used a function that I found on stack overflow to avoid a lot of issues with dates in js. 
+
+My plan was to use grid for my layout, however, that part is NOT complete yet (as of deadline) and I will keep working on it. 
+The page works on different devices, but I plan to make the project-divs look more unified in height.
+
 
 ## 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://annathunberg-githubtracker.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,28 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const totalTechnigoRepos = 19;
+
+const drawChart = (amount) => {
+  const config = {
+    type: 'doughnut',
+    data: {
+      labels: [
+        'Finished projects', // lime green
+        'Projects left' // lighter
+      ],
+      datasets: [{
+        label: 'progress chart',
+        data: [amount, totalTechnigoRepos - amount],
+        backgroundColor: [
+          '#daff05', // lime green
+          '#f1fabd' // lighter
+        ],
+        hoverOffset: 4
+      }]
+    },
+  };
+
+  const progressChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -5,16 +5,60 @@
   <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="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600&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>
 
+
+
+<section class="profile-section">
+
+  <img id="avatar"> </img>
+
+  <p id="full-name"></p>
+
+  <p id="username"></p>
+
+</section>
+
+<section class="projects-section">
+
+  <h2>My Projects</h2>
+
+  <main>
+    <div class="grid-container">
+    <div class="grid-item">
+
+    <div id="list"></div>
+
+  </div> <!--closing tag grid item-->
+  </div> <!--closing tag grid container-->
+
+  </main>
+
+</section>
+
+
+
+  <h2>Project count</h2>
+
+  <div id="chart-wrapper">
+
+
+
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart"></canvas>
 
+  </div>
+
+</section>  
+
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>

diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,81 @@
+// DOM SELECTORS
+const list = document.getElementById('list')
+const avatar = document.getElementById('avatar')
+const fullName = document.getElementById('full-name')
+const username = document.getElementById('username')
+
+// LIST OF APIS TO FETCH FROM
+const USER = 'annathunberg'
+const API_MY_REPOS = `https://api.github.com/users/${USER}/repos`// user-variable instead of my login
+const API_MY_PROFILE = 'https://api.github.com/users/annathunberg'
+
+// FETCHES THE PROFILE PIC, NAME AND USERNAME
+fetch(API_MY_PROFILE)
+.then((response) => response.json())
+.then((data) => {
+    fullName.innerHTML = `Hi! I'm ${data.name}`
+    username.innerHTML = `Username: <a href="${data.html_url}">${data.login}</a>`
+    avatar.src = data.avatar_url
+})
+
+  // FETCHES MY REPOS
+  fetch(API_MY_REPOS)
+  .then((response) => response.json())
+  .then((data) => {
+        const forkedRepos = data.filter(isFork)
+        const sortedForkedRepos = forkedRepos.sort(sortingFunctionFromStackOverflow)
+        sortedForkedRepos.forEach(addRepoToList)
+        drawChart(sortedForkedRepos.length)
+        addCommits(sortedForkedRepos)
+        addPullRequests(sortedForkedRepos)
+  })
+
+function addCommits(repos) {
+    repos.forEach((repo) => {
+        const commitsUrl = `https://api.github.com/repos/${USER}/${repo.name}/commits`;
+        fetch(commitsUrl)
+        .then((response) => response.json())
+        .then((data) => {
+            document.getElementById(`commit-${repo.name}`).innerHTML = `Commits: ${data.length}`
+        })
+    });
+ }
+
+ function addPullRequests(repos) {
+    repos.forEach((repo) => {
+        const pullRequestsUrl = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+        fetch(pullRequestsUrl)
+            .then((response) => response.json())
+            .then((data) => {
+                const myPullRequests = data.filter((pullRequest) => pullRequest.user.login === USER);
+                // IF ELSE STATEMENT FOR 0 PULLS?
+                document.getElementById(`pull-request-${repo.name}`).innerHTML = `Pull requests: ${myPullRequests.length}`
+            });
+    });
+ }
+
+// RETURNS REPOS THAT ARE FORKED AND START WITH PROJECTS
+function isFork(repo) {
+    return repo.fork && repo.name.startsWith('project-')
+}
+
+// CREATES THE LIST OF REPOS
+function addRepoToList(repo) {
+    list.innerHTML += `<div>
+        <a href="${repo.html_url}">${repo.name}</a>
+        <p>Default Branch: ${repo.default_branch}</p>
+        <p>Updated: ${new Date(repo.pushed_at).toDateString()}</p>
+        <p id="commit-${repo.name}"></p>
+        <p id="pull-request-${repo.name}"></p>
+    </div>`
+}
+
+// SORTS THE REPOS IN CHRONOLOGICAL ORDER BY DATE
+function sortingFunctionFromStackOverflow(a, b) {
+    // https://stackoverflow.com/questions/10123953/how-to-sort-an-object-array-by-date-property
+    return new Date(a.created_at) - new Date(b.created_at)
+}
+
+
+
+