From 2f528779b4fae00377cd71bf37ca0abfa0ef063b Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Tue, 22 Feb 2022 11:26:23 +0100 Subject: [PATCH 01/10] Styled header and main. Added table with data from the API --- code/index.html | 31 +++++++++++++++--- code/script.js | 24 ++++++++++++++ code/style.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 136 insertions(+), 6 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..d9b3342c 100644 --- a/code/index.html +++ b/code/index.html @@ -4,13 +4,36 @@ + + + + Project GitHub Tracker -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker for:

+
+

+ +
+
+ +
+ + + + + + + + + + + +
Repo nameUpdated atDefault branchURL
+
@@ -18,4 +41,4 @@

Projects:

- \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..bd5fd09f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,24 @@ +const owner = 'joannaringqvist'; +const API_URL_USERNAME = `https://api.github.com/users/${owner}`; +const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`; +const projects = document.getElementById('projects'); +const username = document.getElementById('username'); +const picture = document.getElementById('picture'); + +fetch(API_URL_REPOS) + .then((response) => { + return response.json() + }) + .then((json) => { + console.log(json); + + username.innerHTML = json[0].owner.login; + picture.src = json[0].owner.avatar_url; + + json.forEach((repo) => { + + if (repo.fork === true && repo.name.startsWith('project')) { + projects.innerHTML += `${repo.name}${repo.updated_at}${repo.default_branch}${repo.url}` + } + }); + }) diff --git a/code/style.css b/code/style.css index 7c8ad447..fe1bb0e0 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,86 @@ body { - background: #FFECE9; -} \ No newline at end of file + margin: 0; + font-family: 'Roboto', sans-serif; + padding: 2rem 1rem; +} + +/* --- HEADER --- */ +.user { + display: flex; +} + +h1 { + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 300; + color: #888; + margin: 0; +} + +.heading { + align-self: flex-start; +} + +.username { + align-self: center; + margin: 0 0.5rem 0 0; + font-size: 2.2rem; +} + +.picture { + border-radius: 50%; + height: 13vw; +} + +/* --- MAIN --- */ +main { + padding: 2rem 0; +} + +.projects { + overflow: auto; + white-space: nowrap; +} + +table { + width: 100%; + border-collapse: collapse; +} + +thead { + font-weight: 700; + color: #888; +} + +tr { + border: 1px solid black; +} + +td { + padding: 0.3rem 1rem; + border: 1px solid rgb(202, 202, 202); +} + +/* --- Desktop --- */ +@media screen and (min-width:768px) { + + h1 { + font-size: 1.5rem; + } + + header { + display: flex; + justify-content: space-between; + } + + .heading { + align-self: flex-start; + } + + .username { + align-self: center; + margin: 0 1rem 0 1.3rem; + font-size: 2.5rem; + } + +} From 21b3a0e473e3eba02cacfa2bf3932cb1521dc7a2 Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Wed, 23 Feb 2022 14:16:28 +0100 Subject: [PATCH 02/10] Added the chart --- code/chart.js | 31 ++++++++++++++++++++++++++++--- code/index.html | 8 ++++++-- code/style.css | 9 +++++---- 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..4e56ef7d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,29 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); -//"Draw" the chart here 👇 +const labels = [ + `Finished projects`, + `Projects left` + ]; + +const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['rgb(245, 217, 237)', 'rgb(217, 245, 239)'], + borderColor: 'rgb(66, 66, 66)', + data: [7, 12], + }] + }; + + +const config = { + type: 'pie', + data: data, + options: {} + }; + + const myChart = new Chart( + ctx, + config + ); + \ No newline at end of file diff --git a/code/index.html b/code/index.html index d9b3342c..53884649 100644 --- a/code/index.html +++ b/code/index.html @@ -35,10 +35,14 @@

GitHub Tracker for:

- - + + + +

I have finished 7 projects and have 12 left.

+ + diff --git a/code/style.css b/code/style.css index fe1bb0e0..27778039 100644 --- a/code/style.css +++ b/code/style.css @@ -52,15 +52,16 @@ thead { color: #888; } -tr { - border: 1px solid black; -} - td { padding: 0.3rem 1rem; border: 1px solid rgb(202, 202, 202); } +/* --- CHART -- */ +.chart { + max-height: 60vh; +} + /* --- Desktop --- */ @media screen and (min-width:768px) { From 8d6ac10adb73173ec11dc7912123f6d5bc02e8ad Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Wed, 23 Feb 2022 21:33:48 +0100 Subject: [PATCH 03/10] Started with fetching the PRs --- code/chart.js | 10 +++------- code/index.html | 3 ++- code/script.js | 42 ++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 45 insertions(+), 10 deletions(-) diff --git a/code/chart.js b/code/chart.js index 4e56ef7d..9cea6d96 100644 --- a/code/chart.js +++ b/code/chart.js @@ -8,10 +8,10 @@ const labels = [ const data = { labels: labels, datasets: [{ - label: 'My First dataset', + label: 'My Technigo projects', backgroundColor: ['rgb(245, 217, 237)', 'rgb(217, 245, 239)'], borderColor: 'rgb(66, 66, 66)', - data: [7, 12], + data: [countRepos, 19-countRepos], }] }; @@ -22,8 +22,4 @@ const config = { options: {} }; - const myChart = new Chart( - ctx, - config - ); - \ No newline at end of file + const myChart = new Chart(ctx, config); diff --git a/code/index.html b/code/index.html index 53884649..d0e62de9 100644 --- a/code/index.html +++ b/code/index.html @@ -27,6 +27,7 @@

GitHub Tracker for:

Repo name Updated at Default branch + Number of commits URL @@ -38,7 +39,7 @@

GitHub Tracker for:

-

I have finished 7 projects and have 12 left.

+

diff --git a/code/script.js b/code/script.js index bd5fd09f..f3345d00 100644 --- a/code/script.js +++ b/code/script.js @@ -1,10 +1,14 @@ const owner = 'joannaringqvist'; -const API_URL_USERNAME = `https://api.github.com/users/${owner}`; +//const API_URL_USERNAME = `https://api.github.com/users/${owner}`; const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`; +//const API_URL_PR = `https://api.github.com/repos/technigo/${repoName}/pulls`; const projects = document.getElementById('projects'); const username = document.getElementById('username'); const picture = document.getElementById('picture'); +const numberOfCommits = 7; +let countRepos = 0; + fetch(API_URL_REPOS) .then((response) => { return response.json() @@ -14,11 +18,45 @@ fetch(API_URL_REPOS) username.innerHTML = json[0].owner.login; picture.src = json[0].owner.avatar_url; + let arrayWithRepos = []; json.forEach((repo) => { if (repo.fork === true && repo.name.startsWith('project')) { - projects.innerHTML += `${repo.name}${repo.updated_at}${repo.default_branch}${repo.url}` + countRepos++; + arrayWithRepos.push(repo.name); + projects.innerHTML += `${repo.name}${repo.updated_at}${repo.default_branch}${numberOfCommits}${repo.url}` } }); + const numberOfProjects = document.getElementById('numberOfProjects'); + numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`; + console.log(arrayWithRepos); + getPullRequests(arrayWithRepos); + }) + + +//Remember to pass along your filtered repos as an argument when +//you are calling this function +//Endpoint to get all PRs from a Technigo repo https://api.github.com/repos/Technigo/${reponame}/pulls + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo}/pulls`) + .then(res => res.json()) + .then(data => { + + console.log(data); + console.log(data[0].user.login); + + //TODO + //1. Find only the PR that you made by comparing pull.user.login + // with repo.owner.login + //2. Now you're able to get the commits for each repo by using + // the commits_url as an argument to call another function + //3. You can also get the comments for each PR by calling + // another function with the review_comments_url as argument + + }) }) +} From b8c6632ca783bdf29f5109f899385f4333f3e393 Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Thu, 24 Feb 2022 14:12:41 +0100 Subject: [PATCH 04/10] Finished blue level --- code/script.js | 106 ++++++++++++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 46 deletions(-) diff --git a/code/script.js b/code/script.js index f3345d00..6b151bab 100644 --- a/code/script.js +++ b/code/script.js @@ -5,58 +5,72 @@ const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`; const projects = document.getElementById('projects'); const username = document.getElementById('username'); const picture = document.getElementById('picture'); - -const numberOfCommits = 7; +let ownerLogin = ''; +//Count amount of repos for the chart let countRepos = 0; -fetch(API_URL_REPOS) - .then((response) => { - return response.json() - }) - .then((json) => { - console.log(json); - - username.innerHTML = json[0].owner.login; - picture.src = json[0].owner.avatar_url; - let arrayWithRepos = []; - - json.forEach((repo) => { - - if (repo.fork === true && repo.name.startsWith('project')) { - countRepos++; - arrayWithRepos.push(repo.name); - projects.innerHTML += `${repo.name}${repo.updated_at}${repo.default_branch}${numberOfCommits}${repo.url}` - } - }); - const numberOfProjects = document.getElementById('numberOfProjects'); - numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`; - console.log(arrayWithRepos); - getPullRequests(arrayWithRepos); - }) +const getRepos = () => { + fetch(API_URL_REPOS) + .then((response) => { + return response.json() + }) + .then((json) => { + console.log(json); + + ownerLogin = json[0].owner.login; + username.innerHTML = ownerLogin; + picture.src = json[0].owner.avatar_url; + let arrayWithRepos = []; - -//Remember to pass along your filtered repos as an argument when -//you are calling this function -//Endpoint to get all PRs from a Technigo repo https://api.github.com/repos/Technigo/${reponame}/pulls + json.forEach((repo) => { + + if (repo.fork === true && repo.name.startsWith('project')) { + countRepos++; + arrayWithRepos.push(repo.name); + projects.innerHTML += `${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.url}` + } + }); + const numberOfProjects = document.getElementById('numberOfProjects'); + numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`; + console.log(arrayWithRepos); + getPullRequests(arrayWithRepos); + }) +} const getPullRequests = (repos) => { //Get all the PRs for each project. repos.forEach(repo => { - fetch(`https://api.github.com/repos/technigo/${repo}/pulls`) - .then(res => res.json()) - .then(data => { - - console.log(data); - console.log(data[0].user.login); - - //TODO - //1. Find only the PR that you made by comparing pull.user.login - // with repo.owner.login - //2. Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function - //3. You can also get the comments for each PR by calling - // another function with the review_comments_url as argument - - }) + fetch(`https://api.github.com/repos/technigo/${repo}/pulls?per_page=90`) + .then(res => res.json()) + .then(data => { + + let commitsURL = ''; + + data.forEach((repoData) => { + + if (ownerLogin === repoData.user.login) { + + //Now you're able to get the commits for each repo by using + // the commits_url as an argument to call another function + commitsURL = repoData.commits_url; + fetchCommits(commitsURL, repo); + } + }); + + }) }) } + +const fetchCommits = (commitsURL, repoName) => { + console.log(repoName); + + fetch(commitsURL) + .then(res => res.json()) + .then(json => { + console.log(json.length); + console.log(repoName); + document.getElementById(`commits-${repoName}`).innerHTML += json.length; + }); +} + +getRepos(); From 8be93756cae5657b83a9dd3cbe6723a8a11c6c2a Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Thu, 24 Feb 2022 22:17:15 +0100 Subject: [PATCH 05/10] I put the chart in a function because it wouldn't render correctly --- code/chart.js | 44 ++++++++++++++++++++++++-------------------- code/index.html | 14 +++++++++++--- code/script.js | 40 ++++++++++++++++++++++++++++------------ code/style.css | 29 ++++++++++++++++++++++++++--- 4 files changed, 89 insertions(+), 38 deletions(-) diff --git a/code/chart.js b/code/chart.js index 9cea6d96..4692a83e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,25 +1,29 @@ -const ctx = document.getElementById('chart').getContext('2d'); +const showChart = (countRepos) => { -const labels = [ - `Finished projects`, - `Projects left` - ]; -const data = { - labels: labels, - datasets: [{ - label: 'My Technigo projects', - backgroundColor: ['rgb(245, 217, 237)', 'rgb(217, 245, 239)'], - borderColor: 'rgb(66, 66, 66)', - data: [countRepos, 19-countRepos], - }] - }; + const ctx = document.getElementById('chart').getContext('2d'); + const labels = [ + `Finished projects`, + `Projects left` + ]; -const config = { - type: 'pie', - data: data, - options: {} - }; + const data = { + labels: labels, + datasets: [{ + label: 'My Technigo projects', + backgroundColor: ['rgb(245, 217, 237)', 'rgb(217, 245, 239)'], + borderColor: 'rgb(66, 66, 66)', + data: [countRepos, 19-countRepos], + }] + }; - const myChart = new Chart(ctx, config); + + const config = { + type: 'pie', + data: data, + options: {} + }; + + const myChart = new Chart(ctx, config); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index d0e62de9..ee43812b 100644 --- a/code/index.html +++ b/code/index.html @@ -21,6 +21,15 @@

GitHub Tracker for:

+
+ + +
@@ -35,15 +44,14 @@

GitHub Tracker for:

- +

-

+ - diff --git a/code/script.js b/code/script.js index 6b151bab..a9b596e2 100644 --- a/code/script.js +++ b/code/script.js @@ -5,35 +5,45 @@ const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`; const projects = document.getElementById('projects'); const username = document.getElementById('username'); const picture = document.getElementById('picture'); +const numberOfProjects = document.getElementById('numberOfProjects'); +const sort = document.getElementById('sort'); + let ownerLogin = ''; //Count amount of repos for the chart -let countRepos = 0; +//let countRepos = 0; + +//Function that renders the table +//const renderTable = () => {} -const getRepos = () => { +const getRepos = (sort) => { fetch(API_URL_REPOS) .then((response) => { return response.json() }) .then((json) => { - console.log(json); - ownerLogin = json[0].owner.login; username.innerHTML = ownerLogin; picture.src = json[0].owner.avatar_url; let arrayWithRepos = []; json.forEach((repo) => { + console.log(repo); if (repo.fork === true && repo.name.startsWith('project')) { - countRepos++; arrayWithRepos.push(repo.name); - projects.innerHTML += `${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.url}` + projects.innerHTML += `${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.html_url}` } }); - const numberOfProjects = document.getElementById('numberOfProjects'); + countRepos = arrayWithRepos.length; numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`; - console.log(arrayWithRepos); + console.log(arrayWithRepos.length); + showChart(countRepos); getPullRequests(arrayWithRepos); + + /*if (sort === 'alphabetically') { + console.log('ABCD'); + }*/ + }) } @@ -62,15 +72,21 @@ const getPullRequests = (repos) => { } const fetchCommits = (commitsURL, repoName) => { - console.log(repoName); - fetch(commitsURL) .then(res => res.json()) .then(json => { - console.log(json.length); - console.log(repoName); document.getElementById(`commits-${repoName}`).innerHTML += json.length; }); } getRepos(); + +/* +sort.addEventListener('change', () => { + console.log('sort'); + + if (sort.value === 'alphabetically') { + getRepos('alphabetically'); + + } +})*/ diff --git a/code/style.css b/code/style.css index 27778039..fda5a88d 100644 --- a/code/style.css +++ b/code/style.css @@ -35,11 +35,13 @@ h1 { /* --- MAIN --- */ main { padding: 2rem 0; + overflow-x: auto; } .projects { overflow: auto; white-space: nowrap; + margin: 1rem 0 3rem 0; } table { @@ -57,11 +59,17 @@ td { border: 1px solid rgb(202, 202, 202); } -/* --- CHART -- */ -.chart { - max-height: 60vh; +.repo-url { + text-decoration: none; + color: #000; } +.number-of-projects { + text-align: center; + margin: 1.6rem 0; +} + + /* --- Desktop --- */ @media screen and (min-width:768px) { @@ -84,4 +92,19 @@ td { font-size: 2.5rem; } + .repo-url { + text-decoration: none; + color: #000; + } + + .repo-url:hover { + color: #888; + cursor: pointer; + } + + /* --- CHART -- */ + .chart { + max-height: 60vh; + } + } From 99c59a8345ba526026c0fd401afd60c3f9f50e54 Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Fri, 25 Feb 2022 13:07:18 +0100 Subject: [PATCH 06/10] started with som functionality for opening the rows and show more data --- code/index.html | 1 + code/script.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index ee43812b..10873e51 100644 --- a/code/index.html +++ b/code/index.html @@ -38,6 +38,7 @@

GitHub Tracker for:

Default branch Number of commits URL + Open diff --git a/code/script.js b/code/script.js index a9b596e2..ab8d0f6b 100644 --- a/code/script.js +++ b/code/script.js @@ -31,7 +31,7 @@ const getRepos = (sort) => { if (repo.fork === true && repo.name.startsWith('project')) { arrayWithRepos.push(repo.name); - projects.innerHTML += `${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.html_url}` + projects.innerHTML += `${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.html_url}Open` } }); countRepos = arrayWithRepos.length; From 5e078a0e70ce38a63b05f1c7a174f2be2b469bf5 Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Fri, 25 Feb 2022 13:26:10 +0100 Subject: [PATCH 07/10] Stored the functionality for showing username and picture in an own function. Also added more comments --- code/script.js | 36 ++++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index ab8d0f6b..8f7fb0a2 100644 --- a/code/script.js +++ b/code/script.js @@ -7,39 +7,55 @@ const username = document.getElementById('username'); const picture = document.getElementById('picture'); const numberOfProjects = document.getElementById('numberOfProjects'); const sort = document.getElementById('sort'); - let ownerLogin = ''; + //Count amount of repos for the chart //let countRepos = 0; //Function that renders the table //const renderTable = () => {} +//Function for showing username and picture +const showUsernameAndPic = (ownerLogin, userPic) => { + username.innerHTML = ownerLogin; + picture.src = userPic; +} + +//Function for getting all my repos from Github const getRepos = (sort) => { fetch(API_URL_REPOS) .then((response) => { return response.json() }) .then((json) => { + + //Get the name and picture from the user and pass it to the function for showing them ownerLogin = json[0].owner.login; - username.innerHTML = ownerLogin; - picture.src = json[0].owner.avatar_url; + userPic = json[0].owner.avatar_url; + showUsernameAndPic(ownerLogin, userPic); + + //Array for storing the repos and counting them let arrayWithRepos = []; json.forEach((repo) => { console.log(repo); - + //I only want to continue working with the repos from Technigo, so they should be forked and start with project if (repo.fork === true && repo.name.startsWith('project')) { arrayWithRepos.push(repo.name); + //Write the table rows and cells projects.innerHTML += `${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.html_url}Open` } }); + + //Count the repos and show the chart countRepos = arrayWithRepos.length; numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`; - console.log(arrayWithRepos.length); showChart(countRepos); + + //Get the pull requests for each repo getPullRequests(arrayWithRepos); + /*if (sort === 'alphabetically') { console.log('ABCD'); }*/ @@ -47,8 +63,8 @@ const getRepos = (sort) => { }) } +//Function for getting the pull requests to be able to show the commits and the comments const getPullRequests = (repos) => { - //Get all the PRs for each project. repos.forEach(repo => { fetch(`https://api.github.com/repos/technigo/${repo}/pulls?per_page=90`) .then(res => res.json()) @@ -57,20 +73,19 @@ const getPullRequests = (repos) => { let commitsURL = ''; data.forEach((repoData) => { - + //Only go on with the PRs that are from the user if (ownerLogin === repoData.user.login) { - //Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function + //Get the commits for each repo through the commitsURL. Pass it to the fetchCommits function. commitsURL = repoData.commits_url; fetchCommits(commitsURL, repo); } }); - }) }) } +//Function for showing how many commits are made for each repo const fetchCommits = (commitsURL, repoName) => { fetch(commitsURL) .then(res => res.json()) @@ -79,6 +94,7 @@ const fetchCommits = (commitsURL, repoName) => { }); } +//Invoke the getRepo function getRepos(); /* From c49587a33a99888d5191653e2d2a8eac254fbbdc Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Sun, 27 Feb 2022 14:56:06 +0100 Subject: [PATCH 08/10] Cleaned up the code --- code/chart.js | 5 ++-- code/index.html | 11 --------- code/script.js | 66 +++++++++++++++++-------------------------------- 3 files changed, 25 insertions(+), 57 deletions(-) diff --git a/code/chart.js b/code/chart.js index 4692a83e..9f5d8e11 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,6 +1,5 @@ const showChart = (countRepos) => { - const ctx = document.getElementById('chart').getContext('2d'); const labels = [ @@ -18,7 +17,6 @@ const showChart = (countRepos) => { }] }; - const config = { type: 'pie', data: data, @@ -26,4 +24,5 @@ const showChart = (countRepos) => { }; const myChart = new Chart(ctx, config); -} \ No newline at end of file + +} diff --git a/code/index.html b/code/index.html index 10873e51..6db39e81 100644 --- a/code/index.html +++ b/code/index.html @@ -21,15 +21,6 @@

GitHub Tracker for:

-
- - -
@@ -38,7 +29,6 @@

GitHub Tracker for:

- @@ -49,7 +39,6 @@

GitHub Tracker for:

- diff --git a/code/script.js b/code/script.js index 8f7fb0a2..0aae233f 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,5 @@ const owner = 'joannaringqvist'; -//const API_URL_USERNAME = `https://api.github.com/users/${owner}`; const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`; -//const API_URL_PR = `https://api.github.com/repos/technigo/${repoName}/pulls`; const projects = document.getElementById('projects'); const username = document.getElementById('username'); const picture = document.getElementById('picture'); @@ -9,41 +7,33 @@ const numberOfProjects = document.getElementById('numberOfProjects'); const sort = document.getElementById('sort'); let ownerLogin = ''; -//Count amount of repos for the chart -//let countRepos = 0; - -//Function that renders the table -//const renderTable = () => {} - -//Function for showing username and picture -const showUsernameAndPic = (ownerLogin, userPic) => { - username.innerHTML = ownerLogin; - picture.src = userPic; -} - //Function for getting all my repos from Github const getRepos = (sort) => { fetch(API_URL_REPOS) - .then((response) => { - return response.json() - }) - .then((json) => { + .then((res) => res.json()) + .then((data) => { //Get the name and picture from the user and pass it to the function for showing them - ownerLogin = json[0].owner.login; - userPic = json[0].owner.avatar_url; + ownerLogin = data[0].owner.login; + userPic = data[0].owner.avatar_url; showUsernameAndPic(ownerLogin, userPic); //Array for storing the repos and counting them let arrayWithRepos = []; - json.forEach((repo) => { - console.log(repo); + data.forEach((repo) => { //I only want to continue working with the repos from Technigo, so they should be forked and start with project if (repo.fork === true && repo.name.startsWith('project')) { arrayWithRepos.push(repo.name); //Write the table rows and cells - projects.innerHTML += `` + projects.innerHTML += ` + + + + + + + `; } }); @@ -54,20 +44,20 @@ const getRepos = (sort) => { //Get the pull requests for each repo getPullRequests(arrayWithRepos); - - - /*if (sort === 'alphabetically') { - console.log('ABCD'); - }*/ - }) } +//Function for showing username and picture +const showUsernameAndPic = (ownerLogin, userPic) => { + username.innerHTML = ownerLogin; + picture.src = userPic; +} + //Function for getting the pull requests to be able to show the commits and the comments const getPullRequests = (repos) => { repos.forEach(repo => { fetch(`https://api.github.com/repos/technigo/${repo}/pulls?per_page=90`) - .then(res => res.json()) + .then((res) => res.json()) .then(data => { let commitsURL = ''; @@ -88,21 +78,11 @@ const getPullRequests = (repos) => { //Function for showing how many commits are made for each repo const fetchCommits = (commitsURL, repoName) => { fetch(commitsURL) - .then(res => res.json()) - .then(json => { - document.getElementById(`commits-${repoName}`).innerHTML += json.length; + .then((res) => res.json()) + .then(data => { + document.getElementById(`commits-${repoName}`).innerHTML += data.length; }); } //Invoke the getRepo function getRepos(); - -/* -sort.addEventListener('change', () => { - console.log('sort'); - - if (sort.value === 'alphabetically') { - getRepos('alphabetically'); - - } -})*/ From e4751c8595b17a3c1afaa1387b6a9b014220d06f Mon Sep 17 00:00:00 2001 From: joannaringqvist Date: Sun, 27 Feb 2022 15:07:13 +0100 Subject: [PATCH 09/10] Fixed some styling --- code/index.html | 2 +- code/style.css | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index 6db39e81..d8177f97 100644 --- a/code/index.html +++ b/code/index.html @@ -38,7 +38,7 @@

GitHub Tracker for:

- + diff --git a/code/style.css b/code/style.css index fda5a88d..9bccbed7 100644 --- a/code/style.css +++ b/code/style.css @@ -34,14 +34,14 @@ h1 { /* --- MAIN --- */ main { - padding: 2rem 0; + padding: 2rem 0 0 0; overflow-x: auto; } .projects { overflow: auto; white-space: nowrap; - margin: 1rem 0 3rem 0; + margin: 1rem 0 1.5rem 0; } table { @@ -64,6 +64,10 @@ td { color: #000; } +canvas { + margin-top: 2rem; +} + .number-of-projects { text-align: center; margin: 1.6rem 0; From 8bffa7f27ec2dc1f43616cc4fb90c7b5c4eea013 Mon Sep 17 00:00:00 2001 From: Joanna Ringqvist <91065618+joannaringqvist@users.noreply.github.com> Date: Sun, 27 Feb 2022 15:19:03 +0100 Subject: [PATCH 10/10] Update README.md --- README.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..cedda8b4 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,6 @@ -# GitHub Tracker +GitHub Tracker -Replace this readme with your own information about your project. +I created a tracker for my GitHub repositories that I have forked from Technigo using the GitHub API. I also showed how many projects I have done and how many I have left with the help of a pie chart built with chart.js. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. -## 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://github-tracker-joanna.netlify.app/
Default branch Number of commits URLOpen
${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.html_url}Open
${repo.name}${new Date(repo.updated_at).toLocaleDateString('sv-SE')}${repo.default_branch}${repo.html_url}