Technigo · sieurin · Feb 23, 2022 · Feb 25, 2022 · Feb 25, 2022 · Feb 26, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # 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 week's project was to build a site that keep track of all my repositories that I have created during my time at Technigo. The main purpose of this project was to display information about the projects that I have built, using GitHub 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 started off by fetching all of my repositories and data from the GitHub API. Once I had all the data I needed I dispayed it on the page. Then I started to do a quick scetch in Figma on how I wanted to style the page and then tried to come as close as possible. Of course with the mind set of mobile first.
+
+I struggled a lot with the API token this week, and I had a hard time to publish the site on Netlify.
+
+If I had more time, or less trouble with token-issues, I would add a sort function and a search field. And also I had investigated more time with the styling, as always :)
 
 ## 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://spontaneous-moxie-b26bd5.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1 @@
+token.js
diff --git a/code/android-chrome-192x192.png b/code/android-chrome-192x192.png
diff --git a/code/android-chrome-512x512.png b/code/android-chrome-512x512.png
diff --git a/code/apple-touch-icon.png b/code/apple-touch-icon.png
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,36 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+// font family & color for the chart
+Chart.defaults.font.family = "Roboto, sans-serif";
+Chart.defaults.color = "#333";
 
-//"Draw" the chart here 👇
+// DOM-selector for the chart
+const ctx = document.getElementById("chart").getContext("2d");
+
+// function to draw the chart, with the "completed projects" as an argument
+const renderChart = (projects) => {
+  const data = {
+    labels: ["completed projects", "not yet completed projects"],
+    datasets: [
+      {
+        data: [projects, 19 - projects],
+        backgroundColor: ["#2FC5EE", "#FF1E00"],
+        borderColor: "#FEFBF3",
+        hoverOffset: 8,
+      },
+    ],
+  };
+
+  const config = {
+    type: "doughnut",
+    data: data,
+    options: {
+      font: {
+        size: 10,
+      },
+      layout: {
+        padding: 15,
+      },
+    },
+  };
+
+  new Chart(ctx, config);
+};
diff --git a/code/favicon-16x16.png b/code/favicon-16x16.png
diff --git a/code/favicon-32x32.png b/code/favicon-32x32.png
diff --git a/code/favicon.ico b/code/favicon.ico
diff --git a/code/icons8-star-48.png b/code/icons8-star-48.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,56 @@
 <!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>
-
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+  <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 to stylesheet -->
+    <link rel="stylesheet" href="./style.css" />
+    <!-- Link to google font -->
+    <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=Playfair+Display&family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Link to favicon -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./favicon-16x16.png"
+    />
+    <link rel="manifest" href="/site.webmanifest" />
+    <!-- Link to chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <div id="header"></div>
+    <h2 class="project-header">my github projects</h2>
+    <main id="projects"></main>
+    <h2 class="process-header">bootcamp status</h2>
+    <!-- Chart sektion -->
+    <div class="chart-wrapper" id="chartWrapper">
+      <canvas id="chart"></canvas>
+    </div>
+    <footer>
+      <p class="footer-text">© Åsa Sieurin</p>
+    </footer>
+    <!-- My scripts -->
+    <script src="./chart.js"></script>
+    <script src="./token.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,96 @@
+// DOM-selectors
+const chart = document.getElementById("chart");
+const projects = document.getElementById("projects");
+const header = document.getElementById("header");
+const API_REPOS = "https://api.github.com/users/sieurin/repos";
+const API_USER = "https://api.github.com/users/sieurin";
+
+// my token
+const options = {
+  method: "GET",
+  headers: {
+    Authorization: TOKEN,
+  },
+};
+
+// fetch all information for the user-API and print them out
+fetch(API_USER, options)
+  .then((res) => res.json())
+
+  .then((json) => {
+    header.innerHTML += `
+		<div class="header">
+			<img src="${json.avatar_url}" alt= "avatar">
+			<p class="user-name">${json.login}</p>
+		</div>
+		<div class="circles">
+			<div class="circle one"></div>
+			<div class="circle two"></div>
+			<div class="circle three"></div>
+			<div class="circle four"></div>
+			<div class="circle five"></div>
+			<div class="circle six"></div>
+		</div>
+		<p class="bio"><span>HI!</span> ${json.bio}</p>
+		`;
+  });
+
+// fetch all information for each repo and print them out
+fetch(API_REPOS, options)
+  .then((res) => res.json())
+
+  .then((json) => {
+    const filterProjects = json.filter((project) => {
+      return project.fork === true && project.name.startsWith("project");
+    });
+
+    renderChart(filterProjects.length);
+
+    filterProjects.forEach((project) => {
+      // print out the project name, branch, latest push, url
+      projects.innerHTML += `
+			<div class="projects" id=${project.name}>
+				<div class="project-info">
+					<div class="projects-left">
+						<p class="pushed-at">last updated <br>${new Date(
+              project.pushed_at
+            ).toLocaleDateString("en-GB", options)}</p>
+					</div>
+					<p class="project-name">${project.name
+            .replace("project-", "")
+            .replace("-", " ")}</p>
+					<div class="projects-right">
+						<p class="branch-name">${project.default_branch} branch</p>
+						<a class="project-url" href="${
+              project.html_url
+            }" alt="link to git" target="_blank">link to repo</a>
+					</div>
+				</div>
+			</div>
+			`;
+
+      // fetch all the pull requests and print them out
+      const reponame = project.name;
+      const API_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`;
+      fetch(API_PR, options)
+        .then((res) => res.json())
+
+        .then((json) => {
+          const filteredPR = json.filter((PR) => {
+            return PR.user.login === "sieurin";
+          });
+
+          const singleProject = document.getElementById(project.name);
+          singleProject.innerHTML += `<p class="pull-requests">Pull requests: ${filteredPR.length}</p>`;
+
+          // fetch all commits and print them out
+          const API_COMMITS = `https://api.github.com/repos/sieurin/${reponame}/commits`;
+          fetch(API_COMMITS, options)
+            .then((res) => res.json())
+
+            .then((json) => {
+              singleProject.innerHTML += `<p class="commits">Commits: ${json.length}</p>`;
+            });
+        });
+    });
+  });
diff --git a/code/site.webmanifest b/code/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}