Technigo · Skrosen · Sep 29, 2021 · Oct 1, 2021 · Oct 1, 2021 · Oct 2, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+This assignment was to create a GitHub tracker using API's from GitHub to display information about forked projects done during Technigo Boot Camp. 
 
 ## 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?
+I started working with the blue requirements and after I had completed the tasks on blue level I continued working on the styling in CSS to make the page look like GitHub. However, if I had more time I would work more with getting the page more similar to GitHub and also adding some of the red and black requirements.
 
 ## 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://linneawilhelmsson-week7-github-tracker.netlify.app/
diff --git a/chart.js b/chart.js
@@ -0,0 +1,25 @@
+//DOM-selector for the canvas
+const ctx = document.getElementById('chart').getContext('2d')
+
+// Chart showing completed projects and how many there is left
+const repoChart = (amount) => {
+    const config = {
+        type: 'bar',
+        data: {
+            labels: [
+                'Projects done',
+                'Projects left',
+            ],
+            datasets: [{
+                label: 'Technigo projects',
+                data: [amount, 19-amount],
+                backgroundColor: [
+                    'rgb(63, 185, 79)',
+                    '#8B949E',
+                ],
+                hoverOffset: 4
+            }]
+        },
+    };        
+    const repositoryChart = new Chart(ctx, config);
+}
diff --git a/code/chart.js b/code/chart.js
diff --git a/code/index.html b/code/index.html
diff --git a/code/script.js b/code/script.js
diff --git a/code/style.css b/code/style.css
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!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>
+  <script 
+  defer 
+  src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" 
+  integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" 
+  crossorigin="anonymous">
+</script>
+</head>
+<body>
+  <header>
+    <a href="https://github.com/"><i class="fab fa-github fa-3x"></i></a>
+  </header>
+
+  <aside id="profile-info" class="profile"></aside>
+  <div class="repo-chart">
+    <canvas id="chart" ></canvas>
+  </div>
+
+
+  <main id="projects" class="project-container">
+    <h2>Technigo repositories:</h2>
+  </main> 
+
+  <script src="./script.js"></script>
+  <script src="./chart.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,75 @@
+const repoContainer = document.getElementById('projects')
+const projectInfo = document.getElementById('profile-info')
+
+const USER = 'Skrosen'
+const USER_INFO = `https://api.github.com/users/${USER}`
+const USER_REPOS = `https://api.github.com/users/${USER}/repos`
+
+// Profile information
+const profileInfo = () => {
+    fetch(USER_INFO)
+    .then(res => res.json())
+    .then(userProfile => {
+        projectInfo.innerHTML += /* html */`
+            <img src="${userProfile.avatar_url}" class="profile-img" alt="Profile picture"/>
+            <div class="profile-div">
+                <a href="https://github.com/Skrosen"><h3 class="username">${userProfile.name}</h3></a>
+                <a href="https://github.com/Skrosen"><p class="login">${userProfile.login}</p></a>
+            </div>
+        `
+    })
+}
+profileInfo()
+
+// Function that filters out the repos starting with 'project-' to only show technigo projects
+const getRepos = () => {
+    fetch(USER_REPOS)
+    .then(res => res.json())
+    .then(repos => {
+        const forkedRepos = repos.filter (repo => repo.fork && repo.name.startsWith('project-')) 
+
+        forkedRepos.forEach(repo => {repoContainer.innerHTML += /* html */ `
+        <div class="repo-div">
+        <a href="${repo.html_url}" class="repo-a">${repo.name}</a>
+        <p class="repo-p">Default branch: ${repo.default_branch}</p>
+        <p class="repo-p">Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+        <p id="commit-${repo.name}" class="repo-p">Number of commits: </p>
+        </div>
+        `
+     })
+        fetchPullRequest(forkedRepos)
+        repoChart(forkedRepos.length)
+    })
+}
+
+// Function that shows the pull requests that has been done by the user to Technigo projects
+const fetchPullRequest = (allRepositories) => {
+    allRepositories.forEach((repo) => {
+        fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+        .then(res => res.json())
+        .then((info) => {
+            // console.log(`Mother repo for pull request ${repo.name}`, info)
+            //find instead of filter because filter will keep in array even if only one element
+            const myPullRequest = info.find( 
+                (pull) => pull.user.login === repo.owner.login
+            )
+            if (myPullRequest) {
+                fetchCommits(myPullRequest.commits_url, repo.name)
+            } else {
+                document.getElementById(`commit-${repo.name}`).innerHTML = /* html */ `
+                No pulls from this user yet 🚫
+                `
+            }
+        })
+    })
+}
+
+// Function that counts and returns the amount of commits for the pull requests done in function fetchPullRequests
+const fetchCommits = (myCommitsUrl, repo) => {
+    fetch(myCommitsUrl)
+    .then(res => res.json())
+    .then((info) => {
+        document.getElementById(`commit-${repo}`).innerHTML += info.length
+    })
+}
+getRepos()
diff --git a/style.css b/style.css
@@ -0,0 +1,159 @@
+/* mobile first styling */
+body {
+  background: #161b22;
+  display: grid;
+  color: #f0f6fc;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; 
+}
+
+header {
+  background: #161b22;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-top: -0.5rem;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  height: 100%;
+  min-width: 100%;
+}
+
+header a {
+  color: #f0f6fc;
+}
+
+header a:hover {
+  color: #30363d;
+}
+
+.profile {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: center;
+}
+
+.profile-img {
+  display: inline-flex;
+  grid-column: span 1;
+  width: 100%;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: #30363d;
+  border-width: 0.1rem;
+  margin: 0.5rem;
+}
+
+.profile-div {
+  display: inline;
+  align-items: center;
+  grid-column: span 5;
+  padding: 2rem;
+}
+
+.profile-div a{
+  text-decoration: none;
+}
+
+.username {
+  display: flex;
+  color: #f0f6fc;
+  font-size: x-large;
+  margin: auto;
+}
+
+.username:hover {
+  color: #30363d;
+}
+
+.login {
+  display: flex;
+  color: #8B949E;
+  font-size: large;
+  margin: auto;
+}
+
+.login:hover {
+  color: #30363d;
+}
+
+.repo-chart {
+  display: flex;
+  width: 20rem;
+  margin: 1rem;
+}
+
+.project-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin: 0.5rem;
+}
+
+.project-container h2 {
+  grid-column: span 4;
+  display: flex;
+  color: #8B949E;
+  font-size: large;
+  margin-bottom: 0.5rem;
+  justify-content: center;
+}
+
+.repo-div {
+  display: grid;
+  grid-column: span 4;
+  color: #8B949E;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  border-radius: 5px;
+  border-width: 0.1rem;
+  border-color: #30363d;
+  border-style: solid;
+}
+
+.repo-a {
+  color: #388bfd;
+  text-decoration: none;
+  padding-bottom: 0.5rem;
+}
+
+.repo-p {
+  margin: 0px;
+}
+
+
+/* styling for tablet */
+@media (min-width:668px) {
+  body {
+    background: #0d1117;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  header {
+    visibility: visible;
+    grid-column: span 4;
+  }
+
+  .profile {
+    grid-column: span 3;
+  }
+
+  .repo-chart {
+    grid-column: span 1;
+  }
+
+  .project-container {
+    grid-column: span 4;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .repo-div {
+    grid-column: span 2;
+  }
+}
+
+/* specific styling for desktop */
+@media (min-width:1025px) {
+  .project-container {
+    grid-column: span 4;
+  }
+}