user prodile data extracted from GitHub

Author: Kara Howes

code/chart.js

@@ -15,8 +15,8 @@ const drawChart = (amount) =>{
           label: 'My First Dataset',
           data: [amount , 20-amount],
           backgroundColor: [
-            'rgb(255, 99, 132)',
-            'rgb(54, 162, 235)'
+            'rgb(255, 192, 203)',
+            'rgb(135,190,231)'
 
           ],
           hoverOffset: 4

code/index.html

@@ -23,20 +23,8 @@
     </section>
 
   </header>
-  <section class="profile-container">
-    <div class="profile-wrapper">
-      <div class="profile-photo">
-        <img src="./assets/KH_profile.jpeg" alt="Profile Picture of User">
-      </div>
-      <div class="profile-username">
-        <h1>Kara</h1>
-        <h2>KaraHowes</h1>
-      </div>
-    </div>
-    <div class="profile-text">
-      <p> New to coding, a little more experienced at life. PhD in Chemistry (UK), Post-doc at ETH Zürich. Always looking for new opportunities to learn and grow</p>
-    </div>
-
+  <section class="profile-container" id="profile-container">
+  
   </section>
 
   <main id="projects" class="projects-container">
@@ -48,6 +36,14 @@ <h2>KaraHowes</h1>
 
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart" class="canvas-chart"></canvas>
+<footer>
+  <div class="footer">
+    <img src="./assets/GitHub-Mark-120px-plus.png" alt="">
+    <p> A GitHub tracker project by Kara Howes </p>
+  </div>
+
+
+</footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>

code/script.js

@@ -1,9 +1,33 @@
 const USER = 'KaraHowes'
+const USER_URL = `https://api.github.com/users/${USER}`
 const repoURL = `https://api.github.com/users/${USER}/repos`
+const profileContainer = document.getElementById('profile-container')
 const projectsContainer = document.getElementById('projects')
 const cardsContainer = document.getElementById('cards-container')
+const profileText = document.getElementById('profile-text')
+const profileImage = document.getElementById('profile-image') 
 
-
+const userProfile = () => {
+  fetch (USER_URL)
+  .then (response => response.json())
+  .then (data => {
+    console.log ('profile', data)
+    profileContainer.innerHTML+= `
+    <div class="profile-wrapper" id="profile-wrapper">
+    <div class="profile-photo" id=" profile-image">
+      <img src="https://avatars.githubusercontent.com/u/70952682?v=4" alt="Profile Picture of User" >
+    </div>
+    <div class="profile-username" id ="profile-username">
+      <h1>${data.name}</h1>
+      <h2>${data.login}</h1>
+    </div>
+  </div>
+  <div class="profile-text" id="profile-text">
+    <p> ${data.bio}</p>
+  </div>`
+  })
+}
+userProfile()
 
 const getRepos = ()=>{
     // This function fetches the data from the Githug API
@@ -62,9 +86,14 @@ const getPullRequests = (forkedProjects) => {
         .then((data) => {
             //console.log(data)
             const myPullRequests = data.find(pull => pull.user.login === repo.owner.login)
-            //console.log('howdy', myPullRequests)
-          
-            getCommits(myPullRequests.commits_url, repo.name) 
+           
+          if (myPullRequests) {
+            getCommits(myPullRequests.commits_url, repo.name)
+          } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML =
+            'Sorry, no pull request done yet'
+          }
+             
         })
 
 
@@ -77,7 +106,7 @@ const getCommits = (myCommitsUrl, myRepoName) => {
   .then((response) => response.json())
   .then ((data) => {
 
-    console.log(data)
+    //console.log(data)
     document.getElementById(`commit-${myRepoName}`).innerHTML+=data.length
 
   }

code/style.css

@@ -50,7 +50,8 @@ p {
 
 .header img {
   width: 250px;
-  margin: 0 auto 5px auto;
+  margin: 0 auto 20px auto;
+  padding-bottom: 10px;
   display: block;
 
 }
@@ -101,14 +102,14 @@ margin: 0 auto;
   width: 90%;
   background-color: white;
   border: 1px solid #DADBDB;
-  box-shadow: 1px 1px 3px rgba(0,0,0,.25);
+  box-shadow: 2px 2px 4px rgba(0,0,0,.25);
   margin: 20px auto;
 }
 
 .card-projectname {
   margin: 20px 0 0 0;
   padding: 20px 0 0 0;
-  border-bottom: 3px solid pink;
+  border-bottom: 3px solid rgb(255, 192, 203);
 
 }
 .updated, .branch, .URL, .number-commits, .blank-line, .times-forked {
@@ -140,4 +141,19 @@ margin: 0 auto;
 .canvas-chart{
   max-width: 500px;
 
+}
+
+.footer{
+  width: 100%;
+  border-top: 1px solid #B2B3B4;
+  justify-items: center;
+  margin-top: 50px;
+  text-align: center;
+ 
+}
+
+.footer img{
+  width: 50px;
+  margin: 20px auto;
+  display: block;
 }