Technigo · NinaAlejandra · Oct 3, 2021 · Oct 3, 2021 · Oct 3, 2021 · Oct 4, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git 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.
+https://githubtracker-ninaalejandra.netlify.app/
diff --git a/code/TODO-list: 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 x
+8) style x
diff --git 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)
+}
diff --git 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
@@ -0,0 +1,70 @@
+//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>`  
+    })
+}
+
+  //Fetches
+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) {
+    return new Date(a.created_at) - new Date(b.created_at)
+}
+
+//invoking functions
+getUser()
+getRepos()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,84 @@
 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;
+  cursor: pointer;
+}
+
+h4 {
+  font-size: 25px;
+  margin: 5px;
+  font-weight: bolder;
+}
+
+a {
+  font-size: 18px;
+  color: #218380;
+}
+
+a:hover {
+  color:#74a09f;
+}
+
+@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;
+  }
+}