Technigo · jjwwkkmm · Feb 23, 2022 · Feb 24, 2022 · Feb 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+code/secret.js
+.DS_Store
+package-lock.json
+package.json
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,28 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+const labels = [
+    'Completed projects', 'Total projects'
+  ];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      label: 'Projects',
+      backgroundColor: ['rgb(76, 81, 105)', 'rgb(13, 18, 46)'],
+      data: [5, 20],
+    }]
+  };
+
+  const config = {
+    type: 'doughnut',
+    data: data,
+    options: {
+        maintainAspectRatio: false,
+    }
+
+  };
+
+  const myChart = new Chart(
+    document.getElementById('chart'),
+    config
+  );
+
diff --git a/code/index.html b/code/index.html
@@ -5,17 +5,29 @@
   <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=Poppins&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <section class="nav">
+    <h1>GitHub Tracker</h1>
+  </section>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
+  <header id="header" class="header"></header>
+  <section class="chart-section">
+    <div class="chart">
+      <canvas id="chart"></canvas>
+    </div>
+  </section>
+  <main>
+    <section id="projects" class="projectSection"></section>
+  </main>
+
+  <script src="./secret.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.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,106 @@
+const projectSection = document.getElementById('projects');
+const headerSection = document.getElementById('header');
+
+const USER = 'jenniferwvng';
+
+const options = {
+    method: 'GET',
+    headers: {
+          Authorization: API_TOKEN
+      }
+  }
+
+//Displays profile information in HTML
+let displayProfileHTML = (data) => {
+    headerSection.innerHTML += `
+        <section>
+            <img src="${data.avatar_url}" alt="profile pic" width="100" height="100"/>
+            <h1>Username: ${data.login}</h1>    
+        </section>
+    `
+}
+
+//Stores HTML blueprint generator in separate function to enable code reuse
+let generateReposHTML = (data) => {
+    projectSection.innerHTML += `
+    <article class="project-section">
+        <p class="project-repo">Project repo: ${data[i].name}</p>
+        <p>Recent push: ${data[i].pushed_at}</p>
+        <p>Default branch: ${data[i].default_branch}</p>
+        <p>Github repo URL: ${data[i].html_url}</p>
+    </article>
+    `
+}
+
+let generatePullandCommitHTML = () => {
+    projectSection.innerHTML += `
+    <section class="pull-commit-section">
+        <h1 style="text-align: center; text-transform: uppercase">Status bar</h1>
+        <p id="loading-status" style="text-align: center; text-transform: uppercase">Loading...</p>
+        <p id="pull-request">Pull requests: </p>
+        <p id="commits">Commits per pull request: </p>
+    </section>
+    `
+}
+
+let generatePullRequestsHTML = (data, result) => {
+    let pullRequest = document.getElementById('pull-request');
+    pullRequest.innerHTML += `<p>${result}: ${data.url}</p>`;
+}
+
+let invokeWhenLoaded = () => {
+     const loadingStatus = document.getElementById('loading-status');
+     loadingStatus.innerHTML = '';
+}
+
+//Filters through all pull requests to find the user's in each repo, query set to 300 in fetch
+let displayPullRequests = (data) => {
+    let result;
+    //Returns repo name in result variable which is passed in generatePullRequestsHTML as parameter
+    data.forEach(element => result = element.base.repo.name)
+
+    data.forEach(element => element.user.login === `${USER}` ? (generatePullRequestsHTML(element, result), fetchCommits(element.commits_url, result)) : console.log('Filtering through other pull requests...'))
+    invokeWhenLoaded();
+    //console.log('Det är är din pull request: ' + element.url)
+    //element.base.repo.name är project name
+}
+
+//Displays data for each object in the array containing repo information
+let displayRepos = (data) => {
+        //Only display forked projects which has corresponding pull request
+    const forkedRepos = data.filter(repo => repo.fork === true && repo.name.startsWith('project-'));
+
+    for (i = 0; i < forkedRepos.length; i++) {
+    //data.forEach(element => 
+    generateReposHTML(forkedRepos);
+    fetchPullRequests(forkedRepos[i].name);
+    }
+    generatePullandCommitHTML();
+}
+
+//Helper function for fetching commits
+let fetchCommits = (url, result) => {
+    let commitsPullrequest = document.getElementById('commits');
+    fetch(url)
+    .then(res => res.json())
+    .then(
+        data =>
+        commitsPullrequest.innerHTML += `<p>${result}: ${data.length}</p>`
+        )
+}
+
+//Helper function to access forkedRepos inside it by invoking it with forkedRepos as parameter inside displayRepos, where it's locally defined
+let fetchPullRequests = (projectRepo) => {
+    fetch('https://api.github.com/repos/Technigo/' + `${projectRepo}`+ '/pulls?per_page=300', options)
+    .then(res => res.json())
+    .then(displayPullRequests)
+    .catch(err => console.log(err))
+}
+
+fetch('https://api.github.com/users/jenniferwvng/repos', options)
+.then(res => res.json())
+.then(displayRepos)
+
+fetch('https://api.github.com/users/jenniferwvng', options)
+.then(res => res.json())
+.then(displayProfileHTML)
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,100 @@
 body {
-  background: #FFECE9;
+  background: white;
+  color: rgb(13, 18, 46);
+  margin: 0;
+  font-family: 'Poppins', sans-serif;
+}
+
+/* Mobile-first design approach*/
+.nav {
+  display: flex;
+  justify-content: center;
+  text-transform: uppercase;
+  margin-bottom: 50px;
+  font-size: 20px;
+  color: grey;
+}
+
+.chart-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 25px;
+}
+
+.chart {
+  height: 25vh;
+  width: 25vw;
+}
+
+ main {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+} 
+
+.projectSection {
+  width: 100vw;
+}
+
+.projectSection article {
+  background-color: black;
+  color: white;
+  font-weight: bold;
+  border: 1px solid rgb(76, 81, 105);
+  border-radius: 3%;
+  margin: 10px;
+  padding: 10px;
+  word-wrap: break-word;
+}
+
+.pull-commit-section {
+  background-color: rgb(76, 81, 105);
+  color: white;
+  border-radius: 3%;
+  margin: 10px;
+  padding: 10px;
+  word-wrap: break-word;
+}
+
+header section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 80px;
+}
+
+ header section img {
+   margin-right: 30px;
+   border-radius: 50%;
+ } 
+
+@media only screen and (min-width: 768px) {
+  .projectSection{
+    display: grid;
+  }
+
+  .projectSection article {
+    grid-template-columns: repeat(2, 1fr);
+    border-radius: 5%;
+  }
+
+  .projectSection section {
+    grid-column: span 2;
+  }
+
+  .chart {
+    width: 30vw;
+    margin-left: 150px;
+  }
+
+  main {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+}
+
+@media only screen and (min-width: 1025px) {
+  .chart {
+    width: 20vw;
+    margin-left: 5px;
+  }
+
 }
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
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