Technigo · isabellwastfelt · Feb 22, 2022 · Feb 25, 2022 · Feb 25, 2022 · Feb 25, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+// .gitignore file
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+
+# Ignore Mac system files
+.DS_store
+
+# Ignore node_modules folder
+node_modules
+
+# Ignore all text files
+*.txt
+
+# Ignore files related to API keys
+.env
+
+# misc
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# other
+code/secret.js 
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.
+Making a GitHub tracker over our repositories using 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?
+I had a lot of problems with getting the API token to work, but managed to solve that with some help. It was a bit hard to know what fetch to put where and so on, but it is working, and I'm happy about the outcome. It was a fun project. If I had more time, I would fetch more information about my repos. 
 
 ## 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://nervous-archimedes-33769b.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,37 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("myChart").getContext("2d");
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Finished projects", "Projects to do"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 19 - amount],
+          backgroundColor: ["#ff95cf", "#a7c0b8"],
+
+          hoverOffset: 4,
+        },
+      ],
+    },
+    options: {
+      layout: {
+        padding: 25,
+      },
+      plugins: {
+        legend: {
+          labels: {
+            font: {
+              size: 15,
+            },
+          },
+        },
+      },
+    },
+  };
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/images/background-img.jpg b/code/images/background-img.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,45 @@
 <!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>
+    <link rel="stylesheet" href="./style.css" />
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <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&family=Oswald:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+  <body>
+    <header class="header">
+      <h1>GitHub Tracker</h1>
+    </header>
+
+    <section class="grid-container">
+      <div class="profile" id="profile"></div>
+
+      <section class="repos-area">
+        <h2>Technigo Projects:</h2>
+        <div class="project-grid" id="projects"></div>
+      </section>
+
+      <div class="chart">
+        <canvas id="myChart"></canvas>
+      </div>
+    </section>
+
+    <script src="./secret.js"></script>
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+
+    <footer>
+      <h5>- GitHub Tracker made by Isabell Wästfelt -</h5>
+    </footer>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,84 @@
+const USER = "isabellwastfelt";
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const PROFILE_URL = `https://api.github.com/users/${USER}`;
+
+const projectContainer = document.getElementById("projects");
+const profileInfo = document.getElementById("profile");
+
+const options = {
+  method: "GET",
+  headers: {
+    Authorization: `token ${API_TOKEN}`,
+  },
+};
+
+const getProfile = () => {
+  fetch(PROFILE_URL, options)
+    .then((res) => res.json())
+    .then((data) => {
+      console.log(data);
+      profileInfo.innerHTML += `
+        <img src=${data.avatar_url}' alt='image of isabellwastfelt at GitHub'>
+        <h3><a href="${data.html_url}">${data.login}</a></h3>
+        `;
+    });
+};
+getProfile(); //invoking
+
+const getRepos = () => {
+  fetch(REPOS_URL, options)
+    .then((res) => res.json())
+    .then((data) => {
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project")
+      );
+
+      forkedRepos.forEach(
+        (repo) =>
+          (projectContainer.innerHTML += `
+            <div class='card'>
+                <a href="${repo.html_url}"><h3>${repo.name}</h3></a>
+                <p> Default branch: ${repo.default_branch}</p>
+                <p> Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+                <p id='commit-${repo.name}'> Number of commits: </p>
+            </div>
+        `)
+      );
+
+      getPullRequests(forkedRepos);
+      drawChart(forkedRepos.length);
+    });
+};
+
+getRepos();
+
+// Pull requests for each project
+const getPullRequests = (repos) => {
+  repos.forEach((repo) => {
+    const PULLREQUEST_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+    fetch(PULLREQUEST_URL, options)
+      .then((res) => res.json())
+      .then((pull) => {
+        const myPullRequest = pull.find(
+          (pull) => pull.user.login === repo.owner.login
+        );
+
+        // If pull request done by user, getCommits function is invoked
+        if (myPullRequest) {
+          getCommits(myPullRequest.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            "No pull request done by user";
+        }
+      });
+  });
+};
+
+const getCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((commit) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML +=
+        commit.length;
+    });
+};
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,121 @@
+* {
+  box-sizing: border-box;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 body {
-  background: #FFECE9;
-}
+  background-image: url(./images/background-img.jpg);
+  font-family: "Open Sans Condensed", sans-serif;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  max-height: 100vh;
+}
+
+h1 {
+  font-family: "Oswald", sans-serif;
+  color: rgb(255, 149, 207);
+  font-size: 56px;
+  font-weight: bolder;
+  text-shadow: 1px 1px 2px rgb(0, 0, 0);
+}
+
+h2 {
+  color: white;
+  letter-spacing: 1px;
+}
+
+h3,
+a {
+  color: rgb(255, 149, 207);
+  font-size: 20px;
+}
+
+h5 {
+  color: #ffffff;
+  font-size: 15px;
+  font-style: italic;
+}
+
+p {
+  color: black;
+}
+
+img {
+  border: 1px solid;
+  border-color: rgb(255, 212, 253);
+  border-radius: 50%;
+  height: 200px;
+  width: 200px;
+}
+
+.card {
+  background-color: #ffffff;
+  width: 275px;
+  padding-top: 25px;
+  padding-bottom: 20px;
+  margin: auto;
+  border-radius: 7px;
+  opacity: 90%;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.chart {
+  width: 250px;
+  height: 250px;
+  margin: auto;
+  padding-top: 50px;
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 1.5rem;
+}
+
+footer {
+  padding: 10px;
+  margin-top: 20px;
+}
+
+/* --- MEDIA QUERY --- */
+
+/* Tablet */
+
+@media (min-width: 768px) {
+  .project-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .chart {
+    width: 300px;
+    height: 300px;
+  }
+}
+
+/* Big screen */
+
+@media (min-width: 769px) {
+  .project-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .chart {
+    width: 350px;
+    height: 350px;
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "chart.js": "^3.7.1"
+  }
+}