Technigo · vrill · Oct 16, 2021 · Oct 16, 2021 · Dec 28, 2021 · Dec 28, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # 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 create a tracker of our GitHub repositories, using their API. Flesh it out with profile name & avatar, commits per repo and a chart among a few more things. 
 
 ## 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?
+We had to fetch the data from the GitHub API, parse it and present it on our page. With a lot of repositories and objects in general, we had to apply a few filters in order to find the ones we want to use.
+
+The Rate Limit of the API (60 per hour) had me frustrated more than once. However, it was good practice to be more thorough when coding; to rely less on the Live Server output showing you small changes. DevTools is a good alternative to try iterative type of improvements.
+
+Had the Rate Limit not been such a time sink, I would've spent more time pulling different types of data in & presenting it, sorting of the projects, and styling.
 
 ## 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.
+Cheers https://jolly-kirch-bd4816.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,36 @@
-//DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
+const technigoProjects = 21
 
-//"Draw" the chart here 👇
+const drawBarChart = (repos) => {
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: [
+                'Projects to do',
+                'Finished projects'
+            ],
+            datasets: [
+                {
+                    data: [
+                        technigoProjects - repos.length,
+                        repos.length,
+                    ],
+                    backgroundColor: [
+                        '#d5a7b6',
+                        '#5c7fe9'
+                    ]
+                }
+            ]
+        },
+        options: {
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        color: 'rgb(0, 0, 0)'
+                    }
+                }
+            },
+        },
+    })
+}
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <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>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <title>Project Four: Ziko's GitHub Tracker</title>
+  <meta name="desciption" content="Technigo Week 7: GitHub Tracker. Fourth individual project: Dig deeper into API's and start with unit testing.">
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <header>
+    <h1>Ziko's GitHub Tracker</h1>
+  </header>
+
+  <main>
+
+    <section id="profile-wrapper"></section>
+
+    <h2>"Project" repos:</h2>
+    <section id="projects"></section>
+
+    <section id="chart-wrapper">
+      <canvas id="chart"></canvas>
+    </section>
+
+  </main>
+
+  <footer>
+    <p>
+        &copy <a href="https://github.com/vrill">vrill</a>. Class of Technigo F/W 2021.
+    </p>
+  </footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,77 @@
+let USER = 'vrill'
+
+const USER_URL = `https://api.github.com/users/${USER}`
+const USER_REPOS_URL = `${USER_URL}/repos`
+
+const profileContainer = document.getElementById('profile-wrapper')
+const projectsContainer = document.getElementById('projects')
+
+const fetchProfile = () => {
+    fetch(USER_URL)
+        .then((response) => response.json())
+        .then((data) => {
+            profileContainer.innerHTML += `
+                <div id="profile">
+                    <figure class="profile-image">
+                        <a href="${USER_URL}">
+                            <img src="${data.avatar_url}" alt="Avatar of ${data.login}">
+                        </a>
+                    </figure>
+                    <h3>${data.login}</h3>
+                    <p>Amount of public repositories: ${data.public_repos}.</p>
+                </div>
+            `
+        })
+}
+fetchProfile()
+
+const fetchRepos = () => {
+    fetch(USER_REPOS_URL)
+        .then((response) => response.json())
+        .then((data) => {
+            const technigoRepos = data.filter(
+                (repo) => repo.name.includes('project-') && repo.fork
+            )
+            technigoRepos.forEach((repo) => {
+                projectsContainer.innerHTML += `
+                    <div class="projects-card" id="${repo.id}">
+                        <h3><a href="${repo.html_url}"><b>${repo.name}</b></a>  <strong>(${repo.default_branch})</strong></h3>
+                        <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+                        <p id="commit_${repo.name}">Number of commits: </p>
+                        <p>Main language: ${repo.language}</p>
+                    </div>
+                `
+            })
+            fetchPullRequestsArray(technigoRepos)
+            drawBarChart(technigoRepos)
+        })
+}
+
+    /* This URL only seems to work for open pull requests, closed ones do not show up. */
+    const fetchPullRequestsArray = (allRepositories) => {
+        allRepositories.forEach((repo) => {
+            fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+                .then((response) => response.json())
+                .then((data) => {
+                    const myPullRequest = data.find(
+                        (pull) => pull.user.login === repo.owner.login
+                    )
+                    if (myPullRequest) {
+                        fetchCommits(myPullRequest.commits_url, repo.name)
+                    } else {
+                        document.getElementById(`commit_${repo.name}`)
+                        .innerHTML = 'Pull request unavailable, or closed.';
+                    }
+                })
+        })
+    }
+
+        const fetchCommits = (myCommitsUrl, myRepoName) => {
+            fetch(myCommitsUrl)
+                .then((response) => response.json())
+                .then((data) => {
+                    document.getElementById(`commit_${myRepoName}`).innerHTML += data.length
+                })
+        }
+
+fetchRepos()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,98 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito');
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  background: #FFECE9;
+  background: rgb(130, 60, 60);
+  font-family: 'Nunito', sans-serif;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 1.4rem;
+}
+
+h2 {
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+h3 {
+  text-align: center;
+  background-color: rgba(130, 60, 60, 0.2);
+  border-radius: 0.4rem;
+  margin-top: 0;
+  padding: 1rem 0rem;
+}
+
+#profile-wrapper {
+  display: block;
+  text-align: center;
+}
+
+#profile {
+  display: inline-block;
+  justify-content: center;
+}
+
+.profile-image {
+  display: inline-block;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  border: 2px solid whitesmoke;
+  overflow: hidden;
+  margin-bottom: 0;
+}
+
+.profile-image > a > img {
+  width: 100%;
+}
+
+#projects {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.projects-card {
+  width: 320px;
+  background-color: #f2f2f2;
+  box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem;
+  border-radius: 0.4rem;
+  padding: 1rem;
+}
+
+#chart-wrapper {
+  width: 90vw;
+  max-width: 512px;
+  margin: 0 auto;
+}
+
+header {
+  position: sticky;
+  top: 0;
+}
+
+footer {
+  margin-top: 1rem;
+}
+
+header, footer {
+  background-color: #f2f2f2;
+  text-align: center;
+  padding: 1rem 0rem;
+  width: 100%;
+}
+
+footer, a {
+  color: rgb(130, 60, 60)
+}
+
+footer > p > a {
+  text-decoration: none;
 }