From e629e9e2b46a4776e3e4214ef0cf4bdd280bb7a1 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Wed, 23 Feb 2022 18:28:56 +0200 Subject: [PATCH 01/16] added gitignore and script --- .gitignore | 24 ++++++++++++++++++++++++ code/index.html | 1 + code/script.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..5b33f64c --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +​ +​ +# Ignore Mac system files +.DS_store +​ +# Ignore node_modules folder +node_modules +​ +# Ignore all text files +*.txt +​ +# Ignore files related to API keys +.env +​ +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* +​ +# other +code/secret.js \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..97935391 100644 --- a/code/index.html +++ b/code/index.html @@ -15,6 +15,7 @@

Projects:

+ diff --git a/code/script.js b/code/script.js index e69de29b..567f3475 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,31 @@ + + + +//global variables +const username = 'kolkri' +//Endpoint to get all your repos: +const API_URL = `https://api.github.com/users/${username}/repos` + +//defining token +const API_TOKEN = TOKEN || process.env.API_KEY + +//defining options +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } +} + +//fetch all of your repos and log them to the console +fetch(API_URL, options) + .then(res => res.json()) + .then(data => { + console.log(data) + //filter out and only show the forked ones + let forkedOnes = data.filter(element => element.fork === true) + console.log('Forked ones:', forkedOnes) + //filter out only the forks from Technigo. + let technigoForks = forkedOnes.filter(element => element.name.startsWith('project')) + console.log('Technigo projects:', technigoForks) + }) \ No newline at end of file From c2aa898862af423687170fdd4c57f50875275d88 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Wed, 23 Feb 2022 18:34:52 +0200 Subject: [PATCH 02/16] added token --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 567f3475..b29daf7d 100644 --- a/code/script.js +++ b/code/script.js @@ -7,7 +7,7 @@ const username = 'kolkri' const API_URL = `https://api.github.com/users/${username}/repos` //defining token -const API_TOKEN = TOKEN || process.env.API_KEY +console.log(API_TOKEN) //defining options const options = { From 612112facb86f044abdc97b27586f0086574d065 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Wed, 23 Feb 2022 19:42:30 +0200 Subject: [PATCH 03/16] added step 2 --- code/index.html | 2 +- code/script.js | 38 +++++++++++++++++++++++++++++++++++++- code/style.css | 4 +++- 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index 97935391..078a7507 100644 --- a/code/index.html +++ b/code/index.html @@ -10,7 +10,7 @@

GitHub Tracker

Projects:

-
+
diff --git a/code/script.js b/code/script.js index b29daf7d..641a0492 100644 --- a/code/script.js +++ b/code/script.js @@ -6,6 +6,7 @@ const username = 'kolkri' //Endpoint to get all your repos: const API_URL = `https://api.github.com/users/${username}/repos` + //defining token console.log(API_TOKEN) @@ -28,4 +29,39 @@ fetch(API_URL, options) //filter out only the forks from Technigo. let technigoForks = forkedOnes.filter(element => element.name.startsWith('project')) console.log('Technigo projects:', technigoForks) - }) \ No newline at end of file + + //here invoking the getPullRequests function technigoForks as an argument + getPullRequests(technigoForks) + }) + + +//Remember to pass along your filtered repos as an argument when +//you are calling this function + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100', options) + .then(res => res.json()) + .then(data => { + //1. Find only the PR that you made by comparing pull.user.login to your own username + let myPullRequests = data.filter(element => element.user.login === username) + console.log('my pull requests:', myPullRequests) + + //2. Now you're able to get the commits for each repo by using the commits_url as an argument to call another function + let commitsURL = myPullRequests[0].commits_url + console.log('commits URL:',commitsURL) + commits(myPullRequests.commits_url) + + //3. You can also get the comments for each PR by calling another function with the review_comments_url as argument + let reviewCommentsURL = myPullRequests[0].review_comments_url + console.log('review comments URL:', reviewCommentsURL) + commits(myPullRequests.commits_url) + + }) + }) + } + + const commits = (url) => { + + } \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..588f065d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,5 @@ body { background: #FFECE9; -} \ No newline at end of file +} + + From b4d018b1144f0279697c057524fc22536a3402ee Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Wed, 23 Feb 2022 20:10:26 +0200 Subject: [PATCH 04/16] added profile pic and a bit styling --- code/index.html | 8 ++++++-- code/script.js | 10 ++++++++++ code/style.css | 16 ++++++++++++++++ 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 078a7507..a9ea26e9 100644 --- a/code/index.html +++ b/code/index.html @@ -8,8 +8,12 @@ -

GitHub Tracker

-

Projects:

+
+

GitHub Tracker

+

Profile:

+
+
+
diff --git a/code/script.js b/code/script.js index 641a0492..2f3c8009 100644 --- a/code/script.js +++ b/code/script.js @@ -23,6 +23,8 @@ fetch(API_URL, options) .then(res => res.json()) .then(data => { console.log(data) + //using the fetch data for userdata function + userData(data) //filter out and only show the forked ones let forkedOnes = data.filter(element => element.fork === true) console.log('Forked ones:', forkedOnes) @@ -64,4 +66,12 @@ const getPullRequests = (repos) => { const commits = (url) => { + } + + //Userdata function (profile pic etc) + const userData = (data) => { + //showing the profile pic + document.getElementById('profile-pic').innerHTML = ` + image of kolkri at GitHub + ` } \ No newline at end of file diff --git a/code/style.css b/code/style.css index 588f065d..af5d69e7 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,21 @@ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + body { background: #FFECE9; } +/*Style for the profile info section*/ +.profile-info{ + display: flex; + flex-direction: column; + align-items: center; +} +.profile-pic{ + width: 200px; + border-radius: 50%; +} \ No newline at end of file From 411dd59a34330fdf1a89a96428b4f5a66b5ab56f Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Wed, 23 Feb 2022 22:21:53 +0200 Subject: [PATCH 05/16] added profile info and project cards --- code/index.html | 3 ++- code/script.js | 19 +++++++++++++++++++ code/style.css | 22 +++++++++++++++++++++- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index a9ea26e9..b9e7d084 100644 --- a/code/index.html +++ b/code/index.html @@ -10,7 +10,8 @@

GitHub Tracker

-

Profile:

+

Profile of Kristiina Kolu

+

diff --git a/code/script.js b/code/script.js index 2f3c8009..bf03f120 100644 --- a/code/script.js +++ b/code/script.js @@ -59,6 +59,21 @@ const getPullRequests = (repos) => { let reviewCommentsURL = myPullRequests[0].review_comments_url console.log('review comments URL:', reviewCommentsURL) commits(myPullRequests.commits_url) + + //just testing + let pushedDate = repo.pushed_at + console.log('pushed date:', pushedDate) + + + //showing results on the page with innerHTML + document.getElementById('projects').innerHTML += ` +
+

${repo.name}

+

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}

+

Default branch name: ${repo.default_branch}

+

URL: ${repo.html_url}

+
+ ` }) }) @@ -74,4 +89,8 @@ const getPullRequests = (repos) => { document.getElementById('profile-pic').innerHTML = ` image of kolkri at GitHub ` + //showing the username + document.getElementById('username').innerHTML = ` + GitHub username: ${data[0].owner.login} + ` } \ No newline at end of file diff --git a/code/style.css b/code/style.css index af5d69e7..d97795f2 100644 --- a/code/style.css +++ b/code/style.css @@ -18,4 +18,24 @@ body { .profile-pic{ width: 200px; border-radius: 50%; -} \ No newline at end of file +} + + +/*Style for the project section*/ +.projects{ + display: flex; + flex-wrap: wrap; + width: 100%; + justify-content: center; +} + +.project-card{ + width: 300px; + height: 300px; + border: solid black; + display:flex; + flex-direction: column; + align-items: center; + margin: 1rem; +} + From f6b30ff2a7f454a0cd3d89ad7b6db3c3d207b95c Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Thu, 24 Feb 2022 13:08:46 +0200 Subject: [PATCH 06/16] added reviewComments and myCommits functions --- code/chart.js | 1 + code/index.html | 7 ++++--- code/script.js | 44 ++++++++++++++++++++++++++++++++++++++------ code/style.css | 3 ++- 4 files changed, 45 insertions(+), 10 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..e08277c4 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,4 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + \ No newline at end of file diff --git a/code/index.html b/code/index.html index b9e7d084..312e955b 100644 --- a/code/index.html +++ b/code/index.html @@ -10,12 +10,13 @@

GitHub Tracker

-

Profile of Kristiina Kolu

-

+

-
+
+ +
diff --git a/code/script.js b/code/script.js index bf03f120..6aa6174b 100644 --- a/code/script.js +++ b/code/script.js @@ -53,13 +53,13 @@ const getPullRequests = (repos) => { //2. Now you're able to get the commits for each repo by using the commits_url as an argument to call another function let commitsURL = myPullRequests[0].commits_url console.log('commits URL:',commitsURL) - commits(myPullRequests.commits_url) - + myCommits(commitsURL) + //3. You can also get the comments for each PR by calling another function with the review_comments_url as argument let reviewCommentsURL = myPullRequests[0].review_comments_url console.log('review comments URL:', reviewCommentsURL) - commits(myPullRequests.commits_url) - + reviewComments(reviewCommentsURL) + //just testing let pushedDate = repo.pushed_at console.log('pushed date:', pushedDate) @@ -72,8 +72,11 @@ const getPullRequests = (repos) => {

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}

Default branch name: ${repo.default_branch}

URL: ${repo.html_url}

+ +

` + }) }) @@ -91,6 +94,35 @@ const getPullRequests = (repos) => { ` //showing the username document.getElementById('username').innerHTML = ` - GitHub username: ${data[0].owner.login} + Username: ${data[0].owner.login} ` - } \ No newline at end of file + } + + + //to get the comments from a PR + const reviewComments = (url) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + data.forEach(element => { + console.log('review comments:', element.body) + }) + + }) + + } + + + // to get the commits for each repo + const myCommits = (url) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + data.forEach(element => { + console.log('my commits:',element.commit.message) + return element.body + }) + + }) + + } \ No newline at end of file diff --git a/code/style.css b/code/style.css index d97795f2..c65a45c6 100644 --- a/code/style.css +++ b/code/style.css @@ -31,11 +31,12 @@ body { .project-card{ width: 300px; - height: 300px; + height: auto; border: solid black; display:flex; flex-direction: column; align-items: center; margin: 1rem; + padding: 1rem; } From 99c56696b0b4bed9fdfc09b430222083078c4214 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Thu, 24 Feb 2022 18:28:20 +0200 Subject: [PATCH 07/16] displayed commits and comments --- code/script.js | 73 +++++++++++++++++++++++++------------------------- code/style.css | 3 ++- 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/code/script.js b/code/script.js index 6aa6174b..fcf61d4c 100644 --- a/code/script.js +++ b/code/script.js @@ -7,8 +7,6 @@ const username = 'kolkri' const API_URL = `https://api.github.com/users/${username}/repos` -//defining token -console.log(API_TOKEN) //defining options const options = { @@ -22,23 +20,19 @@ const options = { fetch(API_URL, options) .then(res => res.json()) .then(data => { - console.log(data) - //using the fetch data for userdata function + //using the fetched data for userdata function userData(data) //filter out and only show the forked ones let forkedOnes = data.filter(element => element.fork === true) - console.log('Forked ones:', forkedOnes) //filter out only the forks from Technigo. let technigoForks = forkedOnes.filter(element => element.name.startsWith('project')) - console.log('Technigo projects:', technigoForks) //here invoking the getPullRequests function technigoForks as an argument getPullRequests(technigoForks) }) -//Remember to pass along your filtered repos as an argument when -//you are calling this function +//Remember to pass along your filtered repos as an argument when you are calling getPullRequests function const getPullRequests = (repos) => { //Get all the PRs for each project. @@ -48,22 +42,18 @@ const getPullRequests = (repos) => { .then(data => { //1. Find only the PR that you made by comparing pull.user.login to your own username let myPullRequests = data.filter(element => element.user.login === username) - console.log('my pull requests:', myPullRequests) + //2. Now you're able to get the commits for each repo by using the commits_url as an argument to call another function let commitsURL = myPullRequests[0].commits_url - console.log('commits URL:',commitsURL) - myCommits(commitsURL) + myCommits(commitsURL, repo.name) //3. You can also get the comments for each PR by calling another function with the review_comments_url as argument - let reviewCommentsURL = myPullRequests[0].review_comments_url - console.log('review comments URL:', reviewCommentsURL) - reviewComments(reviewCommentsURL) + let reviewCommentsURL = myPullRequests[0].review_comments_url + reviewComments(reviewCommentsURL, repo.name) //just testing let pushedDate = repo.pushed_at - console.log('pushed date:', pushedDate) - //showing results on the page with innerHTML document.getElementById('projects').innerHTML += ` @@ -72,12 +62,11 @@ const getPullRequests = (repos) => {

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}

Default branch name: ${repo.default_branch}

URL: ${repo.html_url}

- -

+ +
+
` - - }) }) } @@ -100,29 +89,41 @@ const getPullRequests = (repos) => { //to get the comments from a PR - const reviewComments = (url) => { - fetch(url, options) - .then(res => res.json()) - .then(data => { - data.forEach(element => { - console.log('review comments:', element.body) - }) - - }) + const reviewComments = (url, repoName) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + if(data.length > 0){ + document.getElementById(repoName).innerHTML += ` +

Review comments:

+ ` + data.forEach(element => { + document.getElementById(repoName).innerHTML += ` +
  • ${element.body}
    • + ` + }) + } + }) - } + } // to get the commits for each repo - const myCommits = (url) => { + const myCommits = (url, repoName) => { fetch(url, options) .then(res => res.json()) .then(data => { + document.getElementById(repoName).innerHTML += ` +

    My commits:

    + ` data.forEach(element => { - console.log('my commits:',element.commit.message) - return element.body - }) - + document.getElementById(repoName).innerHTML += ` +
  • ${element.commit.message}
    • + ` }) - } \ No newline at end of file + }) + +} + + diff --git a/code/style.css b/code/style.css index c65a45c6..eee52ac7 100644 --- a/code/style.css +++ b/code/style.css @@ -35,8 +35,9 @@ body { border: solid black; display:flex; flex-direction: column; - align-items: center; margin: 1rem; padding: 1rem; } + +/*Style for the commits list section*/ From 1023770abfb1f6cca2c8465970d26065d9e3dccb Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Thu, 24 Feb 2022 18:36:58 +0200 Subject: [PATCH 08/16] updated README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1613a3b0..18a9ff40 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## 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-kolkri.netlify.app/ From 51a6742ee86848578fa4b44d5339e50a6ada125e Mon Sep 17 00:00:00 2001 From: kolkri <91788124+kolkri@users.noreply.github.com> Date: Thu, 24 Feb 2022 18:37:46 +0200 Subject: [PATCH 09/16] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1613a3b0..18a9ff40 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## 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-kolkri.netlify.app/ From 1b8c4d7e1c0c6c2b277382906e9e82c8fdcf33b2 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Thu, 24 Feb 2022 22:29:49 +0200 Subject: [PATCH 10/16] added chartand number of commits --- code/chart.js | 23 +++++++++++++++++++++-- code/index.html | 10 ++++++---- code/script.js | 7 +++++++ code/style.css | 6 ++++-- package-lock.json | 24 ++++++++++++++++++++++++ package.json | 5 +++++ 6 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/code/chart.js b/code/chart.js index e08277c4..8f683a13 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,5 +1,24 @@ +const drawChart = (finishedProjects) =>{ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('3d') //"Draw" the chart here 👇 - \ No newline at end of file +const config = { + type: "pie", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [finishedProjects, 19 - finishedProjects], + backgroundColor: ["rgb(0,250,154,0.20)", "rgb(228, 228, 228)"], + hoverOffset: 4, + }, + ], + }, + }; + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} diff --git a/code/index.html b/code/index.html index 312e955b..0f523689 100644 --- a/code/index.html +++ b/code/index.html @@ -12,15 +12,17 @@

    GitHub Tracker

    + +
    + +
    - - - - + + diff --git a/code/script.js b/code/script.js index fcf61d4c..a9f8fd48 100644 --- a/code/script.js +++ b/code/script.js @@ -3,6 +3,7 @@ //global variables const username = 'kolkri' + //Endpoint to get all your repos: const API_URL = `https://api.github.com/users/${username}/repos` @@ -36,10 +37,14 @@ fetch(API_URL, options) const getPullRequests = (repos) => { //Get all the PRs for each project. + //invoking the function drawChart using the amount of projects as an argument + drawChart(repos.length) repos.forEach(repo => { fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100', options) .then(res => res.json()) .then(data => { + + //1. Find only the PR that you made by comparing pull.user.login to your own username let myPullRequests = data.filter(element => element.user.login === username) @@ -69,6 +74,7 @@ const getPullRequests = (repos) => { ` }) }) + } const commits = (url) => { @@ -115,6 +121,7 @@ const getPullRequests = (repos) => { .then(data => { document.getElementById(repoName).innerHTML += `

    My commits:

    +

    Number of commits: ${data.length}

    ` data.forEach(element => { document.getElementById(repoName).innerHTML += ` diff --git a/code/style.css b/code/style.css index eee52ac7..c3489050 100644 --- a/code/style.css +++ b/code/style.css @@ -36,8 +36,10 @@ body { display:flex; flex-direction: column; margin: 1rem; - padding: 1rem; } -/*Style for the commits list section*/ +/*Styling the chart*/ +.chart{ + width: 200px; +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..8627f416 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,24 @@ +{ + "name": "project-github-tracker", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "chart.js": "^3.7.1" + } + }, + "node_modules/chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + } + }, + "dependencies": { + "chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..832728d9 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "chart.js": "^3.7.1" + } +} From 35bfa2b116c76cc0cdd6d3ff980198d1c7615478 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Sun, 27 Feb 2022 21:37:37 +0200 Subject: [PATCH 11/16] final styling --- code/assets/comment.svg | 3 + code/assets/githubLogo.svg | 1 + code/chart.js | 51 +++++++++++---- code/index.html | 22 +++++-- code/script.js | 96 +++++++++++++++++++++++----- code/style.css | 128 ++++++++++++++++++++++++++++++++++--- 6 files changed, 259 insertions(+), 42 deletions(-) create mode 100644 code/assets/comment.svg create mode 100644 code/assets/githubLogo.svg diff --git a/code/assets/comment.svg b/code/assets/comment.svg new file mode 100644 index 00000000..07e00b43 --- /dev/null +++ b/code/assets/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/code/assets/githubLogo.svg b/code/assets/githubLogo.svg new file mode 100644 index 00000000..ee43aea9 --- /dev/null +++ b/code/assets/githubLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 8f683a13..4affe637 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,24 +1,49 @@ -const drawChart = (finishedProjects) =>{ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('3d') +const ctx = document.getElementById("chart").getContext("2d"); + + //"Draw" the chart here 👇 -const config = { - type: "pie", +const drawChart = (amount) => { + //font for chart + Chart.defaults.font.family = 'Syne Mono, monospace'; + Chart.defaults.font.weight = 'bold'; + Chart.defaults.color = '#fff'; + const config = { + type: "doughnut", data: { - labels: ["Finished projects", "Projects left"], + labels: ["Projects done", "All projects"], datasets: [ { - label: "My First Dataset", - data: [finishedProjects, 19 - finishedProjects], - backgroundColor: ["rgb(0,250,154,0.20)", "rgb(228, 228, 228)"], + label: "My Technigo projects", + data: [amount, 19 - amount], + backgroundColor: ["rgba(241, 187, 75,0.6)", "rgba(90, 112, 55, 0.1)"], + trans: 0.6, hoverOffset: 4, }, ], }, - }; - const myChart = new Chart( - document.getElementById('chart'), - config - ); + options: { + plugins: { + legend: { + position: 'bottom', + labels: { + font: { + size: 16, + }, + } + }, + } + } + + } + + + const projectsChart = new Chart(ctx, config); +}; + + + + + diff --git a/code/index.html b/code/index.html index 0f523689..cab8e83c 100644 --- a/code/index.html +++ b/code/index.html @@ -6,21 +6,31 @@ Project GitHub Tracker +
    -

    GitHub Tracker

    -

    -
    - -
    - +
    +

    GitHub Tracker

    +

    Technigo Boot Camp spring '22

    +
    +

    + +

    Boot camp progress:

    +
    + +
    + +
    +

    © Kristiina Kolu

    +

    Technigo Boot Camp spring '22 / project of week 7

    +
    diff --git a/code/script.js b/code/script.js index a9f8fd48..59f27e91 100644 --- a/code/script.js +++ b/code/script.js @@ -21,6 +21,7 @@ const options = { fetch(API_URL, options) .then(res => res.json()) .then(data => { + //using the fetched data for userdata function userData(data) //filter out and only show the forked ones @@ -39,16 +40,16 @@ const getPullRequests = (repos) => { //Get all the PRs for each project. //invoking the function drawChart using the amount of projects as an argument drawChart(repos.length) + repos.forEach(repo => { fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100', options) .then(res => res.json()) .then(data => { - - + + //1. Find only the PR that you made by comparing pull.user.login to your own username let myPullRequests = data.filter(element => element.user.login === username) - - + //2. Now you're able to get the commits for each repo by using the commits_url as an argument to call another function let commitsURL = myPullRequests[0].commits_url myCommits(commitsURL, repo.name) @@ -57,21 +58,36 @@ const getPullRequests = (repos) => { let reviewCommentsURL = myPullRequests[0].review_comments_url reviewComments(reviewCommentsURL, repo.name) - //just testing - let pushedDate = repo.pushed_at + //fecthing languages + let languagesURL = repo.languages_url + languages(languagesURL, repo.name) //showing results on the page with innerHTML document.getElementById('projects').innerHTML += `
    -

    ${repo.name}

    -

    Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', options)}

    -

    Default branch name: ${repo.default_branch}

    -

    URL: ${repo.html_url}

    - -
    -
    +
    GitHub Logo

    ${repo.name}

    +

    Latest update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB', {year: 'numeric', month: 'long', day: 'numeric'})}

    +

    Default branch: ${repo.default_branch}

    +

    Languages:

    +

    View project in GitHub

    + +
    ` + //here i made the accordion for commits messages and reviews: + let acc = document.getElementsByClassName("accordionButton"); + + for (let i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + this.classList.toggle("active"); + var comments = this.nextElementSibling; + if (comments.style.display === "block") { + comments.style.display = "none"; + } else { + comments.style.display = "block"; + } + }); + } }) }) @@ -89,7 +105,7 @@ const getPullRequests = (repos) => { ` //showing the username document.getElementById('username').innerHTML = ` - Username: ${data[0].owner.login} +
    GitHub Logo

    ${data[0].owner.login}

    ` } @@ -132,5 +148,55 @@ const getPullRequests = (repos) => { }) } - + +//language function to calculate the share of used languages +const languages = (url, repoName) => { + fetch(url, options) + .then(res => res.json()) + .then(data => { + //totalPercentage is the sum of different languages value + let totalPercentage = 0 + Object.keys(data).forEach(key => { + totalPercentage = totalPercentage + data[key] + }); + console.log('labels:', Object.keys(data)) + let keyArray = Object.keys(data) + let valueArray = [] + Object.keys(data).forEach(key => { + //next line is to calculate the share of each language + let percentage = Math.round((data[key] / totalPercentage)*100) + valueArray.push(percentage) + document.getElementById(`lang-${repoName}`).innerHTML += ` + ${key} (${percentage}%) + ` + }); + console.log('values:', valueArray) + //trying to draw language pie + // new Chart(`chart-${repoName}`, { + // type: "pie", + // data: { + // labels: keyArray, + // datasets: [{ + // backgroundColor: [ + // "#b91d47", + // "#00aba9", + // "#2b5797", + // "#e8c3b9", + // "#1e7145" + // ], + // data: valueArray + // }] + // }, + // options: { + // title: { + // display: true, + // text: "World Wide Wine Production" + // } + // } + // }) + + }) + +} + diff --git a/code/style.css b/code/style.css index c3489050..102bba4b 100644 --- a/code/style.css +++ b/code/style.css @@ -2,44 +2,156 @@ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + margin:0; } -body { - background: #FFECE9; +:root { + --primary: #353535; + --secondary: #3c6e71; + --accent: rgb(186, 223, 215); +} + +body{ + font-family: 'Syne Mono', monospace; + background-image: url('https://images.unsplash.com/photo-1519817914152-22d216bb9170?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1665&q=80'); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + width: 100vw; +} + +h1{ + font-size: 3rem; + padding: 1rem; + font-weight: bold; + color:#fff; +} + +h2{ + font-size:1.5rem; + font-weight: 500; + margin-bottom: 0.5rem; +} + +.whiteColor{ + color: #fff; +} + +.boldText{ + font-weight: bold; + text-decoration: underline; +} + +h3{ + font-size: 1.3rem; + font-weight: bold; } + + +.bigLogo{ + width: 2.5rem; + background-color:#fff; + border-radius: 50%; +} + + a{ + text-decoration: none; + color: black; + font-weight: bold; + } + + a:hover{ + cursor: pointer; + color: rgb(241, 187, 75); + } + /*Style for the profile info section*/ .profile-info{ display: flex; flex-direction: column; align-items: center; + gap:1rem; + margin-bottom: 2rem; +} + +.flexCont{ + display: flex; + align-items: center; + } + +.titles{ + display: flex; + flex-direction: column; + align-items: center; } .profile-pic{ - width: 200px; + width:250px; border-radius: 50%; + filter: grayscale(100%); + margin-top: 1rem; + } /*Style for the project section*/ .projects{ display: flex; - flex-wrap: wrap; + flex-direction: column; width: 100%; - justify-content: center; + align-items: center; } .project-card{ - width: 300px; + width:80%; + max-width: 500px; height: auto; - border: solid black; + background-color: #fff; + opacity: 0.7; display:flex; flex-direction: column; margin: 1rem; + padding: 1rem; + gap: 0.5rem; } +main{ + margin: 3rem 0; +} /*Styling the chart*/ .chart{ - width: 200px; + width: 250px; + padding:none; +} + +/*Hiding the commits and comments as default*/ +.comments{ + display: none; } + +/*footer styling*/ +footer{ + height: 200px; + background-color: #292b2d; + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + button{ + width: fit-content; + display: flex; + align-items: center; + margin-top: 1rem; + font-family: 'Syne Mono', monospace; + gap:0.5rem; + } + + button:hover{ + cursor: pointer; + } \ No newline at end of file From 3dc0b0a985a82598d6d1c5f66f4646957af758b9 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Sun, 27 Feb 2022 21:50:35 +0200 Subject: [PATCH 12/16] small change to chart.js --- code/chart.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/chart.js b/code/chart.js index 4affe637..f2eda107 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,10 +1,11 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById("chart").getContext("2d"); + //"Draw" the chart here 👇 const drawChart = (amount) => { + //DOM-selector for the canvas 👇 +const ctx = document.getElementById("chart").getContext("2d"); //font for chart Chart.defaults.font.family = 'Syne Mono, monospace'; Chart.defaults.font.weight = 'bold'; From 3e0346339ce9c9982f7dae6b93c3568dd66cb3f1 Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Sun, 27 Feb 2022 23:23:40 +0200 Subject: [PATCH 13/16] final changes --- code/index.html | 7 ++++--- code/script.js | 50 +++++++------------------------------------------ code/style.css | 35 +++++++++++++++++++++++++++++++--- 3 files changed, 43 insertions(+), 49 deletions(-) diff --git a/code/index.html b/code/index.html index cab8e83c..22ba9243 100644 --- a/code/index.html +++ b/code/index.html @@ -14,9 +14,9 @@

    GitHub Tracker

    Technigo Boot Camp spring '22

    -

    +
    -

    Boot camp progress:

    +

    BOOT CAMP PROGRESS:

    @@ -37,4 +37,5 @@

    Boot camp progress:

    - \ No newline at end of file + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 59f27e91..34cc815d 100644 --- a/code/script.js +++ b/code/script.js @@ -62,6 +62,9 @@ const getPullRequests = (repos) => { let languagesURL = repo.languages_url languages(languagesURL, repo.name) + //date for first git push + console.log('repo:',repo) + //showing results on the page with innerHTML document.getElementById('projects').innerHTML += `
    @@ -93,9 +96,7 @@ const getPullRequests = (repos) => { } - const commits = (url) => { - - } + //Userdata function (profile pic etc) const userData = (data) => { @@ -105,7 +106,7 @@ const getPullRequests = (repos) => { ` //showing the username document.getElementById('username').innerHTML = ` -
    GitHub Logo

    ${data[0].owner.login}

    +

    ${data[0].owner.login}

     ` } @@ -149,54 +150,17 @@ const getPullRequests = (repos) => { } -//language function to calculate the share of used languages +//language function to show what languages used in each project const languages = (url, repoName) => { fetch(url, options) .then(res => res.json()) .then(data => { - //totalPercentage is the sum of different languages value - let totalPercentage = 0 Object.keys(data).forEach(key => { - totalPercentage = totalPercentage + data[key] - }); - console.log('labels:', Object.keys(data)) - let keyArray = Object.keys(data) - let valueArray = [] - Object.keys(data).forEach(key => { - //next line is to calculate the share of each language - let percentage = Math.round((data[key] / totalPercentage)*100) - valueArray.push(percentage) document.getElementById(`lang-${repoName}`).innerHTML += ` - ${key} (${percentage}%) + ${key} ` }); - console.log('values:', valueArray) - //trying to draw language pie - // new Chart(`chart-${repoName}`, { - // type: "pie", - // data: { - // labels: keyArray, - // datasets: [{ - // backgroundColor: [ - // "#b91d47", - // "#00aba9", - // "#2b5797", - // "#e8c3b9", - // "#1e7145" - // ], - // data: valueArray - // }] - // }, - // options: { - // title: { - // display: true, - // text: "World Wide Wine Production" - // } - // } - // }) - }) - } diff --git a/code/style.css b/code/style.css index 102bba4b..de893522 100644 --- a/code/style.css +++ b/code/style.css @@ -18,7 +18,7 @@ body{ background-repeat: no-repeat; background-attachment: fixed; background-position: center; - width: 100vw; + height: 100vh; } h1{ @@ -31,7 +31,6 @@ h1{ h2{ font-size:1.5rem; font-weight: 500; - margin-bottom: 0.5rem; } .whiteColor{ @@ -56,10 +55,16 @@ h3{ border-radius: 50%; } +.smallLogo{ + width: 1.5rem; + background-color:#fff; + border-radius: 50%; +} + a{ text-decoration: none; - color: black; font-weight: bold; + color: black; } a:hover{ @@ -72,6 +77,7 @@ h3{ display: flex; flex-direction: column; align-items: center; + justify-content: center; gap:1rem; margin-bottom: 2rem; } @@ -79,6 +85,9 @@ h3{ .flexCont{ display: flex; align-items: center; + justify-content: center; + flex-wrap: wrap; + margin-bottom:1rem; } .titles{ @@ -125,6 +134,7 @@ main{ .chart{ width: 250px; padding:none; + margin-top: 0.5rem; } /*Hiding the commits and comments as default*/ @@ -154,4 +164,23 @@ footer{ button:hover{ cursor: pointer; + } + + .languagebox{ + background-color: black; + color: #fff; + padding:0 0.1rem; + border-radius: 1rem; + } + + @media (max-width:667px) { + .bigLogo{ + display: none; + } + h1{ + font-size: 2rem; + } + h2, h3{ + font-size: 1.1rem; + } } \ No newline at end of file From c7722758523a13c2fc9b24e1cebdd25b927e020f Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Sun, 27 Feb 2022 23:27:21 +0200 Subject: [PATCH 14/16] changed footer content --- code/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 22ba9243..26bb321e 100644 --- a/code/index.html +++ b/code/index.html @@ -29,7 +29,8 @@

    BOOT CAMP PROGRESS:

    © Kristiina Kolu

    -

    Technigo Boot Camp spring '22 / project of week 7

    +

    Technigo Boot Camp spring '22

    +

    Week 7 project

    From f6bb47789217b4e16881a4ac497ae6d1041f942e Mon Sep 17 00:00:00 2001 From: Kristiina Kolu Date: Sun, 27 Feb 2022 23:33:13 +0200 Subject: [PATCH 15/16] deleted console logs --- code/script.js | 3 --- code/style.css | 1 - 2 files changed, 4 deletions(-) diff --git a/code/script.js b/code/script.js index 34cc815d..c98ff5b7 100644 --- a/code/script.js +++ b/code/script.js @@ -62,9 +62,6 @@ const getPullRequests = (repos) => { let languagesURL = repo.languages_url languages(languagesURL, repo.name) - //date for first git push - console.log('repo:',repo) - //showing results on the page with innerHTML document.getElementById('projects').innerHTML += `
    diff --git a/code/style.css b/code/style.css index de893522..186fe570 100644 --- a/code/style.css +++ b/code/style.css @@ -85,7 +85,6 @@ h3{ .flexCont{ display: flex; align-items: center; - justify-content: center; flex-wrap: wrap; margin-bottom:1rem; } From c5bcbedb3cea4238feb163063ddd72359b9c724e Mon Sep 17 00:00:00 2001 From: Kristiina Kolu <91788124+kolkri@users.noreply.github.com> Date: Mon, 28 Feb 2022 00:10:22 +0200 Subject: [PATCH 16/16] Update README.md --- README.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 18a9ff40..eb0f8fd4 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,22 @@ # GitHub Tracker -Replace this readme with your own information about your project. +Goal wa to create a place to keep track of the GitHub repos done during Technigo Boot Camp. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +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 🥳) using [Chart.js](https://www.chartjs.org/). ## 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? +I started the project by fetching all my repos and and filtered only the ones that are forked from Technigo. After that I fetched each repo and filtered them with my own username. Fetching again with right URL:s I got also more information about used languages, review comments and my own commits. I also used github token to get unlimited amount of fetches. This was also my first time using chart.js to create simple doughnut chart. + ## View it live