Technigo · efstasia · Sep 26, 2021 · Sep 27, 2021 · Sep 29, 2021 · Sep 29, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "liveServer.settings.port": 5505
-}
+  "liveServer.settings.port": 5505,
+  "prettier.arrowParens": "avoid"
+}
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.
+The assignment was to create a tracker website for my github and fetch the projects and relevant information.
 
 ## 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 problem with knowing how to start writing the JavaScript. I took a look at last week's project (project-weather-app) and used that as a guide for the API fetch.
 
 ## 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.
+Link to deployed website: https://githubtrackerefstasia.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,29 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
 //"Draw" the chart here 👇
+Chart.defaults.font.size = 16;
+Chart.defaults.color = "#5f939a";
+
+const drawChart = amount => {
+  const config = {
+    type: "pie",
+    data: {
+      labels: ["finished projects", "projects left"],
+
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20 - amount],
+          backgroundColor: ["#5F939A", "#D8AC9C"],
+          hoverOffset: 4,
+          hoverOpacity: 1,
+          borderColor: "#161616",
+          responsive: true,
+          maintainAspectRatio: false,
+        },
+      ],
+    },
+  };
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,49 @@
 <!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="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@300&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header>
+      <button class="toggleBtn" onclick="myFunction()">Toggle dark mode</button>
+      <h1>GitHub Tracker</h1>
+    </header>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <section class="grid-container">
+      <div>
+        <div id="profile"></div>
+        <div class="chart"><canvas id="chart"></canvas></div>
+      </div>
+
+      <fieldset>
+        <legend>Projects</legend>
+        <main class="project-cards" id="projects"></main>
+      </fieldset>
+    </section>
+
+    <footer>
+      <p>Made by Sofia Wallerberg. Team foxes.</p>
+    </footer>
+
+    <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,98 @@
+const USER = "efstasia";
+const GITHUB_URL = `https://api.github.com/users/${USER}/repos`;
+const projectsContainer = document.getElementById("projects");
+const pullContainer = document.getElementById("pull-requests");
+const profileInfo = document.getElementById("profile");
+
+// function to get profile info
+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/efstasia">
+        <h3 class="username"><i class="fab fa-github"></i>
+      ${json.login}</a></h3>
+      <p class="location">Current location: ${json.location}</p>
+        <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 + inner HTML for the project section
+      forkedRepos.forEach(
+        repo =>
+          (projectsContainer.innerHTML += `<div class="cards"><h3 class="repo-title">${
+            repo.name
+          }</h3>
+          <a class="links" href=${
+            repo.html_url
+          }>LINK TO THE REPOSITORY ON GITHUB</a>
+          <div class="push-date">
+        <p><span class="push-title">Most recent push</span>
+    ${new Date(repo.pushed_at).toDateString()} at ${repo.pushed_at.slice(
+            11,
+            16
+          )}</p>
+        </div>
+        <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
+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 / team project";
+        }
+      });
+  });
+};
+// this is a function to fetch number of commits made
+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, connected to the button in HTML
+const myFunction = () => {
+  const element = document.body;
+  element.classList.toggle("dark-mode");
+};