final touches, cleaned the code and removed console logs

Author: Camilla Hallberg

code/index.html

@@ -27,17 +27,16 @@ <h1>GitHub Tracker</h1>
 
   <section class="user-data" id="userData"></section>
 
-  <!-- behöver eventuellt inte klassen här-->
-  <section class="project-headline"> 
+  <section>
     <h2>&#128071;&#127997; Technigo Projects &#128071;&#127997;</h2>
   </section>
 
   <section class="projects-wrapper" id="projects"></section>
 
   <!-- This will be used to draw the chart 👇 -->
-  <div id="canvas" class="chart-container">
+  <section class="chart-container" id="canvas">
     <canvas id="chart"></canvas>
-  </div>
+  </section>
 
   <footer class="made-by">
       <p>Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 <span style='font-size:16px;'>&#129302;</span></p>

code/script.js

@@ -1,61 +1,59 @@
-// const userData = document.getElementsById('userData')
+// DOM selectors
+const projectsContainer = document.getElementById('projects')
+
 const username = 'CamillaHallberg'
 let reponame = ''
 
+// Authentication
 const API_TOKEN = TOKEN || process.env.API_KEY;
-
-// API's
-const API_USER = `https://api.github.com/users/${username}`
-const API_URL_REPO = `https://api.github.com/users/${username}/repos`
-
-const projectsContainer = document.getElementById('projects')
-
 const options = {
     method: 'GET',
     headers: {
         Authorization: `${API_TOKEN}`
     }
 }
+// API's
+const API_USER = `https://api.github.com/users/${username}`
+const API_URL_REPO = `https://api.github.com/users/${username}/repos`
 
+// Function to fetch my user data
 const getUser = () => {
-fetch(API_USER, options)
-.then(res => res.json())
-.then(user => {
-    console.log(user, 'my user');
+    fetch(API_USER, options)
+    .then(res => res.json())
+    .then(user => {
         userData.innerHTML = `
         <div class="avatar">
-        <img class="img" src="${user.avatar_url}" alt="user image">
+            <img class="img" src="${user.avatar_url}" alt="user image">
         </div>
         <div class="info">
-        <h3>${user.login}</h3>
-        <h4>${user.bio}</h4>
-        <h4>Location: ${user.location}</h4>
+            <h3>${user.login}</h3>
+            <h4>${user.bio}</h4>
+            <h4>Location: ${user.location}</h4>
         </div>`
     })
 }
 getUser()
 
+// Function to fetch my repositories
 const getRepos = () => {
     fetch(API_URL_REPO, options)
     .then(res => res.json())
     .then(data => {
-        console.log(data, 'my repos')
-
-        // Filtering to get only my forked repos from Technigo
+        // Filter to get only my forked repos from Technigo
         const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-'))
-        console.log(forkedRepos, 'forked repos')
-
+ 
         forkedRepos.forEach((repo) => {
             // Creating unique ID for each forked repo
             let projectID = repo.id
-            console.log(repo)
+            
             projectsContainer.innerHTML += `
                 <div class="projects-card" id="${projectID}">
                     <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>
-                </div>
-            `
+                </div>`
+            
+            // Invoking function to get the number of commits for the projects    
             getCommits(repo, projectID)
         })
         getPullRequests(forkedRepos)
@@ -84,6 +82,4 @@ const getCommits = (projectsContainer, projectID) => {
     })
 }
 
-getRepos()
-
-// Kom ihåg att städa i koden + ta bort alla loggar 
+getRepos() 

code/style.css

@@ -65,7 +65,11 @@ a {
   color: black;
 }
 
-/* --- FOOTER --- */
+.chart-container {
+  padding: 20px;
+}
+
+/* --- Footer --- */
 .made-by {
   font-family: 'Shippori Antique B1', sans-serif;
   font-size: 12px;
@@ -147,4 +151,13 @@ a {
   h2 {
     font-size: 48px;
   }
+
+  .chart-container {
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 600px;
+    padding: 100px;
+  }
 }