GitHub tracker Emma Högberg

.gitignore

@@ -0,0 +1,6 @@
+# Ignore environmental API keys
+.env
+
+
+# Other
+code/secret.js

README.md

@@ -1,13 +1,40 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+The GitHub Tracker is gathering data from my repositories and pull requests on GitHub by fetching data from GitHub API and display it on a website.
+
+### **🔵  Blue Level (Minimum Requirements)**
+
+Your page should include:
+
+- A list of all repos that are forked from Technigo
+- Your username and profile picture
+- Most recent update (push) for each repo
+- Name of your default branch for each repo
+- URL to the actual GitHub repo
+- Number of commits for each repo
+- It should be responsive (mobile first)
+- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using [Chart.js]
+
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## 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?
+Process:
+- Prototype in Figma.
+- Fetch data from API and display it to fulfill the requirements. 
+- Created a chart for the progress.
+- Style the page.
+- Made a sorting function.
+- Made a modal to show comments.
+
+I struggled a lot with the sorting function and the modal. I had to break down the steps in to pieces and solve one thing at the time. 
+I also had to restructure my code a bit and ask some team mates for help. I am really proud of the outcome of the project this week. 
+The feeling when it all worked was really good!  
+
+If I had more time I would try to include a search bar and also which languages the projecs includes. 
+
+
 
 ## 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.
+Link to website: https://emma-github-tracker.netlify.app/

code/chart.js

@@ -1,4 +1,56 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const chart = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+Chart.defaults.font.family = 'Roboto'
+Chart.defaults.font.size = 23
+Chart.defaults.color = 'white'
+
+progressChart = (projectsDone) => {
+
+    const config = {
+        type: 'doughnut',
+        data: {
+            datasets: [{
+                label: '',
+                backgroundColor: ['rgb(198, 228, 207)', 'rgb(111, 167, 132)'],
+                borderColor: 'rgb(22, 19, 21)',
+                hoverOffset: 8,
+                data: [projectsDone, 19 - projectsDone]
+            }],
+
+            // These labels appear in the legend and in the tooltips when hovering different arcs
+            labels: [
+                'done',
+                'todo',
+            ]
+        },
+
+        options: { 
+            plugins: {
+                responsive: true,
+                legend: {
+                    display: true,
+                    position:'bottom', //change to chartArea if bar chart
+                    labels: {
+                        fontColor: '#FFF',
+                        fontFamily: 'Roboto',
+                        boxWidth: 10,
+                        boxHeight: 10,
+                    }
+                },
+                title: {
+                    display: true,
+                    text: 'BOOT CAMP PROGRESS',
+                    fontSize: 40,
+                    position: 'top',
+                    color: '#FFF',
+                    fontFamily: 'Roboto',
+                    weight: 'bold',
+                },
+            }
+        }
+    }
+
+
+    const myChart = new Chart(chart, config);
+}

code/index.html

@@ -4,18 +4,67 @@
   <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=Manrope:wght@500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://kit.fontawesome.com/c7081c8e9b.js" crossorigin="anonymous"></script>
+  <title>Emma´s Project GitHub Tracker</title>
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header class="flex">
+    <h1>GitHub Tracker</h1>
+    <h2>Technigo Boot Camp Spring ´22</h2>
+    <h4 id="username">emmahogberg88</h4>
+  </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <main id="projects">
+
+    <section class="section-overwiew flex" id="section-overwiew">
+      <div id="profile-picture">Profile picture</div>
+      <div class="chart-container">        
+        <!-- This will be used to draw the chart 👇 -->
+        <canvas id="chart" class="chart"></canvas>
+      </div>
+    </section>
 
-  <script src="./script.js"></script>
+    <section class="section-projects">
+      <div class="toggle-switch flex">
+        <p class="toggle-text bold-text">Sort by:<p>
+        <input type="checkbox" name="switch" id="switch">
+        <label for="switch"></label>
+      </div>
+
+      <div class="section-projects__container" id="section-projects">
+      </div>
+    </section>  
+
+    <section id="modal-wrapper" class="modal-wrapper">
+      <div>
+        <button id="modal-btn" class="modal-btn filled-button">Close</button>
+        <div id="modal" class="modal-content"></div>
+      </div>
+    </section>
+
+  </main>
+
+  <footer>
+    <div class="footer-items">
+      <a class="a-footer" href="https://github.com/emmahogberg88">
+        <i class="fab fa-github"></i>
+      </a>
+      <a class="a-footer" href="https://www.linkedin.com/in/emmahogberg/">
+        <i class="fab fa-linkedin-in"></i>
+      </a>
+      <a class="a-footer" href="https://twitter.com/Emm4_dev">
+        <i class="fab fa-twitter"></i>
+      </a>
+    </div>
+  </footer> 
+
+  <script src="./secret.js"></script>
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
 </body>
 </html>