Technigo · eyahya-khan · Feb 23, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 24, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,47 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+### What to include
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+- A list of all repos that are forked ones from Technigo
+- Your username and profile picture
+- Most recent update (push) for each repo
+- Name of your default branch for each repo
+- URL to the actual GitHub repo
+- Number of commit messages for each repo
+- All pull requests
+- A chart of how many projects you've done so far, compared to how many you will do using [Chart.js](https://www.chartjs.org/). [Here](https://www.chartjs.org/docs/latest/getting-started/)'s documentation on how to get started, and in the left menu you can also find [example usage](https://www.chartjs.org/docs/latest/getting-started/usage.html).
 
-## The problem
+## Requirements 🧪
 
-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?
+Your project should fulfil the three **🔵  Blue Level Requirements** , **🔴 Red Level** and **⚫  Black Level Requirements** to push your knowledge to the next level!
+
+### **🔵  Blue Level (Minimum Requirements)**
+
+Your page should include:
+
+- A list of all repos that are forked from Technigo
+- Your username and profile picture
+- Most recent update (push) for each repo
+- Name of your default branch for each repo
+- URL to the actual GitHub repo
+- Number of commits for each repo
+- It should be responsive (mobile first)
+- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳).
+
+### **🔴  Red Level (Intermediary Goals)**
+
+- Sort your list in different ways.
+**Example of what you can sort by:** creation date, name, most commits, followers or stargazers
+- Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos
+- Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion?
+- Display the comments you got from each pull request
+- When you're browsing through the repo object, you'll see that there's a lot of data that we can use. Create a chart over some of the data.
+**Example of data to use:** Repo size, people that starred your repo (stargazers) or amount of commits on each repo.
+
+### **⚫  Black Level (Advanced Goals)**
+
+- Implement a search field to find a specific repo based on name
 
 ## 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://pedantic-roentgen-a54a90.netlify.app/
diff --git a/chart.js b/chart.js
@@ -0,0 +1,46 @@
+//DOM-selector for the canvas 👇
+const ctx = document.getElementById('chart').getContext('2d')
+
+//"Draw" the chart here 👇
+const drawChart = (amount) => {
+const labels = [
+              'Completed projects',
+              'Projects to do',
+          ];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      label: 'My First dataset',
+      backgroundColor: [
+                  '#a07a99',
+                  '#125e91',
+              ],
+      borderColor: '#000000',
+      data: [amount, 19 - amount],
+    }]
+  };
+
+  const options = {
+    layout: {
+        padding: 25 
+    },
+    plugins: {
+        legend: {
+            labels: {
+                font: {
+                    size: 16
+                }
+            }
+        }
+    }
+}
+
+  const config = {
+    type: 'doughnut',
+    data:data,
+    options: options
+  };
+
+   const myChart = new Chart(ctx, config);
+}
diff --git a/code/chart.js b/code/chart.js
diff --git a/code/index.html b/code/index.html
diff --git a/code/script.js b/code/script.js
diff --git a/code/style.css b/code/style.css
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!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>Eyahya's GitHub Tracker</title>
+  <link rel="shortcut icon" href="./img/favicon.png" />
+  <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=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+
+<body class="main-grid">
+  <header class="header">
+    <h1 class="header-text">GitHub Tracker</h1>
+    <div class="search-container">
+      <form id="search-form">
+        <input class="input-field" id="search-field" type="text" placeholder="Search eyahya's repo here..." autocomplete="off"/>
+        <input type="submit" id="searchbtn" class="button-search" value="Search">
+    </form>
+  </div>
+  </header>
+
+  <div id="myProfile" class="my-profile"></div>
+  <div id="loading" class="lds-ripple"></div>
+
+  <main id="projects" class="grid-container"></main>
+  <!-- This will be used to draw the chart -->
+  <div class="chart">
+    <canvas id="chart"></canvas>
+  </div>
+
+  <script src="./chart.js"></script>
+  <script src="./secret.js"></script>
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,85 @@
+const USER = 'eyahya-khan'
+const userContainer      = document.getElementById('myProfile')
+const searchField        = document.getElementById('search-field')
+const searchForm         = document.getElementById('search-form')
+const REPOS_URL          = `https://api.github.com/users/${USER}/repos?per_page=100`
+const USER_URL           = `https://api.github.com/users/${USER}`
+const projectsContainer  = document.getElementById('projects')
+const ldsripple          = document.getElementById('loading')
+
+const Auth = {
+  method: 'GET',
+  headers: {
+    Authorization: `${API_TOKEN}`
+	}
+}
+
+let repos;
+
+//profile image and info
+const userProfile = () => {
+  fetch(USER_URL, Auth)
+    .then(res => res.json())
+    .then(data => {
+      userContainer.innerHTML = `
+      <div class="profileinfo">
+      <h2>${data.name}</h2>
+      <a href="https://github.com/eyahya-khan">@${data.login}</a>
+      <p>${data.location}</p>
+      </div>
+      <div class="profileimg"><img src="${data.avatar_url}"/></div>
+      </div>`
+
+    })
+}
+userProfile()
+
+const getRepos = () => {
+  fetch(REPOS_URL, Auth)
+    .then(response => response.json())
+    .then(data => {
+      const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+      getPullRequests(forkedRepos)
+      drawChart(forkedRepos.length)
+    })
+}
+getRepos()
+
+//function to get the repos
+const getPullRequests = (repos) => {
+
+  projectsContainer.innerHTML = '';
+  repos.forEach(repo => {
+
+    fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, Auth) 
+      .then(res => res.json())
+      .then(data => {
+
+        const myPullRequest = data.filter((pull) => { return pull.user.login === repo.owner.login })
+
+        const commitUrl = myPullRequest[0].commits_url
+
+        fetch(commitUrl)
+        .then(res => res.json())
+        .then(data => {
+
+        const numberCommit = data.length
+
+          //added function so the DOM do not self close tags
+          let boxHtml = `<div class="box-repo ${repo.name}">`; 
+          boxHtml += `<h3>${repo.name}</h3>`
+          boxHtml += `<p id="commit-${repo.name}">Number of commits: ${numberCommit}</p>`
+          boxHtml += `<p>Created at: ${new Date(repo.created_at).toDateString()}</p>`
+          boxHtml += `<p>Last update: ${new Date(repo.pushed_at).toDateString()}</p>`
+          boxHtml += `<p>Default branch: ${repo.default_branch}</p>`
+          boxHtml += `<p>First comment: ${data[0].commit.message}</p>`
+          boxHtml += `<p>Last comment: ${data[numberCommit-1].commit.message}</p>`
+          boxHtml += `<p><a href="${repo.html_url}" target="_blank">Go to repo</a></p>`
+          boxHtml += '</div>'
+          projectsContainer.innerHTML += boxHtml; //closing the div tag
+          ldsripple.style.display = 'none' //loading icon
+        })
+
+      })
+    })
+}