Katie Wu

README.md

@@ -1,13 +1,16 @@
 # 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 assignment is about exploring more about API and JavaScript.
+We are suppose to create a GitHub Tracker, to keep track of our repos that we have created at Technigo.
+Throughout the Technigo boot camp (24 weeks) we will be doing 19 different projects.
 
 ## 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?
+When reading this week's project, I did not really know how to start with this assignment. It was a link to GitHub's own documentation and some example of different Endpoints we can use.
+We didn't get any particular design or style to get inspired by. So it took some time to think and plan on how to structure the data we get from GitHub. But it was quite nice to try to practice designing yourself without some standard requirements.
+The documentation from GitHub was massive! So it was easier to Google and apparently many had the same problems as I did. It helped a lot, especially Stack Overflow.
+If I had more time I would want to tackle the higher level requirements such as adding a search field or try to sort the 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.
+Netlify link: https://katiewu1-githubtracker.netlify.app/

code/chart.js

@@ -1,4 +1,84 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById('progressChart').getContext('2d');
 
-//"Draw" the chart here 👇
+// function to draw the Progress Chart, we have passed in amount of repos as an argument
+const drawProgressChart = (amountOfRepos) => {
+  const data = {
+    labels: ['Finished Projects', 'Unfinished Projects'],
+    datasets: [
+      {
+        label: 'Technigo boot camp projects',
+        data: [amountOfRepos, 19 - amountOfRepos],
+        // length of the repo array, total 19 projects minus length of the repo array
+        backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+  const config = {
+    type: 'doughnut',
+    data: data,
+    options: {
+      plugins: {
+        legend: {
+          labels: {
+            color: 'white',
+            font: {
+              size: 12,
+            },
+          },
+        },
+      },
+    },
+  };
+  const progressChart = new Chart(ctx, config);
+};
+
+// function to draw the Language Chart with three arguments
+const drawLanguagesChart = (html_percent, css_percent, js_percent) => {
+  // put the variable for the second canvas here because
+  // the id="languageChart" hasn't been created yet because of innerHTML in script.js
+  // if we put it at start of the chart.js, we wouldn't know what languageChart is
+  const ctx_languages = document.getElementById('languagesChart');
+  const data_2 = {
+    labels: ['HTML', 'CSS', 'Javascript'],
+    datasets: [
+      {
+        label: 'Language use (percentage)',
+        data: [html_percent, css_percent, js_percent],
+        backgroundColor: [
+          'rgb(255, 159, 64)',
+          'rgb(128, 0, 128)',
+          'rgb(255, 205, 86)',
+        ],
+        borderColor: [
+          'rgba(255, 159, 64, 0.2)',
+          'rgb(128, 0, 128, 0.2)',
+          'rgba(255, 205, 86, 0.2)',
+        ],
+        borderWidth: 2,
+      },
+    ],
+  };
+
+  const stackedBar = new Chart(ctx_languages, {
+    type: 'bar',
+    data: data_2,
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true,
+        },
+      },
+      plugins: {
+        legend: {
+          labels: {
+            color: 'black',
+            font: {
+              size: 12,
+            },
+          },
+        },
+      },
+    },
+  });
+};

code/index.html

@@ -1,21 +1,59 @@
 <!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>Katie Wu - GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="icon" href="./assets/favicon.png" />
+    <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=Itim&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header>
+      <img
+        src="./assets/bg-image.jpg"
+        alt="cover image of plants"
+        class="background-image"
+      />
+      <h1 class="header-title">
+        <img class="octacat" src="./assets/Octocat.png" alt="octocat" /> GitHub
+        Tracker
+      </h1>
+      <div class="profile" id="profile"></div>
+    </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <hr />
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <main class="projects">
+      <h3>Repositories</h3>
+      <section class="project-container" id="projectContainer"></section>
+      <section class="modal-project" id="modalProject">
+        <button class="close-btn" id="closeBtn">&times;</button>
+        <div class="modal-content" id="modalContent"></div>
+      </section>
+    </main>
+
+    <h3>Technigo boot camp projects</h3>
+    <div class="progress-chart">
+      <canvas id="progressChart"></canvas>
+    </div>
+
+    <footer>
+      <p>&#169;2021 by Katie Wu</p>
+      <p>
+        Team Foxes 🦊 |
+        <a href="https://www.technigo.io/" target="blank">Technigo</a>
+      </p>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="./chart.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>