Technigo · loulunds · Sep 27, 2021 · Sep 28, 2021 · Sep 29, 2021 · Sep 29, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
-{
-  "liveServer.settings.port": 5505
+{
+  "liveServer.settings.port": 5505
 }
diff --git a/README.md b/README.md
@@ -1,13 +1,19 @@
-# 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 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?
-
-## 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.
+# GitHub Tracker
+
+This project makes use of Github API. The user can fetch data to view their own or other Technigo students' profile. The project show the user profile information like name, username and location. It can also show the repositories forked from Technigo's Github account.
+
+Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+
+## The problem
+
+Data is fetched from [Github's API](https://docs.github.com/en/rest) by fetching through different URLs with different queries necessary to locate the data needed. Data is also filtered by `.filter()` method or `.find()` in order to get only the repositories forked from Technigo and with pull requests done by the user.
+
+The website has my profile as default but users can search for their own profile. Their repositories from Technigo are the ones that are going to be shown.
+
+A chart showing the number of Technigo projects and some other information are shown. The chart will be re-rendered every time a new profile is searched.
+
+I also added a light mode that will turn the background white and the font color dark and readable. Click on the lightbulb to see this.
+
+## View it live
+
+[Lousanne's Github Tracker](https://happy-noether-88c607.netlify.app/)
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,59 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
-
-//"Draw" the chart here 👇
+//DOM-selector for the canvas 👇
+const ctx = document.getElementById("chart").getContext("2d");
+
+const plugin = {
+  id: "custom_canvas_background_color",
+  beforeDraw: (chart) => {
+    const ctx = chart.canvas.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-over";
+    ctx.fillStyle = "rgb(189,219,227)";
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  },
+};
+
+//"Draw" the chart here 👇
+const drawChart = (amount) => {
+  const config = {
+    type: "polarArea",
+    data: {
+      labels: [
+        "Finished Projects",
+        "Projects Left",
+        "Individual Projects",
+        "Team Projects",
+      ],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 19 - amount, amount - 4, amount - 2],
+          backgroundColor: [
+            "rgb(255, 99, 132)",
+            "rgb(75, 192, 192)",
+            "rgb(247,226,0)",
+            "rgb(84,81,185)",
+          ],
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          text: "My Github Repositories",
+          color: "#138",
+          font: {
+            size: 25,
+          },
+        },
+      },
+      responsive: true,
+      borderColor: "#d32",
+      color: "#138",
+    },
+    plugins: [plugin],
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/images/GitHub-Mark-120px-plus.png b/code/images/GitHub-Mark-120px-plus.png
diff --git a/code/images/GitHub-Mark-32px.png b/code/images/GitHub-Mark-32px.png
diff --git a/code/images/GitHub-Mark-64px.png b/code/images/GitHub-Mark-64px.png
diff --git a/code/images/GitHub-Mark-Light-120px-plus.png b/code/images/GitHub-Mark-Light-120px-plus.png
diff --git a/code/images/GitHub-Mark-Light-32px.png b/code/images/GitHub-Mark-Light-32px.png
diff --git a/code/images/GitHub-Mark-Light-64px.png b/code/images/GitHub-Mark-Light-64px.png
diff --git a/code/images/GitHub_Logo.png b/code/images/GitHub_Logo.png
diff --git a/code/images/GitHub_Logo_White.png b/code/images/GitHub_Logo_White.png
diff --git a/code/images/book.png b/code/images/book.png
diff --git a/code/images/menu (1).png b/code/images/menu (1).png
diff --git a/code/images/mylogo.png b/code/images/mylogo.png
diff --git a/code/images/notification.png b/code/images/notification.png
diff --git a/code/images/pin-map.png b/code/images/pin-map.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,89 @@
-<!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>
+<!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" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+
+  <body>
+    <nav>
+      <!-- mobile nav -->
+      <div class="nav-mobile">
+        <img
+          id="nav-sub"
+          class="nav-menu"
+          src="images/menu (1).png"
+          alt="menu"
+        />
+        <div class="nav-links">
+          <input
+            id="navInputMobile"
+            class="nav-input"
+            type="text"
+            placeholder="Search"
+          />
+          <a href="#">Pulls</a>
+          <a href="#">Issues</a>
+          <a href="#">Marketplace</a>
+          <a href="#">Explore</a>
+        </div>
+        <a class="nav-icon" href="https://github.com/" target="_blank"
+          ><img src="images/GitHub-Mark-Light-32px.png" alt="github"
+        /></a>
+
+        <button id="btn-light-nav">
+          <img class="nav-notif" src="images/notification.png" alt="bell" />
+        </button>
+      </div>
+
+      <!-- desktop nav -->
+      <div class="nav-desktop">
+        <a class="nav-icon" href="https://github.com/" target="_blank"
+          ><img
+            id="nav-github-img"
+            src="images/GitHub-Mark-Light-32px.png"
+            alt="github"
+        /></a>
+        <input
+          id="navInput"
+          class="nav-input"
+          type="text"
+          placeholder="Search"
+        />
+        <div class="nav-a">
+          <a href="#">Pulls</a>
+          <a href="#">Issues</a>
+          <a href="#">Marketplace</a>
+          <a href="#">Explore</a>
+        </div>
+        <button id="btn-light">
+          <img class="nav-notif" src="images/notification.png" alt="bell" />
+        </button>
+      </div>
+    </nav>
+
+    <!-- main content -->
+    <main>
+      <!-- where the user info is -->
+      <section id="userInfo"></section>
+
+      <!-- where the repos are -->
+      <section id="projects">
+        <h2 class="project-title">My Project Repositories with Technigo</h2>
+        <div id="project-box"></div>
+      </section>
+    </main>
+
+    <!-- This will be used to draw the chart 👇 -->
+    <section class="canvas-box"><canvas id="chart"></canvas></section>
+
+    <footer><img src="images/mylogo.png" alt="logo" /></footer>
+
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>