Technigo · IdaAspen · Sep 27, 2021 · Sep 27, 2021 · Sep 28, 2021 · Sep 28, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+node_modules
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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 place to keep track of the GitHub repos that I use at Technigo. The focus was JavaScript and API.
 
 ## 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?
+In the beginning of the project it felt like there were a lot of API fetches that needed to be done and. It was also hard to understand were to place, and where to call the different functions. I also struggled with writing short and clean code and sometimes ended up with writing several codes extra.
+
+The solution were to scale down the project and do small chunks at a time. Create a TODO and check off everything during the work progress.
 
 ## 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://project-github-tracker-aspen.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,35 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
-//"Draw" the chart here 👇
+//Chart text, design and labels
+
+const drawChart = (amount) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Finished projects", "Projects left"],
+      datasets: [
+        {
+          label: "Repos chart",
+          data: [amount, 19 - amount],
+          backgroundColor: ["rgb(211,66,193)", "rgb(255,152,91)"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: {
+          position: "bottom",
+          labels: {
+            font: {
+              size: 18,
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const repoChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,31 @@
 <!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" />
+  <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=Sora:wght@300;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js">
+  </script>
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header>
+    <h1>GitHub Tracker</h1>
+  </header>
+  <section id="user-container"></section>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <main id="projects-container">
+  </main>
+  <div class="chart-container"><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,93 @@
+const USER = "IdaAspen";
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const USER_INFO_URL = `https://api.github.com/users/${USER}`;
+
+const projectsContainer = document.getElementById("projects-container");
+const userContainer = document.getElementById("user-container");
+
+//get username and profile picture
+const getUserInfo = () => {
+  fetch(USER_INFO_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      userContainer.innerHTML = `
+        <div class="user-card">
+        <img src="https://avatars.githubusercontent.com/u/80949028?v=4"
+        alt="Profile picture"><h2>User name: <a href="https://github.com/IdaAspen">${data.name}</a></h2>
+        <p>${data.bio}</p>
+        </div>
+        `;
+    });
+};
+
+/////////////////////// GET REPOS /////////////////////////////////////////
+//Get all repos w/ details
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      let forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project-")
+      );
+      //Sorts filtered repos after dates
+      forkedRepos.sort(
+        (a, b) => new Date(b.created_at) - new Date(a.created_at)
+      );
+      forkedRepos = forkedRepos.reverse();
+
+      forkedRepos.forEach(
+        (repo) =>
+          (projectsContainer.innerHTML += `
+            <div class="project-card">
+              <h3><a href=${repo.html_url} target="_blank">${repo.name.replace(
+            "-",
+            " "
+          )}</a></h3>
+              <p>Most recent push: ${repo.pushed_at.substring(0, 10)}</p>
+              <p>Name of default branch: ${repo.default_branch}</p>
+              <p id="commit-${repo.name}">No of commits: </p>
+            </div>`),
+
+        //pass along filtered repos as an argument when invoke getPullRequest
+        getPullRequests(forkedRepos)
+      );
+      drawChart(forkedRepos.length);
+    });
+};
+
+/////////////////////// GET PR /////////////////////////////////////////
+//Get all PRs for each project
+const getPullRequests = (repos) => {
+  repos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const myPulls = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        if (myPulls) {
+          fetchCommits(myPulls.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            "No pull request done ✖️";
+        }
+      });
+  });
+};
+
+/////////////////////// GET COMMITS /////////////////////////////////////////
+//Get commits for each project
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((response) => response.json())
+    .then((data) => {
+      //creating dynamic id
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+//Invoke the functions
+getUserInfo();
+getRepos();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,164 @@
+html,
 body {
-  background: #FFECE9;
-}
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  background: #f7dd74;
+  font-family: "Sora", sans-serif;
+  color: black;
+}
+
+h1 {
+  color: #d342c1;
+  font-size: 2em;
+}
+h2 {
+  font-size: 1.4em;
+}
+
+h3 {
+  font-weight: 300;
+  margin: 0.5em;
+  text-transform: capitalize;
+}
+p {
+  font-weight: 300;
+  margin: 0 0.2em 0;
+}
+
+a {
+  position: relative;
+  color: #000;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #000;
+}
+
+a::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  transform: scaleX(0);
+  transform-origin: top left;
+  transition: transform 0.3s ease;
+}
+
+a:hover::before {
+  transform: scaleX(1);
+}
+
+a {
+  color: black;
+}
+
+header {
+  display: grid;
+  justify-content: center;
+}
+
+.chart-container {
+  margin: 2% 20%;
+}
+
+.user-card {
+  display: grid;
+  justify-items: center;
+  margin: 1em;
+}
+
+.user-card img {
+  height: 200px;
+  object-fit: contain;
+  border-radius: 50%;
+  filter: grayscale(50%);
+}
+
+#projects-container {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
+  /* width: 100%; */
+  column-gap: 1rem;
+  row-gap: 1rem;
+}
+
+.project-card {
+  width: 90%;
+  background-color: #fff;
+  /* background-color: #bfbfbf; */
+  opacity: 0.4;
+  padding: 0 1em 1em 1em;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.project-card:hover {
+  opacity: 0.8;
+}
+
+/* ---- tablet ----*/
+@media (min-width: 668px) {
+  h1 {
+    font-size: 4em;
+  }
+
+  h2 {
+    font-size: 2.5em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  p {
+    font-size: 1.4em;
+  }
+
+  #projects-container {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
+    padding: 3em;
+  }
+  .project-card {
+    width: 93%;
+  }
+
+  .user-card img {
+    height: 300px;
+  }
+}
+
+/* ---- desktop ----*/
+@media (min-width: 1024px) {
+  h1 {
+    font-size: 6em;
+  }
+
+  h2 {
+    font-size: 3em;
+  }
+
+  h3 {
+    font-size: 2em;
+  }
+
+  #projects-container {
+    grid-template-columns: repeat(auto-fit, minmax(450px, 3fr));
+    padding: 4em;
+  }
+
+  .user-card img {
+    height: 400px;
+  }
+  .chart-container {
+    margin: 2% 30%;
+    /* STÖRRE TEXT */
+  }
+}