Technigo · Kaliine · Sep 26, 2021 · Sep 28, 2021 · Sep 29, 2021 · Sep 30, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,8 @@
 # GitHub Tracker
+The project was to create a place to keep track of the GitHub repos that I'm using at Technigo Boot Camp. For this project I continued practicing my JavaScript and API skills.
 
-Replace this readme with your own information about your project.
+# The problem
+I decided to make the site look similar to my real GitHub site. The first part of fetching my repositories and my user info was pretty straight-forward. However, there were some tricky parts and some new solutions to learn as well, for example how to get the pull requests/commit messages. During this project I also learnt about dynamic ID's and the difference between 'find' and 'filter' when fetching data. If I had more time I would have liked to dive deeper into the API and fetch more data, for example languages.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## 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?
-
-## 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.
+# View it live
+https://kaliine-github-tracker.netlify.app/
diff --git a/code/README.md b/code/README.md
@@ -0,0 +1,13 @@
+# GitHub Tracker
+The project was to create a place to keep track of the GitHub repos that I'm using at Technigo Boot Camp. For this project I continued practicing my JavaScript and API skills.
+
+
+## The problem
+I started the project after going through all the study material. And I decided to make the site look similar to my real GitHub site. The first part of fetching my repositories and my user info was pretty straight-forward. However, there were some tricky parts and some new solutions to learn as well. The code coachers lectures for this project were very helpful and helped me solved the parts where I got stuck, for example how to get the pull requests/commit messages. From the lectures I also learned about dynamic ID's and the difference between 'find' and 'filter' when fetching data.
+If I had more time I would have liked to dive deeper into the API and fetch more data, for example languages.
+
+## View it live
+https://kaliine-github-tracker.netlify.app/
+
+
+
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,33 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+//Invoke the drawChart function to connect the two JS files
+const drawChart = (amount) => {
+
+const config = {
+    type: 'doughnut',
+    data: {
+        labels: [
+          'Projects completed',
+          'Projects left',  
+        ],
+
+        datasets: [{
+          label: 'My First Dataset',
+          data: [amount, 20-amount],
+          backgroundColor: [
+            'rgb(255, 153, 51)',
+            'rgb(65, 132, 228)'
+          ],
+          hoverOffset: 4
+        }]
+      },
+  };
+
+
+  //Present the chart in the browser
+const myChart = new Chart(ctx, config)
+}
+
+//'rgb(205, 217, 229)' white/greyish color for label text
diff --git a/code/github-logo.png b/code/github-logo.png
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,46 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project GitHub Tracker</title>
+  <title>GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <link rel ="icon" href="https://avatars.githubusercontent.com/u/80845418?v=4" type="image"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap" rel="stylesheet">
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header class="header">
+    <img class="github-icon" src="./github-logo.png" alt="github icon"/>
+    <h1 class="main-title">GitHub Tracker</h1>
+  </header>
 
+  <div class="line"> </div>
+
+  <section class="main-section">
+
+  <div class="userinfo">
+    <p id="profilepic"></p>
+    <div class="name-box">
+    <p class="userid" id="username"></p>
+    <p class="real-name">Karoline Mann</p>
+  </div>
+  </div>
+
+
+  <div id="projectscontainer"></div>
+
+</section>
+
   <!-- This will be used to draw the chart 👇 -->
+  <div class="chart-section">
   <canvas id="chart"></canvas>
+  </div>
+
+
+  <footer class="footer">
+    <p class="footer-text">Made by Karoline Mann during Technigo Boot Camp, 2021</p>
+  </footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,103 @@
+const username = document.getElementById('username')
+const profilepic = document.getElementById('profilepic')
+const projectContainer = document.getElementById('projectscontainer')
+
+
+//fetch github userinfo
+const API_USER_KALIINE = 'https://api.github.com/users/kaliine'
+fetch (API_USER_KALIINE)
+    .then((response) => {
+        return response.json()
+    })
+    .then ((json) => {
+        username.innerHTML = json.login //display username
+        profilepic.innerHTML += `<img width="150" src="https://avatars.githubusercontent.com/u/80845418?v=4" class="user-img" alt="profilepic" />` //display profile pic
+    })
+
+
+
+//fetch all repos
+const REPOS_URL = 'https://api.github.com/users/Kaliine/repos'
+
+const getRepos = () => {
+fetch (REPOS_URL)
+    .then((response) => response.json())
+    .then(data => {
+        //filter out the ones that are forked and starting with "project-"
+        const technigoProjects = data.filter(repo => repo.fork === true && repo.name.startsWith('project-')) 
+
+
+        //display the data in the browser  
+        technigoProjects.forEach((repo => {
+            projectContainer.innerHTML += `
+            <div class="card">
+            <a class="card-title" href="${repo.html_url}">${repo.name}</a>
+            <p class="card-info">Default branch: ${repo.default_branch}</p>
+            <p class="card-info">Latest update: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p class="card-info" id="commit-${repo.name}">Number of commit messages: </p>
+            </div>`
+        }))
+
+    //Call the drawChart function. Connect the two JS files with my number of technigo repos.
+        drawChart(technigoProjects.length)
+
+    //Call the fetchPullRequestArray function
+    fetchPullRequestsArray(technigoProjects)
+
+
+    })
+
+}
+//fetch pullRequest for each repository from Technigos main repositories
+const fetchPullRequestsArray = (allRepositories) => {
+    allRepositories.forEach(repo => {
+        fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+        .then((res) => res.json())
+        .then((data) => {
+            //Find only the PR that I made by comparing pull.user.login with repo.owner.login
+        const myPullRequest = data.find((pull) => pull.user.login === repo.owner.login) //Use 'find' to present the data as an element instead of an array
+
+        console.log(myPullRequest)
+
+        // Detect if I have pull requests or not.
+				// If yes - call fetchCommits function
+				// If no - inform user that no pull request has been done yet
+        if (myPullRequest) {
+            fetchCommits(myPullRequest.commits_url, repo.name);
+
+            //3. You can also get the comments for each PR by calling another function with the review_comments_url as argument
+            /* getReview(myPullRequest.review_comments_url, repo.name); */
+
+        } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML = "No pull request yet";
+        }
+
+
+        })
+    })
+}
+
+
+//fetch number of commits
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((data) => {
+        document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+    })
+}
+
+
+
+
+
+//Call the getRepos function
+getRepos()
+
+
+
+  /* To do:
+    - review_comments_url
+    - A chart  */
+
+