created a pie chart to display project progression

Camilla Hallberg · Camilla Hallberg · commit d1300f0ecb86 · 2022-02-26T14:26:58.000+01:00
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,32 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (forkedRepos) => {
+
+    const labels = [
+        'Completed Projects',
+        'Remaining Projects',
+    ];
+
+    const data = {
+        labels: labels,
+        datasets: [{
+            label: 'My first dataset',
+            backgroundColor: ['#655D8A', '#D885A3'],
+            borderColor: '#FDCEB9',
+            borderWidth: 6,
+            data: [forkedRepos, 19-forkedRepos],
+        }]
+    };
+
+    const config = {
+        type: 'pie',
+        data: data,
+        options: {}
+    };
+
+    const myChart = new Chart(
+        document.getElementById('chart'),
+        config
+    );
+}
diff --git a/code/index.html b/code/index.html
@@ -4,17 +4,23 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- Chart 👇 -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  
   <link rel="stylesheet" href="./style.css" />
-  <!-- Google Fonts -->
+
+  <!-- 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=Shippori+Antique+B1&family=Shizuru&display=swap" rel="stylesheet">
+
   <title>GitHub Tracker by Camilla</title>
 </head>
 
 <body>
   <header>
-  <h1>GitHub Tracker</h1>
+    <h1>GitHub Tracker</h1>
   </header>
 
   <section class="userData" id="userData"></section>
@@ -24,14 +30,16 @@ <h2>&#128071;&#127997; Technigo Projects &#128071;&#127997;</h2>
   </main>
 
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <div id="canvas" class="chart-container">
+    <canvas id="chart"></canvas>
+  </div>
 
   <footer class="made-by">
       <p>Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 <span style='font-size:16px;'>&#129302;</span></p>
   </footer>
 
-  <script src="./chart.js"></script>
   <script src="./token.js"></script>
+  <script src="./chart.js"></script>
   <script src="./script.js"></script>
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -3,7 +3,6 @@ const username = 'CamillaHallberg'
 let reponame = ''
 
 const API_TOKEN = TOKEN || process.env.API_KEY;
-// console.log(TOKEN)
 
 // API's
 const API_USER = `https://api.github.com/users/${username}`
@@ -53,11 +52,11 @@ const getRepos = () => {
                     <h3><a href="${repo.html_url}">${repo.name}</a></h3>
                     <p class="default-branch">Branch: ${repo.default_branch}</p>
                     <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
-                    <p id="commit_${repo.name}">Number of commits:</p>
-                    <p>Main language: ${repo.language}</p>
+                    <p id="commit-${repo.name}">Number of commits: </p>
                 </div>
             `
         })
+        drawChart(forkedRepos.length)
         getPullRequests(forkedRepos)
     })
 }
@@ -74,7 +73,7 @@ const getPullRequests = (forkedRepos) => {
             const pulls = data.find((pull) => pull.user.login === repo.owner.login);
             
             getCommits(pulls.commits_url, repo.name)
-            console.log(pulls.commits_url)
+            console.log(pulls.commits_url, 'pulls commits_url')
         })
     })
 }
@@ -87,4 +86,5 @@ const getCommits = (myCommitsUrl, myRepoName) => {
     .then((data) => {
         document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
     })
+    console.log(myRepoName)
 }
diff --git a/code/style.css b/code/style.css
@@ -5,15 +5,15 @@ body {
 h1 {
   font-family: 'Shizuru', cursive;
   font-size: 72px;
-  color:palevioletred;
+  color: palevioletred;
   text-align: center;
   cursor: pointer;
 }
 
 h2 {
   font-family: 'Shizuru', cursive;
-  font-size: 32px;
-  color:mediumpurple;
+  font-size: 28px;
+  color: #655D8A;
   text-align: center;
   cursor: pointer;
 }
@@ -30,9 +30,13 @@ h4 {
   color: whitesmoke;
 }
 
+.avatar {
+  text-align: center;
+}
+
 .img {
   width: 96px;
-  border-radius: 50%;
+  border-radius: 4px;
   border: 8px solid floralwhite;
 }
 
@@ -42,7 +46,8 @@ h4 {
 
 .projects-card {
   background: linen;
-  border: 6px solid hotpink;
+  border: 6px solid #7897AB;
+  border-radius: 4px;
   margin: 12px;
   padding: 12px;
   font-size: 12px;
@@ -52,6 +57,8 @@ h4 {
 
 .default-branch {
   font-family: 'Shizuru', cursive;
+  font-size: 14px;
+  color: #D885A3;
 }
 
 a {
