Technigo
diff --git a/‎code/chart.js‎
Lines changed: 21 additions & 0 deletions b/‎code/chart.js‎
Lines changed: 21 additions & 0 deletions
diff --git a/‎code/index.html‎
Lines changed: 8 additions & 1 deletion b/‎code/index.html‎
Lines changed: 8 additions & 1 deletion
diff --git a/‎code/script.js‎
Lines changed: 47 additions & 0 deletions b/‎code/script.js‎
Lines changed: 47 additions & 0 deletions
diff --git a/‎code/style.css‎
Lines changed: 6 additions & 2 deletions b/‎code/style.css‎
Lines changed: 6 additions & 2 deletions
@@ -2,3 +2,24 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+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)
+}
@@ -6,15 +6,22 @@
   <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>
+  <h2>Profile:</h2>
+  <div id="profile"></div>
+
   <h2>Projects:</h2>
   <main id="projects"></main>
 
+  
+
   <!-- This will be used to draw the chart 👇 -->
+  <div class="chart">
   <canvas id="chart"></canvas>
-
+  </div>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>
 
@@ -0,0 +1,47 @@
+// API's
+const USER = 'Mattsson717'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const PROFILE_URL = `https://api.github.com/users/${USER}`
+const COMMITS_URL = `https://api.github.com/repos/Mattsson717/project-business-site/commits{/sha}`
+const projectsContainer = document.getElementById('projects')
+const profileContainer = document.getElementById('profile')
+
+// Profile
+const getProfile = () => {
+    fetch(PROFILE_URL)
+    .then(response => response.json())
+    .then(data => {
+        console.log('Profile:',data)
+        profileContainer.innerHTML += `
+        <img src=${data.avatar_url}>
+        <h2>${data.login}</h2>`
+    })
+}
+getProfile()
+
+// Repositories
+const getRepos = () => {
+    fetch(REPOS_URL)
+    .then(response => response.json())
+    .then(json => {
+        console.log('json:',json)
+        const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-'))
+        forkedRepos.forEach(repo => projectsContainer.innerHTML += 
+            `<h3>${repo.name}</h3>
+             <h3>${repo.default_branch}</h3>
+             <h4>Latest push: ${repo.pushed_at.slice(0, 10)} - ${repo.pushed_at.slice(11,16)}</h4>
+             <a href="${repo.html_url}">Github adress</a>
+             `)
+        drawChart(forkedRepos.length)   
+    })
+}
+getRepos()
+
+const getCommits = () => {
+    fetch(COMMITS_URL)
+    .then(response => response.json())
+    .then(json => {
+        console.log('Commits:',json)
+    })
+}
+getCommits()
@@ -1,3 +1,7 @@
 body {
-  background: #FFECE9;
-}
+  background: #ffece9;
+}
+
+.chart {
+  width: 200px;
+}