Technigo · Rephili · Sep 29, 2021 · Oct 1, 2021 · Oct 1, 2021 · Oct 3, 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.
+The assignment this week was to create a page that keeps track of the repositories that I have forked and worked on during the Technigo Bootcamp. The project allowed me to get a deeper knowledge of how to use API:s.
 
 ## 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 out by breaking down the project in smaller pieces and focused on fetching all the API:s. It was sometimes hard to understand where to place the different chunks of code in Javascript, for example where to call the functions and grasp how everything should be connected. If I had more time I would add some more information to the repos, for example display the commit messages and/or the comments from each pull request.
 
 ## 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://github-tracker-rephili.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,21 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+//DOM-selector
+const ctx = document.getElementById("chart").getContext("2d");
 
-//"Draw" the chart here 👇
+//The chart
+const drawChart = (number) => {
+  const config = {
+    type: "pie",
+    data: {
+      labels: ["Finished projects", "Projects left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [number, 19 - number],
+          backgroundColor: ["#ee6c4d", "#3d5a80"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,42 @@
 <!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" />
-</head>
-<body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <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>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <!-- The hero image and user info -->
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <div class="heroimage">
+      <h1>GitHub Tracker</h1>
+      <div id="userProfile"></div>
+    </div>
+    <hr />
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <!-- The projects/repositories -->
+
+    <div class="logowrapper">
+      <img
+        class="githublogo"
+        src="https://cdn-icons-png.flaticon.com/512/2111/2111612.png"
+        alt="githublogo"
+      />
+      <h2>Projects:</h2>
+    </div>
+
+    <main id="projects" class="projectscontainer"></main>
+
+    <!-- The chart -->
+    <hr />
+    <div class="chart">
+      <canvas id="chart"></canvas>
+    </div>
+
+    <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,86 @@
+const user = "Rephili";
+const REPOS_URL = `https://api.github.com/users/${user}/repos`;
+const projectsContainer = document.getElementById("projects");
+const USER_URL = `https://api.github.com/users/${user}`;
+const userContainer = document.getElementById("userProfile");
+
+//User information: profile image, name and location
+const userProfile = () => {
+  fetch(USER_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      userContainer.innerHTML = `
+      <div class="userinfo">
+      <div class="userimg"><img src="${data.avatar_url}"/></div>
+      <h2>${data.name}</h2>
+      <a class="userlink" href="https://github.com/Rephili">@${data.login}</a>
+      <p>📍 ${data.location}</p>
+      </div>
+      </div>`;
+    });
+};
+
+userProfile();
+
+//Function to fetch all my repositories and then filter out the forked projects from Technigo
+const fetchRepos = () => {
+  fetch(REPOS_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      const technigoProjects = data.filter(
+        (repo) => repo.name.startsWith("project-") && repo.fork
+      );
+      drawChart(technigoProjects.length);
+
+      // InnerHTML to make all the projects and the info show on the page
+      technigoProjects.forEach((repo) => {
+        projectsContainer.innerHTML += `
+                <div class="projectinfo">
+                    <a class="repolink" href="${repo.html_url}">${repo.name}</a>
+                    <p>Default branch for this project is ${
+                      repo.default_branch
+                    }</p>
+                    <p>Latest push: ${new Date(
+                      repo.pushed_at
+                    ).toDateString()}</p>
+                    <p id="commit-${repo.name}">Amount of Commits: </p>
+                </div>
+            `;
+      });
+
+      fetchPullRequests(technigoProjects);
+    });
+};
+
+//Function to get the pull requests for each project
+const fetchPullRequests = (allRepositories) => {
+  allRepositories.forEach((repo) => {
+    const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+
+    fetch(PULL_URL)
+      .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 =
+            "No pull request yet or group project";
+        }
+      });
+  });
+};
+
+//Function to get the amount of commits
+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,189 @@
 body {
-  background: #FFECE9;
-}
+  background: #e0fbfc;
+  font-family: "Sora", sans-serif;
+  color: #293241;
+  margin: 0;
+}
+
+.githublogo {
+  width: 30px;
+  height: 30px;
+}
+
+h1 {
+  text-align: center;
+}
+
+.userinfo {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.userimg img {
+  border-radius: 50%;
+  width: 300px;
+  height: 300px;
+  object-fit: cover;
+}
+
+.userlink {
+  text-decoration: none;
+  color: #293241;
+}
+
+.userlink:visited {
+  text-decoration: none;
+  color: #293241;
+}
+
+.userlink:hover {
+  text-decoration: underline;
+  color: #ee6c4d;
+}
+
+hr {
+  width: 200px;
+  height: 1px;
+  background-color: #3d5a80;
+  border-radius: 5px;
+  line-height: 2px;
+  opacity: 0.85;
+}
+
+.logowrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+h2 {
+  display: inline;
+  margin-left: 5px;
+}
+
+.projectscontainer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.projectinfo {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background-color: #88b7d3;
+  width: 90%;
+  height: 200px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+  border-radius: 10px;
+  opacity: 0.85;
+  transition: 0.5s;
+}
+
+.projectinfo:nth-child(6) {
+  margin-bottom: 40px;
+}
+
+.repolink {
+  text-decoration: none;
+  color: #293241;
+  font-weight: bold;
+}
+
+.repolink:visited {
+  text-decoration: none;
+  color: #293241;
+}
+
+.repolink:hover {
+  text-decoration: underline;
+  color: #ee6c4d;
+}
+
+.chart {
+  width: 80%;
+  margin-bottom: 40px;
+  margin: auto;
+}
+
+@media (min-width: 768px) {
+  .projectscontainer {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-top: 20px;
+  }
+
+  .projectinfo:nth-last-child(-n + 2) {
+    margin-bottom: 60px;
+  }
+
+  .projectinfo {
+    width: 40%;
+  }
+
+  .chart {
+    width: 50%;
+  }
+}
+
+@media (min-width: 992px) {
+  hr {
+    display: none;
+  }
+
+  .heroimage {
+    background: linear-gradient(rgba(44, 40, 27, 0.39), rgba(41, 37, 25, 0.76)),
+      url("https://images.unsplash.com/photo-1607970669494-309137683be5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80");
+    height: 65vh;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border: transparent;
+    position: relative;
+  }
+
+  h1 {
+    color: #ee6c4d;
+    text-align: start;
+    display: inline;
+    letter-spacing: 2px;
+    text-shadow: 1px 1px 1px #293241;
+    position: absolute;
+    margin-left: 20px;
+  }
+
+  .userinfo {
+    color: #ee6c4d;
+  }
+
+  .userlink {
+    color: #ee6c4d;
+  }
+
+  .userlink:visited {
+    color: #ee6c4d;
+  }
+
+  .userlink:hover {
+    color: #88b7d3;
+  }
+
+  .userinfo {
+    padding-top: 30px;
+  }
+
+  .projectinfo:hover {
+    transform: scale(1.04);
+  }
+
+  .chart {
+    width: 30%;
+  }
+}