Week 7: GitHub Tracker by Elsa Carlström

.vscode/settings.json

@@ -1,3 +1,23 @@
 {
-  "liveServer.settings.port": 5505
-}
+  "liveServer.settings.port": 5506,
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#fbed80",
+    "activityBar.activeBorder": "#06b9a5",
+    "activityBar.background": "#fbed80",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#06b9a5",
+    "activityBarBadge.foreground": "#15202b",
+    "sash.hoverBorder": "#fbed80",
+    "statusBar.background": "#f9e64f",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#f7df1e",
+    "statusBarItem.remoteBackground": "#f9e64f",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#f9e64f",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#f9e64f99",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#f9e64f"
+}

README.md

@@ -1,13 +1,15 @@
 # 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 is my version of a GitHub Tracker. It's a webpage that displays my profile and all projects I've made during the Technigo Frontend Boot Camp together with selected information about it fetched through GitHub API's.
 
 ## 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 started out by studying the project brief and getting familiar to the use of the GitHub API's as I started to add code to the project. I finished the projects requirements and added extra features. The extra features includes the formatting of the fetched project name, adding the language percentage for each project and links to view the projects live. 
+
+This project opened up my eyes to the clever use of dynamic id's. By using it I was able to keep the functions separate and invoking them with arguments in the main function (getRepos) instead of having to collect them all in the main function in a "waterfall" structure to access the values of the variables inside.
+
+Next step would be to add if the projects has collaborators or not (group or individual assignment), names of collaborators and the commits made for projects I've been a collaborator on. To be able to sort and/or search for the projects will come in handy when the number of projects will increase.
 
 ## 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://priceless-kepler-739442.netlify.app/

code/chart.js

@@ -1,4 +1,35 @@
-//DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+const drawChart = (amount) => {
+    const config = {
+        type: 'doughnut',
+        data: {
+            labels: [
+              `Pushed projects`,
+              `Projects to go`,
+            ],
+            datasets: [{
+              label: 'Technigo progress',
+              data: [amount, 19-amount],
+              backgroundColor: [
+                '#F59B99',
+                '#FAECD2'
+              ],
+              borderColor: [
+                'transparent',
+                'transparent'
+              ],
+              hoverOffset: 0
+            }]
+        },
+        options: {
+          plugins: {
+            legend: {
+              position: '',
+            }
+          }
+        }
+    }
+    const myChart = new Chart(ctx, config)
+}
+

code/index.html

@@ -6,14 +6,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <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=Playfair+Display&family=Roboto:wght@100;300;400;600;700;800&display=swap" rel="stylesheet">
+  <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="main-wrapper">
+    <header class="header">
+      <img src="./assets/github-tracker.svg" />
+    </header>
+    <div class="profile-wrapper">
+      <div id="profile" class="profile">
+      </div>
+      <div class="chart-section">
+        <div class="headline-wrapper">
+          <p class="small-headline">Technigo Projects</p>
+        </div>
+        <div class="chart-wrapper">
+          <canvas id="chart" class="chart"></canvas>
+        </div>
+      </div>
+    </div>
+    <div class="projects-wrapper">
+      <main id="projects" class="projects"></main>
+    </div>
+  </div>
+
+  <footer class="footer">Made by Frontend developer student Elsa Carlström @Technigo 2021</footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>