Technigo · NabeelMansour · Feb 27, 2022 · Feb 27, 2022 · Mar 1, 2022 · Mar 1, 2022
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.
+Assigment was about to make a github tracker
 
 ## 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?
 
 ## 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://stoic-archimedes-d36d72.netlify.app
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,36 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const drawChart = (repos) => {
+
+const labels = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+  ];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      label: 'My Github dataset',
+      backgroundColor: ['#f3722c', '#f8961e'],
+      borderColor: '#f7e9e7',
+      data: [repos, 19-repos],
+    }]
+  };
+
+  const config = {
+    type: 'bar',
+    data: data,
+    options: {}
+  };
+
+  const myChart = new Chart(
+    document.getElementById('chart'),
+    config
+  );
+  }
diff --git a/code/github-universe.jpg b/code/github-universe.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,40 @@
 <!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" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <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=Raleway&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Project GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <!-- list of projects -->
+    <main class="header" id="header"></main>
+
+    <div class="myDiv"></div>
+
+    <section class="container" id="container"></section>
+
+    <!-- This will be used to draw the chart 👇 -->
+
+    <!-- <canvas id="chart" class="chart"></canvas> -->
+
+    <div class="chart-container" id="chart-container">
+      <canvas id="chart"></canvas>
+    </div>
+
+    <script src="./token.js"></script>
+    <script src="./chart.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
+
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,117 @@
+const username = 'NabeelMansour'
+const container = document.getElementById('container')
+const header = document.getElementById('header')
+const technigoRepos = document.getElementById('technigoRepos')
+
+
+// DOM selectors
+const userName = document.getElementById('username')
+const project = document.getElementById('projects')
+const chart = document.getElementById('chart');
+
+const options = {
+    method: 'GET',
+    headers: {
+        Authorization: `token ${token}`
+    }
+}
+
+
+
+
+// API'S
+const USER_API = `https://api.github.com/users/${username}`
+const API_REPOS = `https://api.github.com/users/${username}/repos`
+
+
+
+// fetch for the user info
+
+fetch(USER_API, )
+.then(res => res.json())
+.then(data => {
+
+    header.innerHTML += `
+    <div class="header-text">
+      <img src="${data.avatar_url}" class="image" />
+      <p>${data.name}</p>
+      <h1><span>${data.login}</span></h1>
+      <h2>GitHub Tracker</h2>
+      <p>${data.bio}</p>
+    </div>
+    `
+
+  }) 
+
+// fetch the users reposetories
+
+fetch(API_REPOS)
+    .then(res => res.json())
+     .then(data => {
+
+        const technigoRepositories = data.filter(repo => repo.name.includes('project-') && repo.fork)
+
+         technigoRepositories.forEach((repo) => {
+          container.innerHTML += `
+          <div class="technigo-repos" id="technigoRepos">
+            <h2 id="repoName">${repo.name}</h2>
+            <h3 id="description">${repo.description}</h3>
+
+            <div class="repo-info">
+                <p><span> Last push:</span>  ${new Date(repo.pushed_at).toDateString()}</p>
+                <p><span> Branch:</span> ${repo.default_branch}</p>
+                <p><span> Main language:</span> ${repo.language}</p>
+                <p id="commit-${repo.name}"><span> Number of commits:</span> </p>
+            </div>
+            <p><a class="repo-link" target="_blank" href="${repo.html_url}">My Repo</a></p>
+          </div>
+                `
+            })
+             drawChart(technigoRepositories.length) 
+             getPullRequests(technigoRepositories) // Calling the pull req and commits function
+        })
+
+
+
+// Gets the pull request for the projects
+const getPullRequests = (forkedRepos) => {
+        forkedRepos.forEach(repo => {
+          fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+          .then(res => res.json())
+          .then(data => {
+
+
+
+             const filteredPulls = data.find((pull) => pull.user.login === repo.owner.login)
+             if (filteredPulls) {
+                fetchCommits(filteredPulls.commits_url, repo.name)
+            } else {
+                document.getElementById(`commits-${repo.name}`).innerHTML = "No pulls from this user yet."
+            }  
+
+          })
+        })
+      }
+
+// fetches the commits 
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl)
+        .then(res => res.json())
+        .then((data) => {
+            document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+       })
+  } 
+
+
+
+
+
+
+
+
+
+
+
+
+
+