first commit, fecth API, set up html-structure, script.js and chart.js

mamite100 · mamite100 · commit 5a9c8dc50067 · 2021-09-28T11:55:12.000+02:00
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,26 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const config = {
+  type: 'doughnut',
+  data: {
+  labels: [
+    'Red',
+    'Blue',
+    'Yellow'
+  ],
+  datasets: [{
+    label: 'My First Dataset',
+    data: [300, 50, 100],
+    backgroundColor: [
+      'rgb(255, 99, 132)',
+      'rgb(54, 162, 235)',
+      'rgb(255, 205, 86)'
+    ],
+    hoverOffset: 4
+  }]
+}
+};
+
+ const  myChart = new Chart (ctx, config); 
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,29 @@
 <!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>
+  <title>Mamites GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
+  <header id="header">
+    <h1>GitHub Tracker</h1>
+    <h2>Projects:</h2>
+  </header>
   <main id="projects"></main>
 
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart"></canvas>
 
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+
+
 </body>
+
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,27 @@
+const USER = 'mamite100'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const projectsContainer = document.getElementById('projects')
+
+
+const getRepos = () => {
+    fetch (REPOS_URL)
+    .then(res => res.json())
+    .then(data => {
+        console.log(data)
+       // data.forEach( repo => console.log (repo.name))
+       const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-') && ! repo.name.endsWith('github-tracker'))
+       forkedRepos.forEach(repo =>  
+       projectsContainer.innerHTML +=`<h3> ${repo.name}</h3>`)
+    })
+
+}
+getRepos() 
+
+//Endpoint to get all PRs from a Technigo repo `https://api.github.com/repos/technigo/${reponame}/pulls`
+
+//To get the comments from a PR, you need to get the URL from the `review_comments_url` property in the PR json object. It might look something like this: `https://api.github.com/repos/Technigo/project-news-site/pulls/247/comments` 
+//and then do a fetch with that url.
+
+//To get the commits from a PR, you need to get the URL  from the `commits_url` property in the PR json object. It might look something like this:
+//`https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits`
+// and then do a fetch with that url.
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,10 @@
 body {
   background: #FFECE9;
+}
+
+.project-grid {
+  display: grid;
+  border: 1px solid black;
+  grid-template-columns: repeat(6, 1fr);
+
 }
