small changes to all files

Author: Camilla Hallberg

code/index.html

@@ -20,9 +20,9 @@ <h1>GitHub Tracker</h1>
   <section class="userData" id="userData"></section>
 
   <main id="projects">
-    <h2>&#128071;&#127997; Projects &#128071;&#127997;</h2>
+    <h2>&#128071;&#127997; Technigo Projects &#128071;&#127997;</h2>
   </main>
-  
+
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart"></canvas>
 

code/script.js

@@ -25,8 +25,10 @@ fetch(API_USER, options)
 .then(user => {
     console.log(user, 'my user');
         userData.innerHTML = `
-        <div class="info">
+        <div class="avatar">
         <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>
@@ -48,39 +50,41 @@ const getRepos = () => {
         forkedRepos.forEach((repo) => {
             projectsContainer.innerHTML += `
                 <div class="projects-card" id="${repo.id}">
-                    <h3><a href="${repo.html_url}">${repo.name}</a> - ${repo.default_branch}</h3>
+                    <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>
                     <p id="commit_${repo.name}">Number of commits:</p>
                     <p>Main language: ${repo.language}</p>
                 </div>
             `
         })
-
         getPullRequests(forkedRepos)
     })
 }
 
+getRepos()
+
 const getPullRequests = (forkedRepos) => {
     forkedRepos.forEach(repo => {
         fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options)
         .then(res => res.json())
         .then(data => {
             const commits = document.getElementById(`commit-${repo.name}`)
 
-            const pulls = data.find((pull) => pull.user.login === repo.owner.login)
+            const pulls = data.find((pull) => pull.user.login === repo.owner.login);
 
             getCommits(pulls.commits_url, repo.name)
             console.log(pulls.commits_url)
         })
     })
 }
 
-const getCommits = (myCommitsURL, myReposName) => {
-    fetch(myCommitsURL, options)
-    .then(res => res.json())
-    .then(data => {
-        document.getElementById(`commit-${myReposName}`).innerHTML += data.length
+const getCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl, options)
+    .then((res) => {
+        return res.json()
     })
-}
-
-getRepos()
+    .then((data) => {
+        document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+    })
+}

code/style.css

@@ -1,5 +1,5 @@
 body {
-  background: linear-gradient(floralwhite, rosybrown);
+  background: linear-gradient(rosybrown, floralwhite);
 }
 
 h1 {
@@ -15,6 +15,7 @@ h2 {
   font-size: 32px;
   color:mediumpurple;
   text-align: center;
+  cursor: pointer;
 }
 
 h3 {
@@ -29,22 +30,38 @@ h4 {
   color: whitesmoke;
 }
 
-.info {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-}
-
 .img {
   width: 96px;
   border-radius: 50%;
   border: 8px solid floralwhite;
 }
 
+.info {
+  text-align: center;
+}
+
+.projects-card {
+  background: linen;
+  border: 6px solid hotpink;
+  margin: 12px;
+  padding: 12px;
+  font-size: 12px;
+  font-family: 'Shippori Antique B1', sans-serif;
+  text-align: center;
+}
+
+.default-branch {
+  font-family: 'Shizuru', cursive;
+}
+
+a {
+  color: black;
+}
+
 /* Footer Styling */
 .made-by {
   font-family: 'Shippori Antique B1', sans-serif;
   font-size: 12px;
-  color:lavenderblush;
+  color: #694E4E;
   text-align: center;
 }