chart positioned center, nr of commits showed in panel, small fixes with position absolute

Author: mathildakarlsson

code/index.html

@@ -22,9 +22,11 @@ <h2 class="user-header">USER</h2>
     <h2 class="projects-header">PROJECTS</h2>
     <div id="projects-container" class="projects-container"></div>
     <h2 class="chart-header">PROGRESS</h2>
-    <div class="chart">
-      <canvas id="chart"></canvas>
-    </div>
+    <section class="chart-container">
+      <div class="chart">
+        <canvas id="chart"></canvas>
+      </div>
+    </section>
   </main>
 
   <footer>

code/script.js

@@ -41,13 +41,14 @@ const getRepos = () => {
         const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
         filteredRepos.forEach((repo) => {
             projectsContainer.innerHTML += `
-            <div class="repos" id="${repo.name}">
+            <div class="repos">
                 <button class="project-name">${repo.name}</button>
                 <div class="panel">
                     <a href="${repo.html_url}">
                     <p>Link to repo</p></a>
                     <p>Branch: ${repo.default_branch}</p>
                     <p>Main language: ${repo.language}</p>
+                    <p id="commit-${repo.name}"> Number of commits: </p>
                     <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
                 </div>
             </div>
@@ -98,9 +99,10 @@ const getPullRequests = (filteredRepos) => {
         const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
         console.log(myPullRequests)
         if (myPullRequests) {
-            getCommits(myPullRequests.commits_url, repo.name)
+            getCommits(myPullRequests.commits_url, `${repo.name}`)
          } else {
-
+            document.getElementById(`${repo.name}`).innerHTML += 
+            `commits made by group partner`
         //conditionals to use for invoking step 4?
         // if (myPullRequests) {
         //     document.getElementById(`${repo.name}`).innerHTML += 
@@ -130,12 +132,9 @@ const getCommits = (URL, repoName) => {
         .then(res => res.json())
         .then(data => {
             // let numberOfCommits = data.length
-            document.getElementById(`${repo.name}`).innerHTML += `
-            <p> Number of commits: ${data.length}</p>
-            `
-        console.log(data.length)
+            document.getElementById(`commit-${repo.name}`).innerHTML += data.length
         })
-    }
+        }
     })
 }
     // const getCommits = (URL, repoName) => {
@@ -248,5 +247,5 @@ const getCommits = (URL, repoName) => {
 //     }
 // })
 // }
-// getUser() //invoking step 1
+
 

code/style.css

@@ -138,6 +138,11 @@ a {
   margin-left: 2.5em;
 }
 
+.chart-container {
+  display: flex;
+  justify-content: center;
+}
+
 footer {
   height: 15vh;
   width: 100vw;
@@ -182,14 +187,14 @@ footer {
   .github-tracker {
     position: absolute;
     top: -30%;
-    left: 25%;
+    left: 35%;
     font-size: 50px;
   }
 
   .github-logo {
     position: absolute;
     top: 11%;
-    left: 27%;
+    left: 37%;
     border-radius: 1em;
     height: 3em;
   }
@@ -198,7 +203,7 @@ footer {
     display: block;
     position: absolute;
     top: 29%;
-    right: 63%;
+    right: 67%;
     font-size: 25px;
     letter-spacing: .5em;
     font-weight: 100;
@@ -215,15 +220,15 @@ footer {
   .user-name {
     position: absolute;
     top: 80%;
-    right: 60%;
+    right: 65%;
     font-size: 25px;
   }
 
   .chart-header {
     font-size: 25px;
     position: absolute;
     top: 20%;
-    right: 15%;
+    right: 18%;
   }
 
   .chart {