Finished codealong with mondays lecture

silvertejp89 · silvertejp89 · commit 48898ee20004 · 2021-09-30T11:41:15.000+02:00
diff --git a/code/Untitled-1.txt b/code/Untitled-1.txt
@@ -0,0 +1,6 @@
+TODO:
+
+1) fetch the repos and console log them
+2) get them in the browser
+3) FILTHER OUT THE Technogo repos 
+4) test chart library 
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,30 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+console.log ('chart is heart')
+
+
+
+  const drawChart = (amount) => {
+    const config = {
+      type: 'doughnut',
+      data: {
+          labels: [
+            'Finished Projects',
+            'Projects Left'
+          ],
+          datasets: [{
+            label: 'My First Dataset',
+            data: [amount, 20-amount], 
+            backgroundColor: [
+              'rgb(255, 99, 132)',
+              'rgb(54, 162, 235)'
+            ],
+            hoverOffset: 4
+          }]
+        },
+    };
+
+    const myChart = new Chart(ctx, config)
+  }
diff --git a/code/index.html b/code/index.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
   <h1>GitHub Tracker</h1>
@@ -17,5 +18,7 @@ <h2>Projects:</h2>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+  <!-- <script src="./token.js"></script> -->
+
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,24 @@
+const USER = 'silvertejp89'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const projectContainer = document.getElementById('projects')
+
+const getRepos = () => {
+    fetch(REPOS_URL)
+    .then(response => response.json())
+    .then(data => {
+        console.log(data) //so we can see all the info 
+        // data.forEach(repo => console.log(repo.name)) //Only the names
+        const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) //could be written as for example repo.fork ... === true (or false) but if you write nothing is true.
+        forkedRepos.forEach(repo => projectContainer.innerHTML += `<h3>${repo.name}</h3>`) 
+        drawChart(forkedRepos.length)
+        
+    })
+}
+getRepos() //invoking it
+
+
+
+
+
+
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,4 @@
 body {
-  background: #FFECE9;
-}
+  background: #e9f3ff;
+}
+

-Original file line number
+Diff line change
@@ @@ -1,3 +1,4 @@ @@
 body {
 -  background: #FFECE9;
 -}
 +  background: #e9f3ff;
 +}
++