Technigo · Meeteyes · Sep 27, 2021 · Sep 28, 2021 · Oct 4, 2021 · Fatima-GR
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 task was to create a GitHub tracker, that displays information related to the Technigo projects using GitHUb API
 
 ## 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 wanted to try writing async functions, maybe the result is more complicated than using the .fetch method, but I learned a lot about the async of JS. Used flex and grid to display the data.
 
 ## 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://meeteyes.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,22 @@
 //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: ["Finished", "Upcoming"],
+      datasets: [
+        {
+          label: "Bootcamp projects",
+          data: [amount, 20 - amount],
+          backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const MyChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,29 @@
 <!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>
+  <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="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header class="user-section" id="userHeader"></header>
+    <div id="projectsInfo" class="projects-info"></div>
+    <!-- This will be used to draw the chart 👇 -->
+    <div class="chart-canvas">
+      <div class="chart-pie">
+        <canvas id="chart" class="chart-pie"></canvas>
+      </div>
+    </div>
+    <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,77 @@
+const projects = document.getElementById("projects");
+const projectInfo = document.getElementById("projectsInfo");
+const userInfo = document.getElementById("userHeader");
+
+//first function that runs a fetch and gets all the repos of the user
+// it returns an array with only Meeteyes technigo repos
+const getRepos = async () => {
+  const API_KEY = "https://api.github.com/users/Meeteyes/repos";
+  const res = await fetch(API_KEY);
+  const data = await res.json();
+  let array = data.filter(
+    (item) => item.fork && item.full_name.includes("project-")
+  );
+  return array;
+};
+
+// this function will be invoked when we want to fetch pull requests from technigo
+const fetchPulls = async (key) => {
+  const res = await fetch(key);
+  const data = await res.json();
+  let myPull = data.find((item) => item.user.login === "Meeteyes");
+  return myPull;
+};
+
+// This function will get commits
+const fetchDetails = async (key) => {
+  const res = await fetch(key);
+  const data = await res.json();
+  return data;
+};
+
+// This is the function that controls the flow of the script.
+// We run other functions which fetches data and we display data with this function
+const callDataInOrder = async () => {
+  //returns array
+  const myRepos = await getRepos();
+
+  // this displays the user information, picture and username:
+  userInfo.innerHTML = `
+  <h1 class="heading-main">GitHub Tracker</h1>
+  <img src=${myRepos[0].owner.avatar_url} alt="user picture" class="user-image" />
+  <h2 class="user-name">${myRepos[0].owner.login}</h2>
+  `;
+
+  myRepos.forEach((repo) => {
+    const API_KEY_PULL = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`;
+    const mySinglePull = fetchPulls(API_KEY_PULL);
+    mySinglePull.then((data) => {
+      const API_KEY_COMMITS = data.commits_url;
+      const comsPerProject = fetchDetails(API_KEY_COMMITS);
+      comsPerProject.then((data) => {
+        console.log(data);
+        document.getElementById(repo.name).innerHTML += `
+        <p>Number of commits: ${data.length}</p>
+        <div> Last 3 commit messages:
+          <p>1 - ${data[data.length - 1].commit.message}</p>
+          <p>2 - ${data[data.length - 2].commit.message}</p>
+          <p>3 - ${data[data.length - 3].commit.message}</p>
+        </div>
+        `;
+      });
+    });
+
+    projectInfo.innerHTML += `
+    <div id=${repo.name} class="repo-card">
+    <a href=${repo.svn_url} class="link">${repo.name}</a>
+    <p> Default branch: ${repo.default_branch}</p>
+    <p>Latest push: ${repo.pushed_at.slice(0, 10)}</p>
+    <p id="numberOfCommits></p>
+    <div>
+    `;
+  });
+
+  drawChart(myRepos.length);
+};
+
+callDataInOrder();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,104 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 body {
-  background: #FFECE9;
-}
+  background: #ffffff;
+  padding: 10px, 10px;
+  min-width: 350px;
+  display: flex;
+  flex-direction: column;
+  /* justify-items: center; */
+  align-items: center;
+  gap: 10px;
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+/* This part deals with the header section */
+
+.user-section {
+  width: 100%;
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.heading-main {
+  font-weight: 700;
+  font-size: 26px;
+}
+
+.user-image {
+  width: 50%;
+  border-radius: 50%;
+  max-width: 250px;
+}
+.user-name {
+  text-align: center;
+  color: #6a7179;
+}
+
+/* This part deals with the project cards */
+.projects-info {
+  width: 100%;
+  padding: 10px 60px;
+  display: grid;
+  grid-template-columns: 1fr;
+  row-gap: 10px;
+  column-gap: 10px;
+}
+
+.repo-card {
+  width: 100%;
+  padding: 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  border: 3px solid #e9ecef;
+  border-radius: 10px;
+}
+
+.link {
+  color: #0a5cd4;
+  text-decoration: none;
+  font-size: 22px;
+}
+
+.chart-canvas {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.chart-pie {
+  width: 50%;
+  max-width: 500px;
+}
+
+@media (min-width: 768px) {
+  .projects-info {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (min-width: 1281px) {
+  body {
+    padding-top: 30px;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .user-section {
+    width: 20%;
+  }
+  .projects-info {
+    width: 60%;
+  }
+
+  .chart-canvas {
+    width: 20%;
+  }
+  .chart-pie {
+    width: 100%;
+  }
+}
diff --git a/node_modules/chart.js/LICENSE.md b/node_modules/chart.js/LICENSE.md
diff --git a/node_modules/chart.js/README.md b/node_modules/chart.js/README.md
diff --git a/node_modules/chart.js/auto/auto.esm.d.ts b/node_modules/chart.js/auto/auto.esm.d.ts
diff --git a/node_modules/chart.js/auto/auto.esm.js b/node_modules/chart.js/auto/auto.esm.js
diff --git a/node_modules/chart.js/auto/auto.js b/node_modules/chart.js/auto/auto.js
diff --git a/node_modules/chart.js/auto/package.json b/node_modules/chart.js/auto/package.json