Technigo · lisabergstrom · Feb 22, 2022 · Feb 23, 2022 · Feb 24, 2022 · Feb 25, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,14 @@
 # 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 project is to build a GitHub tracker to gather my Technigo repositories in order to practice JavaScript and API skills through GitHub API. 
+It contains some data about the repositories like commits, lastest push and so on.
 
 ## 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 struggeled a lot this week to get the API part. I had to watch other project to understand how to handle the commit part.
+When I finally was done I hade a bug that I couln´t find the solution for. I wrote the question at Stackowerflow. 
+The issue was ONE simple linebreak. 
 
 ## 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://lb-githubtracker.netlify.app/
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1 @@
+code/secret.js  
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,22 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
 //"Draw" the chart here 👇
+const drawChart = (amount) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Completed projects", "Projects left to build"],
+      datasets: [
+        {
+          label: "My Technigo projects",
+          data: [amount, 19 - amount],
+          backgroundColor: ["rgb(153,153,138)", "rgba(90, 112, 55, 0.1)"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const projectsChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,38 @@
 <!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>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=Open+Sans+Condensed:wght@300&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header class="title">
+      <h1>GITHUB TRACKER</h1>
+    </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <main class="main-container">
+      <div id="userProfile" class="user-profile"></div>
+      <section id="profile-container" class="profile-container"></section>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+      <section id="projects" class="projects-container"></section>
+
+      <!-- This will be used to draw the chart 👇 -->
+      <section class="chart-container">
+        <canvas id="chart" class="chart"></canvas>
+      </section>
+    </main>
+
+    <script src="./chart.js"></script>
+    <script src="./script.js"></script>
+    <script src="./secret.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,92 @@
+const username = "lisabergstrom";
+const API_REPOS = `https://api.github.com/users/${username}/repos`;
+const API_PROFILE = `https://api.github.com/users/${username}`;
+
+// T O K E N
+const options = {
+  method: "GET",
+  headers: {
+    Authorization: "API_KEY",
+  },
+};
+// D O M - S E L E C T O R S
+const userProfile = document.getElementById("userProfile");
+const projects = document.getElementById("projects");
+
+// P R O F I L E
+const fetchProfile = () => {
+  fetch(API_PROFILE, options)
+    .then((res) => res.json())
+    .then((data) => {
+      userProfile.innerHTML += `
+                <img src="${data.avatar_url}" class ="pic"></img>
+                <h2>${data.name} </h2>   
+                <h3><a href="https://github.com/lisabergstrom">${data.login}</a></h3>
+
+`;
+    });
+};
+
+// R E P O S
+const fetchRepositories = () => {
+  fetch(API_REPOS, options)
+    .then((res) => res.json())
+    .then((data) => {
+      console.log(data);
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project-")
+      );
+
+      forkedRepos.forEach((repo) => {
+        projects.innerHTML += `
+  <div class="repos">
+  <a href="${repo.html_url}">
+  <h3>${repo.name} <br> </h3>
+  <p> Latest push: ${new Date(repo.pushed_at).toLocaleString("sv-SE", {
+    dateStyle: "short",
+  })} </p>
+  <p> Deafult branch: ${repo.default_branch} <p/>
+  <p id="commit-${repo.name}">Commits:</p>
+  </a>
+  </div>
+  `;
+      });
+
+      fetchPullRequestsArray(forkedRepos);
+
+      drawChart(forkedRepos.length);
+    });
+};
+
+const fetchPullRequestsArray = (allRepositories) => {
+  allRepositories.forEach((repo) => {
+    const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+
+    fetch(PULL_URL, options)
+      .then((res) => res.json())
+      .then((data) => {
+        const myPullRequest = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        console.log(myPullRequest);
+
+        if (myPullRequest) {
+          fetchCommits(myPullRequest.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            "No pull requests made";
+        }
+      });
+  });
+};
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl, options)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+fetchProfile();
+fetchRepositories();
diff --git a/code/secret.js b/code/secret.js
@@ -0,0 +1 @@
+const API_KEY = "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";
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,94 @@
 body {
-  background: #FFECE9;
-}
+  background: lightgray;
+  font-family: "Open Sans Condensed", sans-serif;
+  background-image: url("https://images.pexels.com/photos/2512386/pexels-photo-2512386.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: #716d6a;
+}
+.title {
+  font-size: 1.6rem;
+  text-align: center;
+}
+img {
+  border-radius: 50%;
+  max-width: 20vw;
+  filter: grayscale(100%);
+}
+h2 {
+  font-size: 2rem;
+  margin: 0;
+  padding-top: 10px;
+}
+
+h3 {
+  margin: 0%;
+}
+.user-profile {
+  display: grid;
+  justify-items: center;
+}
+
+.main-container .title {
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: center;
+}
+
+.projects-container {
+  display: grid;
+  grid-column: span 6;
+  grid-gap: 2rem;
+  margin: 50px auto;
+}
+
+.chart-container {
+  display: grid;
+  grid-column: span 6;
+  justify-items: center;
+  margin: 5% auto;
+  width: 300px;
+}
+
+.repos {
+  text-align: center;
+  padding: 1rem;
+  box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2);
+  transform: translateY(0);
+  position: relative;
+}
+
+.repos a,
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  filter: none;
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
+  color: #95dcbe;
+}
+
+@media (min-width: 768px) {
+  .profile-container {
+    grid-column: span 3;
+  }
+
+  .chart-container {
+    grid-column: span 3;
+  }
+
+  .projects-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .projects-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		const API_KEY = "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";