Project Github Tracker - Michael

.gitignore

@@ -0,0 +1,8 @@
+#API KEY
+code/token.js
+
+# Ignore node_modules folder
+node_modules
+
+# Ignore files related to API keys
+.env

README.md

@@ -1,13 +1,11 @@
 # 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.
+The brief was to create a tracker over all of our forked technigo projects from Github, as well as a chart showing our current progress.
 
 ## 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 first tried the API and played around to try to find the different data I would need, and where I would find the links to the rest of the fetches I needed. After feeling comfortable with where I could find the different information I needed, I began setting up my javascript. I didn't spend much time on design this week, and I struggled a bit with the chart.js documentation, but in the end I was very satisfied with the solutions I came up with. I also spent some time debugging a few small issues I had and refactoring my code to make it more readable.
 
 ## 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://github-tracker-week7.netlify.app

code/chart.js

@@ -1,4 +1,49 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+// Global Font Family for Chart
+Chart.defaults.font.family = 'Roboto Mono, monospace';
 
-//"Draw" the chart here 👇
+//DOM-selector
+const ctx = document.getElementById('myChart')
+
+//Drawing the doughnut chart
+const completedProjects = (complete) => {
+    const data = {
+        labels: [
+            `Completed Projects`,
+            `Incomplete Projects`,
+        ],
+        // Pulls complete from script.js
+        datasets: [{
+            data: [complete, (19 - complete)],
+            backgroundColor: [
+            '#2d2e2f',
+            '#DCD8DC'
+            ],
+            hoverOffset: 8,
+            hoverBorderColor: [
+                '#FFFFFF'
+            ]
+        }]
+    };
+
+    const config = {
+        type: 'doughnut',
+        data: data,
+        options: {
+            plugins: {
+                legend: {
+                    position: 'top',
+                    labels: {
+                        font: {
+                            size: 16,
+                        },
+                    }
+                },
+            }
+        }
+    };
+
+    const myChart = new Chart(
+        ctx,
+        config,
+    );
+}

code/chart2.js

@@ -0,0 +1,235 @@
+//DOM-selector for sprint chart
+const sprint = document.getElementById('sprintChart')
+
+// Date Consts (In Epoch - Milliseconds)
+const feb21 = 1645401600000
+const feb28 = 1646006400000
+const mar7 = 1646611200000
+const mar14 = 1647216000000
+const mar21 = 1647820800000
+const mar28 = 1648425600000
+const apr4 = 1649030400000
+const apr11 = 1649635200000
+const apr18 = 1650240000000
+const apr25 = 1650844800000
+const may2 = 1651449600000
+const may9 = 1652054400000
+const may16 = 1652659200000
+const may23 = 1653264000000
+const may30 = 1653868800000
+const jun6 = 1654473600000
+const jun13 = 1655078400000
+const jun20 = 1655683200000
+
+// Let declarations
+let sprint1
+let sprint2
+let sprint3
+let sprint4
+let sprint5
+let sprint6
+let colors = []
+let now = Date.now()
+
+// Function for determining date & setting sprint data and colors on bar chart
+const dataColors = () => {
+    // If statements for sprints
+    if (now > feb21 && now < feb28) {
+        sprint1 = 4;
+        sprint2 = 3;
+        sprint3 = 0;
+        sprint4 = 0;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC', '#DCD8DC', '#DCD8DC']
+    } if (now > feb28 && now < mar7) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 0;
+        sprint4 = 0;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC', '#DCD8DC']
+    } if (now > mar7 && now < mar14) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 1;
+        sprint4 = 0;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC', '#DCD8DC']     
+    } if (now > mar14 && now < mar21) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 2;
+        sprint4 = 0;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC', '#DCD8DC']   
+    } if (now > mar21 && now < mar28) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 3;
+        sprint4 = 0;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC', '#DCD8DC']
+    } if (now > mar28 && now < apr4) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 0;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC']
+    } if (now > apr4 && now < apr11) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 1;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC']
+    } if (now > apr11 && now < apr18) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 2;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC']      
+    } if (now > apr18 && now < apr25) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 3;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC', '#DCD8DC']
+    } if (now > apr25 && now < may2) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 0;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC']
+    } if (now > may2 && now < may9) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 1;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC']
+    } if (now > may9 && now < may16) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 2;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC']
+    } if (now > may16 && now < may23) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 3;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC', '#DCD8DC']
+    } if (now > may23 && now < may30) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 4;
+        sprint6 = 0;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC']
+    } if (now > may30 && now < jun6) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 4;
+        sprint6 = 1;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC']
+    } if (now > jun6 && now < jun13) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 4;
+        sprint6 = 2;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC']
+    } if (now > jun13 && now < jun20) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 4;
+        sprint6 = 3;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#DCD8DC']
+    } else if (now > jun20) {
+        sprint1 = 4;
+        sprint2 = 4;
+        sprint3 = 4;
+        sprint4 = 4;
+        sprint5 = 4;
+        sprint6 = 4;
+        colors = ['#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f', '#2d2e2f']
+    }
+}
+
+//Chart function
+const sprintProgress = () => {
+
+    // Run dataColors for determining sprint progress & bar colors
+    dataColors();
+
+    const data = {
+        labels: [
+            'Sprint 1',
+            'Sprint 2',
+            'Sprint 3',
+            'Sprint 4',
+            'Sprint 5',
+            'Sprint 6'
+        ],
+        datasets: [{
+            data: [sprint1, sprint2, sprint3, sprint4, sprint5, sprint6],
+            backgroundColor: colors,
+            hoverOffset: 8,
+            hoverBorderColor: [
+                '#FFFFFF'
+            ],
+        }]
+    };
+
+    const config = {
+        type: 'bar',
+        data: data,
+        options: {
+            scales: {
+                x: {
+                    ticks: {
+                        stepSize: 1,
+                    }
+                }
+            },
+            indexAxis: 'y',
+            plugins: {
+                legend: {
+                    display: false,
+                },
+            }
+        }
+    };
+
+    const sprintChart = new Chart(
+        sprint,
+        config,
+    );
+}
+
+sprintProgress();

code/index.html

@@ -3,19 +3,52 @@
 <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>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>Technigo Projects GitHub Tracker | michaelchangdk</title>
+  <!-- Link to Favicon -->
+  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
+  <link rel="manifest" href="./site.webmanifest">
+  <!-- Link Google Fonts -->
+  <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=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@100;200;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <!-- Link to StyleSheet -->
   <link rel="stylesheet" href="./style.css" />
+  <!-- Link to Chart.js -->
+  <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>
 
+  <!-- Header for Avatar & Username -->
+  <header class="layout"></header>
+
+  <!-- Projects List & Info Section -->
+  <section class="layout projects" id="projects">
+    <h2 class="title">Technigo Projects:</h2>
+  </section>
+
+<!-- Charts Section -->
+  <section class="charts-wrapper layout">
+    <div class="chart-container bootcamp-chart">
+      <h2 class="title">Bootcamp Progress:</h2>
+      <canvas id="myChart" class="chart">
+      </canvas>
+    </div>
+
+    <div class="chart-container sprint-chart">
+      <h2 class="title">Sprint Progress:</h2>
+      <canvas id="sprintChart" class="chart">
+      </canvas>
+    </div>
+  </section>
+
+  <!-- JS Scripts -->
+  <script src="./token.js"></script>
   <script src="./script.js"></script>
-  <script src="./chart.js"></script>
+  <script src="./chart.js"></script> 
+  <script src="./chart2.js"></script>
 </body>
-</html>
+</html>