Technigo · themisk84 · Sep 28, 2021 · Sep 28, 2021 · Sep 30, 2021 · Sep 30, 2021
diff --git a/.DS_Store b/.DS_Store
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.
+Creating a github tracker for our 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?
+Using javascript's fetch function to get the information from github
 
 ## 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://agitated-volhard-2172b7.netlify.app
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store
diff --git a/code/assets/github.jpeg b/code/assets/github.jpeg
diff --git a/code/assets/github2.png b/code/assets/github2.png
diff --git a/code/assets/github3.png b/code/assets/github3.png
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,23 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Projects Finished", "Projects Left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 19 - amount],
+          backgroundColor: ["#58a6ff", "rgb(255, 0, 0)", "rgb(255, 205, 86)"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const statistics = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,38 @@
 <!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" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <div class="logo-container">
+      <img class="logo-image" src="./assets/github2.png" alt="github-logo">
+    </div>
+      <div class="upper-section">
+        <div class="profile-container" id="profileContainer">
+          <img id="profileImage" class="profile-image" alt="profile-image" />
+          <p id="userName" class="user-name"></p>
+        </div>
+        <div class="tracker">
+          <h2>GitHub Tracker</h1>
+          <h4>Projects:</h2>
+        </div>
+      </div>
+      <div class="projects-containter">
+        <main id="projects" class="projects"></main>
+      </div>
+
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <!-- This will be used to draw the chart 👇 -->
+    <div class="chart-container">
+      <canvas id="chart" class="chart"></canvas>
+    </div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <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,87 @@
+const REPOS_URL = "https://api.github.com/users/themisk84/repos";
+const projects = document.getElementById("projects");
+const profileImage = document.getElementById("profileImage");
+const userName = document.getElementById("userName");
+
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project")
+      );
+      console.log(forkedRepos);
+
+      forkedRepos.forEach((repo) => {
+        fetch(`${repo.languages_url}`)
+          .then((language) => language.json())
+          .then((data) => {
+            const language = Object.keys(data)[0];
+
+            console.log(data);
+
+            projects.innerHTML += `
+          <div class="repo" id="${repo.name}"> 
+               <a class="repo-item1" href="${repo.html_url}" target="_blank">${
+              repo.name
+            }</a>
+               <div class="repo-item2"><span class="branch">${
+                 repo.default_branch
+               }</span></div>
+               <h4 class="repo-item3">Last updated: ${new Date(
+                 repo.updated_at
+               ).toLocaleDateString()}</h4>
+               <h5 class="repo-item4">${language}</h5>
+             </div>
+          `;
+          })
+          .catch((err) => console.log(err));
+      });
+
+      drawChart(forkedRepos.length);
+      const profileImg = data.forEach(
+        (profile) => (profileImage.src = profile.owner.avatar_url)
+      );
+      const profileName = data.forEach(
+        (nickname) => (userName.innerHTML = nickname.owner.login)
+      );
+
+      getPullRequest(forkedRepos);
+    });
+};
+
+const getPullRequest = (forkedRepos) => {
+  forkedRepos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        const myPulls = data.find(
+          (pulls) => pulls.user.login === repo.owner.login
+        );
+        console.log(myPulls);
+        if (myPulls) {
+          const commitsURL = myPulls.commits_url;
+          getCommits(commitsURL, repo);
+        } else
+          document.getElementById(
+            `${repo.name}`
+          ).innerHTML += `<h4 class="repo-item5">Group assignment or not yet pulled</h4>`;
+      })
+      .catch((err) => console.log(err));
+  });
+};
+
+const getCommits = (commitsURL, repo) => {
+  fetch(commitsURL)
+    .then((response) => response.json())
+    .then((data) => {
+      console.log(data);
+      document.getElementById(
+        `${repo.name}`
+      ).innerHTML += `<h4 class="repo-item5"> Number of commits: ${data.length}</h4>`;
+    })
+    .catch((err) => console.log(err));
+};
+getRepos();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,145 @@
 body {
-  background: #FFECE9;
-}
+  background-color: #21262d;
+  margin: 0;
+  box-sizing: border-box;
+  color: rgb(201, 209, 217);
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 50px;
+  border-bottom: 1px solid black;
+  margin-bottom: -10px;
+}
+
+.upper-section {
+  display: flex;
+  justify-content: left;
+}
+
+.profile-container {
+  display: flex;
+  width: 35%;
+  flex-direction: column;
+  margin-left: 10px;
+}
+
+.profile-image {
+  width: 65%;
+  border-radius: 50%;
+}
+
+.projects {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 15px;
+  margin-left: 10px;
+  margin-right: 20px;
+}
+
+.repo {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 25px);
+  column-gap: 10px;
+  row-gap: 10px;
+  border: 1px solid rgb(201, 209, 217);
+  border-radius: 6px;
+  padding: 15px;
+  height: 140px;
+  color: #8b949e;
+}
+
+.repo-item1 {
+  grid-column: span 3;
+  color: #58a6ff;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.repo-item2 {
+  grid-column: span 1;
+}
+
+.repo-item3,
+.repo-item4,
+.repo-item5 {
+  grid-column: span 4;
+}
+
+.branch {
+  border: 1px solid rgb(201, 209, 217);
+  border-radius: 10px;
+  padding: 2px;
+}
+
+.chart-container {
+  display: flex;
+  justify-content: center;
+}
+.chart {
+  margin-top: 20px;
+  max-height: 250px;
+  max-width: 300px;
+}
+
+@media (min-width: 768px) {
+  .logo-container {
+    justify-content: flex-end;
+  }
+  .logo-image {
+    width: 100px;
+  }
+
+  .upper-section {
+    flex-direction: column;
+    width: 25%;
+    margin-left: 10px;
+  }
+  .profile-container {
+    width: 85%;
+    align-items: center;
+  }
+  .profile-image {
+    width: 100%;
+  }
+  .projects-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .projects {
+    width: 65%;
+    grid-template-columns: 1fr 1fr;
+    position: absolute;
+    margin-left: 250px;
+    margin-top: -250px;
+  }
+
+  .repo {
+    height: 150px;
+  }
+
+  .chart-container {
+    margin-top: 1500px;
+  }
+
+  .chart {
+    max-width: 300px;
+    max-height: 300px;
+  }
+}
+
+@media (min-width: 992px) {
+  .projects {
+    margin-left: 300px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .projects {
+    margin-left: 400px;
+  }
+}