Technigo · Lundgreneddie · Sep 26, 2021 · Sep 27, 2021 · Sep 27, 2021 · Oct 1, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "liveServer.settings.port": 5505
+  "liveServer.settings.port": 5505,
+  "git.ignoreLimitWarning": true
 }
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,24 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
+Chart.defaults.font.size = 16;
+Chart.defaults.color = "#ffffff";
 
 //"Draw" the chart here 👇
+const drawChart = amount => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Finished Projects", "Projects Left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20 - amount],
+          backgroundColor: ["#002929", "#545454"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,43 @@
 <!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" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <body>
+    <header>
+      <h1><i class="fab fa-github-square"></i>GitHub Tracker</h1>
+    </header>
+    <div>
+      <div id="profile"></div>
+      <!-- This will be used to draw the chart 👇 -->
+      <div class="chart">
+        <canvas id="chart"></canvas>
+      </div>
+    </div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <fieldset>
+      <legend>
+        <h2>Projects</h2>
+      </legend>
+      <section class="projects-container">
+        <div id="projects" class="projects"></div>
+        <div id="pullRequests"></div>
+      </section>
+    </fieldset>
+
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,96 @@
+const USER = "Lundgreneddie";
+const GITHUB_URL = `https://api.github.com/users/${USER}/repos`;
+const COMMIT_URL = `https://api.github.com/repos/Lundgreneddie/project-news-site/commits`;
+const projectsContainer = document.getElementById("projects");
+const pullContainer = document.getElementById("pull-requests");
+const profileInfo = document.getElementById("profile");
+
+// function to get profile picture and name
+const profile = () => {
+  fetch(`https://api.github.com/users/${USER}`)
+    .then(response => {
+      return response.json();
+    })
+    .then(json => {
+      profileInfo.innerHTML += `
+        <img src=${json.avatar_url}>
+        <a class="username-link" href="https://github.com/Lundgreneddie">
+        <h3 class="username"><i class="fab fa-github"></i>
+      ${json.login}</a></h3>
+        <p class="repo-amount">This account has a total of ${json.public_repos} repos</p>
+        `;
+    });
+};
+profile(); // invoking the profile function
+
+//
+
+// function to get all of the repos and commits
+const getRepos = () => {
+  fetch(GITHUB_URL)
+    .then(response => {
+      return response.json();
+    })
+    .then(json => {
+      // this filters out ONLY the forked projects from technigo
+      const forkedRepos = json.filter(
+        repo => repo.fork && repo.name.startsWith("project-")
+      );
+
+      // this creates a forEach function to get all of the projects
+      forkedRepos.forEach(
+        repo =>
+          (projectsContainer.innerHTML += `
+          <div class="repo-items">
+            <a class="links" href=${repo.html_url}>${repo.name}</a>
+        <p><span class="push-title">Most recent push</span>
+    ${new Date(repo.pushed_at).toDateString()} at ${repo.pushed_at.slice(
+            11,
+            16
+          )}</p>
+        <p class="branch">${repo.default_branch}</p>
+        <p id="commit-${repo.name}">Number of commits: </p>
+        </div>`)
+      );
+
+      fetchPullRequestsArray(forkedRepos);
+      drawChart(forkedRepos.length);
+    });
+};
+
+// this fetches all of the pull requests and commit made to those
+const fetchPullRequestsArray = allRepositories => {
+  allRepositories.forEach(repo => {
+    const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+    fetch(PULL_URL)
+      .then(res => res.json())
+      .then(json => {
+        const myPullRequest = json.find(
+          pull => pull.user.login === repo.owner.login
+        );
+        // Detect if we have pull request or not.
+        // If yes - call fetchCommits function
+        // If no - inform user that no pull request was yet done
+        if (myPullRequest) {
+          fetchCommits(myPullRequest.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            "No pull requests done";
+        }
+      });
+  });
+};
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then(res => res.json())
+    .then(json => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += json.length;
+    });
+};
+getRepos(); // invoking the function
+
+// function to toggle the dark mode
+const myFunction = () => {
+  const element = document.body;
+  element.classList.toggle("dark-mode");
+};
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,68 @@
+* {
+  box-sizing: border-box;
+  text-align: center;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: #346751;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  color: #ffffff;
+  margin: 0;
+}
+
+header {
+  text-align: center;
+  position: absolute;
+  background-color: #161616;
+  margin-bottom: 30px;
+  width: 100%;
+}
+
+img {
+  border-radius: 50%;
+  border: 2px solid #161616;
+  margin-top: 100px;
+}
+
+.chart {
+  width: 200px;
+  height: 200px;
+  margin: auto;
+}
+
+fieldset {
+  border-color: #161616;
+}
+
+.links {
+  color: #161616;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.repo-items {
+  padding: 20px;
+  margin: 10px;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
+    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
+    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
+}
+
+/* Tablet */
+@media (min-width: 668px) and (max-width: 1024px) {
+  .projects {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1025px) {
+  .projects {
+    display: grid;
+    grid-template-columns: auto auto auto;
+  }
+}
diff --git a/node_modules/.bin/acorn b/node_modules/.bin/acorn
diff --git a/node_modules/.bin/acorn.cmd b/node_modules/.bin/acorn.cmd
diff --git a/node_modules/.bin/acorn.ps1 b/node_modules/.bin/acorn.ps1
diff --git a/node_modules/.bin/browserslist b/node_modules/.bin/browserslist
diff --git a/node_modules/.bin/browserslist.cmd b/node_modules/.bin/browserslist.cmd
diff --git a/node_modules/.bin/browserslist.ps1 b/node_modules/.bin/browserslist.ps1
diff --git a/node_modules/.bin/escodegen b/node_modules/.bin/escodegen