fixed bug with displaying chart and array

Author: Kara Howes

code/chart.js

@@ -10,22 +10,21 @@ const drawChart = (amount) =>{
         labels: [
           'Completed Projects',
           'Remaining Projects',
-  
         ],
         datasets: [{
           label: 'My First Dataset',
           data: [amount , 24-amount],
           backgroundColor: [
             'rgb(255, 99, 132)',
-            'rgb(54, 162, 235)',
+            'rgb(54, 162, 235)'
 
           ],
           hoverOffset: 4
         }]
-      }
+      },
 
-    }
-    const myChart = new Chart(ctx, config);
+    };
+  const myChart = new Chart(ctx, config)
 }
 
 

code/index.html

@@ -17,7 +17,7 @@ <h2>Projects:</h2>
   </main>
 
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart" class="chart"></canvas>
+  <canvas id="chart" class="canvas-chart"></canvas>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>

code/script.js

@@ -2,33 +2,27 @@ const USER = 'KaraHowes'
 const repoURL = `https://api.github.com/users/${USER}/repos`
 const projectsContainer = document.getElementById('projects')
 
-
-
-fetch(repoURL)
-.then((response)=>{
-return response.json()
-})
-.then((data)=>{
-    console.log(data)
-    projectsContainer.innerHTML = `The name of your first project was ${data[0].name}`
+const getRepos = ()=>{
+
+    fetch(repoURL)
+    .then(response => response.json())
+    .then(data => {
+        console.log(data)
+        //projectsContainer.innerHTML = `The name of your first project was ${data[0].name}`
+        
+        
+        const forkedProjects = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+        forkedProjects.forEach(repo => projectsContainer.innerHTML += `<h3>${repo.name}</h3>`)
 
-    const forkedProjects = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+        drawChart(forkedProjects.length)
+        console.log('hello', forkedProjects.length)
 
-    forkedProjects.forEach((forkName)=> {
-    projectsContainer.innerHTML += `<p>${forkName.name}</p>`
-
-    drawChart(forkedProjects.length)
-    console.log('hello', forkedProjects.length)
-
+        
+    
+    }
 
-})
+    
+    )
 }
 
-   //repo.forEach((reponames) => {
-    //projects.innerHTML += `<p> Project name: ${reponames.name}</p>`
-   //});
-
-
-
-).catch((error) => console.error(error))
-.then(() => console.log('Request finished'));
+getRepos()

code/style.css

@@ -2,7 +2,7 @@ body {
   background-color: aquamarine;
 }
 
-.chart{
-  max-width: 100px;
-  height: 300px;
+.canvas-chart{
+  max-width: 500px;
+ 
 }