From 763f814930490e38fefa168f2f093fb4f6d75c77 Mon Sep 17 00:00:00 2001
From: NinaAlejandra <Niinaa___@hotmail.com>
Date: Mon, 4 Oct 2021 01:10:23 +0200
Subject: [PATCH 1/5] first draft without media queries

---
 .DS_Store       | Bin 0 -> 6148 bytes
 README.md       |  10 +++++--
 code/TODO-list: |  10 +++++++
 code/chart.js   |  22 ++++++++++++++
 code/index.html |  24 +++++++++++----
 code/script.js  |  77 ++++++++++++++++++++++++++++++++++++++++++++++++
 code/style.css  |  60 ++++++++++++++++++++++++++++++++++++-
 7 files changed, 194 insertions(+), 9 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 code/TODO-list:

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..d9320da6357fa48d697c4030ab5045d419dcf25e
GIT binary patch
literal 6148
zcmeHK&2G~`5S~o~tb-6aRH8>;xTRH6{?tPyH>8IikPxogLqV-wN7Rz*trCX_LXckr
zUV`V~33wd%W_OAD16PR9j5Pbr&d#j8-&(sKB2xWH)+1^Yk%lrh0yMu79%sEF4ex0J
z70<C(nA5Z{Df&F2$nrD5d)K5>GL+Hq+WzfeY~zO&yO2d(Ivrp5eg2kS6#2O7cE78}
zO7qt3J6gAN>t5?kd}gL`l~j{)KN%fy?`2Y*rQY5*rdZfXdXNvN$L-bUrmT{@9FA;q
zo(&Q5`Y<muGwqv6nT_o{u^Z4j(7|zgZ8qyYd(sKlH@ovrINRFncEZPxp3diie(<oj
zy?1i{{=@9!{L^Q*7YZM$mHQrl!50{d1-^?%Wns#<@Ns-VuV|NcXh1K38+1<DHLAWM
z>M~X6iU<S3fH1JU4EUo^-(B8Uls6Lwgn@s=0G|&blri#HJG4g!8e0MY`8U!EZ2RjE
z4A}vUJk}23fhd;>bg9ah7|K@;%B5pG^6|Apmrlw)8T0rjD_@}~UwEj{hLegMN-GQq
z16LVXaoslG|GR&#|F0%VPZ$se{woGla}W>uSdzb6Z!C`Q+7NmIW#PEm;UWcwy^0ab
eSMeIu3j84(z{q3m5FUv92v{1V5eEJ$13v*J4`-DC

literal 0
HcmV?d00001

diff --git a/README.md b/README.md
index 1613a3b0..9de943ac 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,17 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The assignment was to make a github-tracker, a page which shows your profile picture, username and information about your projects, pullrequests and commits. We also learned how to incorporate charts in our work. 
 
 ## The problem
 
 Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
 
+Fortunately I have a couple of people I study with, who help me a lot when I'm stuck. I started by watching the videos by our teachers, and then the recordings of our classes. This helped since I could rewind and watch again if something was unclear. I've also used StackOverflow for some guidance. 
+
+This week I've used a page to help me with the colorschemes for my page and this is the link: https://coolors.co/
+I've also learned how to do shading in css which was cool. Hopefully my javascript aha-moment is just a couple of weeks away!
+
+
 ## View it live
 
 Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
diff --git a/code/TODO-list: b/code/TODO-list:
new file mode 100644
index 00000000..5bfd57ee
--- /dev/null
+++ b/code/TODO-list:
@@ -0,0 +1,10 @@
+TODO-list:
+
+1) fetch the repos and console log them x
+2) get them in the browser x
+3) filter out the technigo repos x
+4) test chart library x
+5) add pullrequests x
+6) add profile pic x
+7) add commits 
+8) style
\ No newline at end of file
diff --git a/code/chart.js b/code/chart.js
index 92e85a30..d7949f90 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -2,3 +2,25 @@
 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: [
+            '#AD5D4E',
+            '#218380'
+        ],
+        hoverOffset: 4
+      }]
+    }, 
+  }
+
+  const myChart = new Chart(ctx, config)
+}
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index 2fb5e0ae..809c0c17 100644
--- a/code/index.html
+++ b/code/index.html
@@ -6,14 +6,28 @@
   <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>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@300&display=swap" rel="stylesheet">
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header>
+    <h1>GitHub Tracker</h1>
+  </header>
+  
+  <div class=profile id="profile">
+  </div>
+
+  <main class="Projects">
+    <h2 id="projects"></h2>
+    <list id="list"></list>
+  </main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <div class="chart-class">
+    <canvas id="chart"></canvas>
+  </div>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
diff --git a/code/script.js b/code/script.js
index e69de29b..68f30011 100644
--- a/code/script.js
+++ b/code/script.js
@@ -0,0 +1,77 @@
+//DOM-selectors
+const profileInfo = document.getElementById("profile")
+const list = document.getElementById("list")
+
+//Github
+const USER = 'NinaAlejandra'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const API_MY_PROFILE = 'https://api.github.com/users/NinaAlejandra'
+
+//User
+const getUser = () => {
+    fetch(API_MY_PROFILE)
+      .then((response) => response.json())
+        .then((data) => {
+              
+            
+        profileInfo.innerHTML = 
+            `<img src="https://github.com/NinaAlejandra.png" alt="Profile picture">
+            <h4> ${data.name}</h4>
+            <h4> <a href="${data.html_url}">${data.login}</a></h4>`
+            
+      })
+}
+
+  //Fetch
+const getRepos = () => {
+    fetch(REPOS_URL)
+    .then(response => response.json())
+    .then(data => {
+    
+        const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+        const forkedSortedRepos = forkedRepos.sort(sortingFunctionFromStackOverflow)
+        forkedSortedRepos.forEach(repo => list.innerHTML += `
+                    <div class="projects">
+                    <h3><a href="${repo.html_url}">${repo.name} 
+                    with default branch ${repo.default_branch}</h3></a>
+                    <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+                    <p id="pull-request-${repo.name}"></p>
+                    <p id="commits-${repo.name}"></p>
+                    </div>` )
+        drawChart(forkedSortedRepos.length)
+        fetchPullRequest(forkedSortedRepos)
+        addCommits(forkedSortedRepos)
+    })
+}
+
+const fetchPullRequest = (allRepos) => {
+    allRepos.forEach(repo => {
+        fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+        .then((res) => res.json())
+        .then((data) => { 
+            const myPullRequests = data.filter((pullRequest) => pullRequest.user.login === USER)
+            document.getElementById(`pull-request-${repo.name}`).innerHTML = `Pull Requests: ${myPullRequests.length}`
+        
+        })
+    })
+}
+
+
+
+const addCommits = (allRepos) => {
+    allRepos.forEach(repo => {
+        fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`)
+        .then((res) => res.json())
+        .then((data) => { 
+            document.getElementById(`commits-${repo.name}`).innerHTML = `commits: ${data.length}`
+        
+        })
+    })
+}
+
+function sortingFunctionFromStackOverflow(a, b) {
+    // https://stackoverflow.com/questions/10123953/how-to-sort-an-object-array-by-date-property
+    return new Date(a.created_at) - new Date(b.created_at)
+}
+getUser()
+getRepos()
\ No newline at end of file
diff --git a/code/style.css b/code/style.css
index 7c8ad447..60e69675 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,3 +1,61 @@
 body {
-  background: #FFECE9;
+  background: #F7D4BC;
+  font-family: 'Gemunu Libre', sans-serif;
+}
+header {
+text-align: center;
+
+font-size: 30px;
+}
+
+.profile {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  text-align:center;
+  color: #218380;
+  margin:auto;
+  width: 100%;
+  flex-direction: column;
+
+  
+}
+
+img {
+  border-radius: 50%;
+  width: 200px;
+  margin: 15px;
+  box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3);
+}
+
+p {
+  color: #AD5D4E;
+}
+
+.projects {
+  flex-direction: column;
+  display: block;
+  border-style: solid;
+  color: #AD5D4E;
+  margin: 5px;
+  text-align: center;
+}
+
+.chart-class {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+h4 {
+  font-size: 25px;
+  margin: 5px;
+  font-weight: bolder;
+}
+
+a {
+  font-size: 18px;
+  color: #218380;
 }
\ No newline at end of file

From 7fd0a641a7bbb56441ef1e35be652f2848cd2e23 Mon Sep 17 00:00:00 2001
From: NinaAlejandra <Niinaa___@hotmail.com>
Date: Mon, 4 Oct 2021 01:44:27 +0200
Subject: [PATCH 2/5] added media queries and updated readme

---
 README.md      |  2 +-
 code/script.js | 26 ++++++++++++--------------
 code/style.css | 33 ++++++++++++++++++++++++++-------
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 9de943ac..c091f403 100644
--- a/README.md
+++ b/README.md
@@ -14,4 +14,4 @@ I've also learned how to do shading in css which was cool. Hopefully my javascri
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://githubtracker-ninaalejandra.netlify.app/
\ No newline at end of file
diff --git a/code/script.js b/code/script.js
index 68f30011..21225ec5 100644
--- a/code/script.js
+++ b/code/script.js
@@ -17,12 +17,11 @@ const getUser = () => {
         profileInfo.innerHTML = 
             `<img src="https://github.com/NinaAlejandra.png" alt="Profile picture">
             <h4> ${data.name}</h4>
-            <h4> <a href="${data.html_url}">${data.login}</a></h4>`
-            
-      })
+            <h4> <a href="${data.html_url}">${data.login}</a></h4>`  
+    })
 }
 
-  //Fetch
+  //Fetches
 const getRepos = () => {
     fetch(REPOS_URL)
     .then(response => response.json())
@@ -31,13 +30,13 @@ const getRepos = () => {
         const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
         const forkedSortedRepos = forkedRepos.sort(sortingFunctionFromStackOverflow)
         forkedSortedRepos.forEach(repo => list.innerHTML += `
-                    <div class="projects">
-                    <h3><a href="${repo.html_url}">${repo.name} 
-                    with default branch ${repo.default_branch}</h3></a>
-                    <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
-                    <p id="pull-request-${repo.name}"></p>
-                    <p id="commits-${repo.name}"></p>
-                    </div>` )
+                <div class="projects">
+                 <h3><a href="${repo.html_url}">${repo.name} 
+                 with default branch ${repo.default_branch}</h3></a>
+                 <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+                 <p id="pull-request-${repo.name}"></p>
+                 <p id="commits-${repo.name}"></p>
+                </div>`)
         drawChart(forkedSortedRepos.length)
         fetchPullRequest(forkedSortedRepos)
         addCommits(forkedSortedRepos)
@@ -56,8 +55,6 @@ const fetchPullRequest = (allRepos) => {
     })
 }
 
-
-
 const addCommits = (allRepos) => {
     allRepos.forEach(repo => {
         fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`)
@@ -70,8 +67,9 @@ const addCommits = (allRepos) => {
 }
 
 function sortingFunctionFromStackOverflow(a, b) {
-    // https://stackoverflow.com/questions/10123953/how-to-sort-an-object-array-by-date-property
     return new Date(a.created_at) - new Date(b.created_at)
 }
+
+//invoking functions
 getUser()
 getRepos()
\ No newline at end of file
diff --git a/code/style.css b/code/style.css
index 60e69675..0b343338 100644
--- a/code/style.css
+++ b/code/style.css
@@ -2,10 +2,10 @@ body {
   background: #F7D4BC;
   font-family: 'Gemunu Libre', sans-serif;
 }
-header {
-text-align: center;
 
-font-size: 30px;
+header {
+  text-align: center;
+  font-size: 30px;
 }
 
 .profile {
@@ -16,9 +16,7 @@ font-size: 30px;
   color: #218380;
   margin:auto;
   width: 100%;
-  flex-direction: column;
-
-  
+  flex-direction: column;  
 }
 
 img {
@@ -58,4 +56,25 @@ h4 {
 a {
   font-size: 18px;
   color: #218380;
-}
\ No newline at end of file
+}
+
+@media (min-width: 668px){
+  main {
+    
+    text-align: center;
+    flex-direction: row;
+  }
+  
+  .projects {
+    display: inline-block;
+    text-align: center; 
+    padding: 5px;
+    width: 33%;
+    height: 50%;
+  }
+  
+  .chart-class {
+    width: 40%;
+    margin-top: 20px;
+  }
+}  
\ No newline at end of file

From 3af087f4a18eec92fdc5e8a5fec20d0424702320 Mon Sep 17 00:00:00 2001
From: NinaAlejandra <Niinaa___@hotmail.com>
Date: Mon, 4 Oct 2021 01:51:40 +0200
Subject: [PATCH 3/5] cleaning code

---
 code/style.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/code/style.css b/code/style.css
index 0b343338..9a622b60 100644
--- a/code/style.css
+++ b/code/style.css
@@ -45,6 +45,7 @@ p {
   align-items: center;
   justify-content: center;
   margin: auto;
+  cursor: pointer;
 }
 
 h4 {
@@ -58,9 +59,12 @@ a {
   color: #218380;
 }
 
+a:hover {
+  color:#74a09f;
+}
+
 @media (min-width: 668px){
   main {
-    
     text-align: center;
     flex-direction: row;
   }

From c7fa4705a84b822c53c93b2c910f90e7c645da5d Mon Sep 17 00:00:00 2001
From: NinaAlejandra <Niinaa___@hotmail.com>
Date: Mon, 4 Oct 2021 08:50:20 +0200
Subject: [PATCH 4/5] fixed typos

---
 code/TODO-list: | 4 ++--
 code/script.js  | 7 +------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/code/TODO-list: b/code/TODO-list:
index 5bfd57ee..3a90c866 100644
--- a/code/TODO-list:
+++ b/code/TODO-list:
@@ -6,5 +6,5 @@ TODO-list:
 4) test chart library x
 5) add pullrequests x
 6) add profile pic x
-7) add commits 
-8) style
\ No newline at end of file
+7) add commits x
+8) style x
\ No newline at end of file
diff --git a/code/script.js b/code/script.js
index 21225ec5..0bf94c4f 100644
--- a/code/script.js
+++ b/code/script.js
@@ -12,8 +12,6 @@ const getUser = () => {
     fetch(API_MY_PROFILE)
       .then((response) => response.json())
         .then((data) => {
-              
-            
         profileInfo.innerHTML = 
             `<img src="https://github.com/NinaAlejandra.png" alt="Profile picture">
             <h4> ${data.name}</h4>
@@ -26,7 +24,6 @@ const getRepos = () => {
     fetch(REPOS_URL)
     .then(response => response.json())
     .then(data => {
-    
         const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
         const forkedSortedRepos = forkedRepos.sort(sortingFunctionFromStackOverflow)
         forkedSortedRepos.forEach(repo => list.innerHTML += `
@@ -50,7 +47,6 @@ const fetchPullRequest = (allRepos) => {
         .then((data) => { 
             const myPullRequests = data.filter((pullRequest) => pullRequest.user.login === USER)
             document.getElementById(`pull-request-${repo.name}`).innerHTML = `Pull Requests: ${myPullRequests.length}`
-        
         })
     })
 }
@@ -60,8 +56,7 @@ const addCommits = (allRepos) => {
         fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`)
         .then((res) => res.json())
         .then((data) => { 
-            document.getElementById(`commits-${repo.name}`).innerHTML = `commits: ${data.length}`
-        
+            document.getElementById(`commits-${repo.name}`).innerHTML = `Commits: ${data.length}`
         })
     })
 }

From f685364ae9a39654b3123f6c50929a048d34e600 Mon Sep 17 00:00:00 2001
From: NinaAlejandra <Niinaa___@hotmail.com>
Date: Mon, 4 Oct 2021 08:59:22 +0200
Subject: [PATCH 5/5] added quotationmarks

---
 code/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/index.html b/code/index.html
index 809c0c17..2f531942 100644
--- a/code/index.html
+++ b/code/index.html
@@ -17,7 +17,7 @@
     <h1>GitHub Tracker</h1>
   </header>
   
-  <div class=profile id="profile">
+  <div class="profile" id="profile">
   </div>
 
   <main class="Projects">