Technigo · Sherin-Susan-Thomas · Feb 22, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+code/token.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
   "liveServer.settings.port": 5505
-}
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,10 @@
 # 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 week 7 project was creating a github tracker to keep track of the GitHub repos using GitHub API. The pie chart shows the number of projects that I have done at technigo and number of projects left to be done using Chart.js.
 
 ## 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?
+This project was roller-coaster ride and I could learn a lot about how to fetch from Api and invoking the functions. I solved my problems by googling, stack overflow and town-hall sessions. If I had more time, I would like to add some more data to display and added bit more styling.
 
 ## 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.
+Check it out here https://sherin-github-tracker.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,27 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
 //"Draw" the chart here 👇
+const fetchChart = (amount) => {
+  const labels = ["Completed Projects", "Remaining Projects"];
+
+  const data = {
+    labels: labels,
+    datasets: [
+      {
+        label: "Technigo projects",
+        backgroundColor: ["rgb(57, 91, 100)", "rgb(148, 180, 159)"],
+        borderColor: "#f7e9e7",
+        data: [amount, 19 - amount],
+        hoverOffset: 4,
+      },
+    ],
+  };
+
+  const config = {
+    type: "pie",
+    data: data,
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/image/github.png b/code/image/github.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,26 @@
 <!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="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <section id="userProfile" class="user-profile"></section>
+    <main id="projects" class="projects"></main>
+    <div class="chart-container" id="chartContainer">
+      <canvas id="chart" class="chart"></canvas>
+    </div>
+    <!-- This will be used to draw the chart 👇 -->
+    <script src="./token.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <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,86 @@
+const projects = document.getElementById("projects");
+const userProfile = document.getElementById("userProfile");
+const chart = document.getElementById("chart");
+const user_URL = "https://api.github.com/users/Sherin-Susan-Thomas";
+const repo_URL = "https://api.github.com/users/Sherin-Susan-Thomas/repos";
+
+const options = {
+  method: "GET",
+};
+
+//To fetch profile data
+const user = () => {
+  fetch(user_URL, options)
+    .then((res) => res.json())
+    .then((data) => {
+      console.log("data", data);
+      userProfile.innerHTML += `
+      <h1> GitHub Tracker <br> </h1> 
+      <img class= "user" src = ${data.avatar_url}>
+      <h2 class = "user-name" id= "userName"> ${data.name}  </h2> 
+      <h4> ${data.bio} </h4>  <br>
+      <h4>  Follow <a href="${data.html_url}">   <i class="fa fa-github" aria-hidden="true"></i> </a>   </h4> 
+
+     `;
+    });
+};
+user();
+
+// To fetch repositories
+const userRepo = () => {
+  fetch(repo_URL, options)
+    .then((res) => res.json())
+    .then((userData) => {
+      console.log("userData", userData);
+      const filteredRepos = userData.filter(
+        (item) => item.fork == true && item.name.includes("project-") // to filter technigo projects
+      );
+      filteredRepos.forEach((repo) => {
+        const date = new Date(repo.pushed_at).toDateString();
+        projects.innerHTML += `<div class = "repos" >
+        <h3 class = "repo"><b>${repo.name}</b><a href="${repo.html_url}">  <i class="fa fa-github" aria-hidden="true"></i></a> </h3> 
+        <p class = "repo">  (${repo.default_branch}) </p>
+        <p class = "repo">  <b>Latest update:</b> Pushed on ${date} </p>
+        <p class = "repo"id="commit-${repo.name}""><b>Commits Done:</b> </p>
+        </div>
+        `;
+      });
+      fetchChart(filteredRepos.length);
+      console.log("filteredRepos", filteredRepos);
+      pullRequests(filteredRepos);
+    });
+  const pullRequests = (repos) => {
+    repos.forEach((repo) => {
+      console.log("repo", repo);
+      fetch(
+        `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`,
+        options
+      ) // to filter pull requests
+        .then((res) => res.json())
+        .then((data) => {
+          console.log("data", data);
+          const myPullRequest = data.find(
+            (pull) => pull.user.login === repo.owner.login
+          ); // pullrequests fetches the entire pullrequest specfic to the project,  filtering out pull requests made by me.
+          console.log("myPullRequest", myPullRequest);
+          if (myPullRequest) {
+            fetchCommits(myPullRequest.commits_url, repo.name);
+          } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML =
+              "<b>Commits Done: </b> 0 (Pull request unavailable/Group project) ";
+          }
+        });
+    });
+  };
+};
+const fetchCommits = (commitsURL, reponame) => {
+  fetch(commitsURL, options)
+    .then((res) => {
+      return res.json();
+    })
+    .then((data) => {
+      console.log("data", data);
+      document.getElementById(`commit-${reponame}`).innerHTML += data.length;
+    });
+};
+userRepo();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,78 @@
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
 body {
-  background: #FFECE9;
-}
+  background-color: #d3e4cd;
+}
+.user-profile {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+.user-profile img {
+  border-radius: 50%;
+  height: 50vh;
+  width: 50vh;
+  padding: 20px;
+}
+.user-name {
+  padding: 20px;
+}
+h4 {
+  font-size: 20px;
+}
+a {
+  color: black;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+a:hover {
+  color: white;
+}
+.projects {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin: 1rem;
+}
+h3 {
+  padding: 10px;
+}
+.repo {
+  padding: 5px;
+  text-transform: capitalize;
+}
+.repos {
+  width: 350px;
+  background-color: #10251042;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.chart-container {
+  display: grid;
+
+  margin: 0 auto;
+  width: 20rem;
+}
+
+@media only screen and (min-width: 768px) {
+  .chart-container {
+    width: 25rem;
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .projects {
+    margin: 2rem 5rem;
+  }
+  .chart-container {
+    width: 30rem;
+  }
+}