Week 7 project - Nadia Lefebvre

.gitignore

@@ -0,0 +1 @@
+code/token.js

README.md

@@ -1,13 +1,24 @@
-# GitHub Tracker
+# Project GitHub Tracker
 
-Replace this readme with your own information about your project.
+Weekly project for Technigo's bootcamp, week 7: build a GitHub tracker (February 2022)
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## Tech stack
+
+- JavaScript
+- HTML
+- CSS
+- API
 
 ## 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?
+The project is to build a GitHub tracker to gather my Technigo repositories in order to practice JavaScript and API skills through GitHub API. It contains some data about the repositories like commit messages, lastest push and so on.
+
+At first I felt some stress since there was no starter code to begin with and it felt like a big mountain to climb. But in the end, I found it quite easy and interesting to work with many fetches nested inside one another. My biggest struggles were to style the charts with chart.js since the documentation wasn't always clear and to deal with the layout I chose (card with tab buttons). Even if I always want to reach more advanced goals, I didn't feel the need to add a filter or a search field since the number of repositories is quite low, and it didn't seemed a big challenge anyway.
 
 ## 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.
+Project deployed here: [Nadia Lefebvre - GitHub Tracker](https://nadialefebvre-github-tracker.netlify.app/)
+
+<div align="center">
+  <img src="screenshot.jpg" />
+</div>

code/chart.js

@@ -1,4 +1,125 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const reposChart = document.getElementById('reposChart').getContext('2d')
 
-//"Draw" the chart here 👇
+// global options for chart.js
+Chart.defaults.font.family = 'Roboto'
+Chart.defaults.font.size = 24
+Chart.defaults.color = 'white'
+
+const drawReposChart = (amount) => {
+    new Chart(reposChart, {
+        type: 'bar',
+        data: {
+            labels: ['Done', 'To do'],
+            datasets: [{
+                data: [
+                    amount,
+                    19 - amount
+                ],
+                backgroundColor: [
+                    '#DBE2EF',
+                    '#3F72AF'
+                ]
+            }]
+        },
+        options: {
+            indexAxis: 'y', // for horizontal bar graph instead of vertical
+            scales: {
+                y: {
+                    grid: {
+                        display: false, // removes grid lines for y axis
+                        borderColor: 'white',
+                    }
+                },
+                x: {
+                    display: false, // removes x axis
+                }
+            },
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Technigo projects',
+                },
+                legend: {
+                    display: false,
+                },
+                tooltip: {
+                    backgroundColor: '#F9F7F7',
+                    bodyColor: '#112D4E',
+                    titleColor: '#112D4E',
+                    titleAlign: 'center',
+                    bodyAlign: 'center',
+                    titleFont: {
+                        size: 12,
+                        weight: '700'
+                    },
+                    bodyFont: {
+                        size: 12,
+                        weight: '700'
+                    },
+                    cornerRadius: 2,
+                    displayColors: false
+                }
+            }
+        }
+    })
+}
+
+const drawLanguagesChart = (html, css, js, idChart) => {
+    const languagesChart = document.getElementById(idChart).getContext('2d')
+    new Chart(languagesChart, {
+        type: 'polarArea',
+        data: {
+            labels: ['HTML', 'CSS', 'JS'],
+            datasets: [{
+                data: [
+                    html,
+                    css,
+                    js
+                ],
+                backgroundColor: [
+                    '#DBE2EF',
+                    '#3F72AF',
+                    '#112D4E'
+                ]
+            }
+            ]
+        },
+        options: {
+            scales: {
+                r: {
+                    ticks: {
+                        display: false, // removes vertical numbers
+                        // callback added because there is an issue with ticks, link: https://github.com/chartjs/Chart.js/issues/8092
+                        callback: function (val, index) {
+                            return val
+                        },
+                    },
+                    grid: {
+                        display: false // removes circular lines
+                    }
+                }
+            },
+            plugins: {
+                title: {
+                    display: false
+                },
+                legend: {
+                    display: true,
+                    position: 'top',
+                    labels: {
+                        color: '#112D4E',
+                        usePointStyle: true,
+                        pointStyle: 'rect',
+                        font: {
+                            size: 12
+                        }
+                    },
+                    onClick: null, // removes on click event: not possible to strike through a label by clicking on it
+                },
+                tooltip: {
+                    enabled: false,
+                }
+            }
+        }
+    })
+}

code/index.html

@@ -1,21 +1,80 @@
 <!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="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
+  <link rel="icon" type="image/x-icon" href="./favicon.ico">
+  <title>Nadia Lefebvre - GitHub Tracker</title>
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+
+  <header 
+    class="header-box" 
+    id="headerBox">
+    <!-- User name and picture are injected here by JavaScript -->
+    <div 
+      class="user-box" 
+      id="userBox">
+    </div>
+    <h1 class="project-title">GitHub Tracker</h1>
+    <div class="repos-chart">
+      <!-- Technigo's projects chart is injected here by JavaScript -->
+      <canvas id="reposChart"></canvas>
+    </div>
+  </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <main class="main-box">
+    <select 
+      class="sorting-dropdown" 
+      id="sortingDropdown">
+      <option value="A to Z">A to Z</option>
+      <option value="Z to A">Z to A</option>
+      <option value="Latest">Latest</option>
+      <option value="Oldest">Oldest</option>
+    </select>
 
-  <script src="./script.js"></script>
+    <!-- All repo cards are injected here by JavaScript -->
+    <section 
+      class="repos-box" 
+      id="reposBox">
+    </section>
+  </main>
+
+  <footer class="footer-box">
+    <span>Created by Nadia Lefebvre</span>
+    <a 
+      href="https://www.linkedin.com/in/nadiainsweden/" 
+      target="_blank" 
+      title="Linkedin Nadia Lefebvre"> 
+      <i class="fab fa-linkedin"></i>
+    </a>
+    <a 
+      href="https://github.com/nadialefebvre" 
+      target="_blank" 
+      title="GitHub Nadia Lefebvre">
+      <i class="fab fa-github"></i>
+    </a>
+    <a 
+      href="https://stackoverflow.com/users/17550223/nadia-lefebvre" 
+      target="_blank"
+      title="Stack Overflow Nadia Lefebvre">
+      <i class="fab fa-stack-overflow"></i>
+    </a>
+  </footer>
+
+  <script src="./token.js"></script>
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
+
 </body>
+
 </html>