From a61547a8552f592801ffc867be8776238c3ce9b5 Mon Sep 17 00:00:00 2001 From: Lisen Lundgren Date: Sun, 27 Feb 2022 10:37:24 +0100 Subject: [PATCH 1/7] Added token and fetched repo data --- .gitignore | 1 + code/index.html | 8 ++++++-- code/script.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 9 ++++++++- 4 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c80900c9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..1c80c360 100644 --- a/code/index.html +++ b/code/index.html @@ -5,16 +5,20 @@ Project GitHub Tracker + + +

GitHub Tracker

-

Projects:

-
+
+
+ diff --git a/code/script.js b/code/script.js index e69de29b..77f49165 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,46 @@ +const userSection = document.getElementById ('userSection') +const projectSection = document.getElementById ('projectSection') + +const username = 'mistscale' +const API_USER_URL = `https://api.github.com/users/${username}` +const API_REPOS_URL = `https://api.github.com/users/${username}/repos` + +const options = { + method: 'GET', + headers: { + Authorization: 'API_TOKEN' + } + } + +// Display profile picture and username +const fetchUser = () => { + fetch(API_USER_URL) + .then(res => res.json()) + .then(data => { + console.log(data) + userSection.innerHTML = ` + +

${data.login}

+ ` + }) + fetchRepos() +} + +const fetchRepos = () => { + fetch(API_REPOS_URL) + .then(res => res.json()) + .then(data => { + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project')) + forkedRepos.forEach((repo) => { + projectSection.innerHTML += ` +
+

${repo.name}

+

Repo link: here

+

Default branch: ${repo.default_branch}

+

Recent update: ${new Date(repo.pushed_at).toLocaleDateString('sv-SE')}

+
` + }) + }) +} + +fetchUser() diff --git a/code/style.css b/code/style.css index 7c8ad447..fea9c7d1 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,10 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; +} body { background: #FFECE9; -} \ No newline at end of file + font-family: 'Source Code Pro', monospace; +} From 0646a02247806f1dbaba055ef919f264ccbc6590 Mon Sep 17 00:00:00 2001 From: Lisen Lundgren Date: Sun, 27 Feb 2022 21:19:53 +0100 Subject: [PATCH 2/7] script and chart done, draft styling with flexbox --- README.md | 15 ++++++++---- code/chart.js | 30 ++++++++++++++++++++++++ code/index.html | 16 ++++++++----- code/script.js | 61 +++++++++++++++++++++++++++++++++++++------------ code/style.css | 42 +++++++++++++++++++++++++++++++++- 5 files changed, 139 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..40d7e5db 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,19 @@ # 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. +The assignment was to create a place to keep track of the GitHub repos that I'm using at the Technigo bootcamp. Following things should be included in this project: +- 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 ## 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? +The thing I struggled with the most was to fetch the pull request and number of commits. I solved it by putting the other data inside a div within the innerHTML. +If I had more time with this project I would like to spend it on the styling to make it less shitty lmao xd ## View it live diff --git a/code/chart.js b/code/chart.js index 92e85a30..11008a9f 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,34 @@ +//Font-family for the chart +Chart.defaults.font.family = 'Source Code Pro, monospace'; + //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const activateChart = (projects) => { + const labels = [ + 'Finished projects', + 'Remaining projects', + ] + + const data = { + labels: labels, + datasets: [{ + + data: [projects, 19-projects], + label: 'My finished projects', + backgroundColor: ['rgb(70, 70, 70)', 'rgb(170, 170, 170)'] + }] + } + + const config = { + type: 'doughnut', + data: data, + options: {} + } + + const myChart = new Chart(document.getElementById('chart'),config); + } + + + diff --git a/code/index.html b/code/index.html index 1c80c360..5eb6f754 100644 --- a/code/index.html +++ b/code/index.html @@ -5,19 +5,23 @@ Project GitHub Tracker + - + -

GitHub Tracker

-
-
+ +
+
+
+
- - +
+ +
diff --git a/code/script.js b/code/script.js index 77f49165..632ab7e7 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,5 @@ const userSection = document.getElementById ('userSection') -const projectSection = document.getElementById ('projectSection') +const repoSection = document.getElementById ('repoSection') const username = 'mistscale' const API_USER_URL = `https://api.github.com/users/${username}` @@ -13,34 +13,67 @@ const options = { } // Display profile picture and username -const fetchUser = () => { - fetch(API_USER_URL) +const getUser = () => { + fetch(API_USER_URL, options) .then(res => res.json()) .then(data => { - console.log(data) userSection.innerHTML = ` - -

${data.login}

- ` + +

${data.login}

` }) - fetchRepos() + getRepos() } -const fetchRepos = () => { - fetch(API_REPOS_URL) +const getRepos = () => { + fetch(API_REPOS_URL, options) .then(res => res.json()) .then(data => { const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project')) forkedRepos.forEach((repo) => { - projectSection.innerHTML += ` -
+ repoSection.innerHTML += ` +

${repo.name}

Repo link: here

Default branch: ${repo.default_branch}

Recent update: ${new Date(repo.pushed_at).toLocaleDateString('sv-SE')}

-
` + ` }) + getPullRequests(forkedRepos) + activateChart(forkedRepos.length) + }) + +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then(data => { + + const filterPullRequests = data.find((pull) => pull.user.login === repo.owner.login) + + if (filterPullRequests) { + document.getElementById(`${repo.name}`).innerHTML += ` +

Pull request: here

` + } else { + document.getElementById(`${repo.name}`).innerHTML += ` +

Pull request by team member

` + } + if (filterPullRequests) { + getCommits(filterPullRequests.commits_url, repo.name) + } else { + document.getElementById(`${repo.name}`).innerHTML += ` +

Commits by team member

` + } + }) }) } -fetchUser() +const getCommits = (commitsURL, repoName) => { + fetch(commitsURL) + .then((res) => res.json()) + .then (data => { + document.getElementById(repoName).innerHTML += ` +

Commits: ${data.length}

` + }) +}} + +getUser() diff --git a/code/style.css b/code/style.css index fea9c7d1..54002079 100644 --- a/code/style.css +++ b/code/style.css @@ -4,7 +4,47 @@ box-sizing: border-box; text-decoration: none; } + body { - background: #FFECE9; + background: #f2f2f2; font-family: 'Source Code Pro', monospace; } + +.profile-img { + border-radius: 50%; + width: 20vh; +} + +.user-container { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; + margin: 1rem; +} + +.repo-container { + display: flex; + justify-content: center; + flex-direction: column; + gap: 2rem; + padding: 2rem; +} + +.chart-container { + margin: auto; + width: 50%; + +} + +@media (min-width: 668px) { + .repo-container { + flex-direction: row; + flex-wrap: wrap; + } + +@media (min-width: 1025px) { + .repo-container { + flex-direction: row; + flex-wrap: wrap; + } \ No newline at end of file From 617e259725afcf8022e86bc5259d8e1a5f3df210 Mon Sep 17 00:00:00 2001 From: Lisen Lundgren <64134134+mistscale@users.noreply.github.com> Date: Sun, 27 Feb 2022 21:26:53 +0100 Subject: [PATCH 3/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 40d7e5db..2c9df71b 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ The assignment was to create a place to keep track of the GitHub repos that I'm ## The problem -The thing I struggled with the most was to fetch the pull request and number of commits. I solved it by putting the other data inside a div within the innerHTML. +All the problems will be added here soon... If I had more time with this project I would like to spend it on the styling to make it less shitty lmao xd ## View it live From 2bbfe66ad2889d4daa526bd164d0335aecfbfd92 Mon Sep 17 00:00:00 2001 From: Lisen Lundgren <64134134+mistscale@users.noreply.github.com> Date: Sun, 27 Feb 2022 21:38:18 +0100 Subject: [PATCH 4/7] Update README.md --- README.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/README.md b/README.md index 2c9df71b..58bf8484 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,6 @@ # GitHub Tracker -The assignment was to create a place to keep track of the GitHub repos that I'm using at the Technigo bootcamp. Following things should be included in this project: -- 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 +The assignment was to create a place to keep track of the GitHub repos from the Technigo bootcamp. ## The problem From 99e347552280d8fff92d268a2f8e251d94a71867 Mon Sep 17 00:00:00 2001 From: Lisen Lundgren Date: Mon, 28 Feb 2022 20:14:37 +0100 Subject: [PATCH 5/7] project done-ish --- code/chart.js | 8 ++++---- code/script.js | 6 +++--- code/style.css | 28 ++++++++++++++++++++-------- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/code/chart.js b/code/chart.js index 11008a9f..a4ad2b4e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -7,8 +7,8 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 const activateChart = (projects) => { const labels = [ - 'Finished projects', - 'Remaining projects', + 'Projects done', + 'Projects to do' ] const data = { @@ -16,8 +16,8 @@ const activateChart = (projects) => { datasets: [{ data: [projects, 19-projects], - label: 'My finished projects', - backgroundColor: ['rgb(70, 70, 70)', 'rgb(170, 170, 170)'] + label: 'Projects', + backgroundColor: ['rgb(244, 132, 95)', 'rgb(220, 220, 220)'] }] } diff --git a/code/script.js b/code/script.js index 632ab7e7..80c0f128 100644 --- a/code/script.js +++ b/code/script.js @@ -12,14 +12,14 @@ const options = { } } -// Display profile picture and username +// Display profile picture and username from user api const getUser = () => { fetch(API_USER_URL, options) .then(res => res.json()) .then(data => { userSection.innerHTML = ` -

${data.login}

` +

${data.login}

` }) getRepos() } @@ -31,7 +31,7 @@ const getRepos = () => { const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project')) forkedRepos.forEach((repo) => { repoSection.innerHTML += ` -
+

${repo.name}

Repo link: here

Default branch: ${repo.default_branch}

diff --git a/code/style.css b/code/style.css index 54002079..733ad988 100644 --- a/code/style.css +++ b/code/style.css @@ -6,35 +6,45 @@ } body { - background: #f2f2f2; + background: #EEE; font-family: 'Source Code Pro', monospace; } .profile-img { border-radius: 50%; - width: 20vh; + width: 10rem; + margin: 1rem; } .user-container { display: flex; - flex-direction: row; + flex-direction: column; align-items: center; - gap: 2rem; - margin: 1rem; } .repo-container { display: flex; justify-content: center; flex-direction: column; + align-items: stretch; gap: 2rem; padding: 2rem; } +.repo-name { + background-color: #FFF; + padding: 1rem; + width: 20rem; +} + +.repo-name a { + color: #F4845F; +} + .chart-container { margin: auto; - width: 50%; - + width: 20rem; + padding: 1rem; } @media (min-width: 668px) { @@ -42,9 +52,11 @@ body { flex-direction: row; flex-wrap: wrap; } +} @media (min-width: 1025px) { .repo-container { flex-direction: row; flex-wrap: wrap; - } \ No newline at end of file + } +} From 5935f18f38963d45a5bceb85d850485759d5364d Mon Sep 17 00:00:00 2001 From: Lisen Lundgren Date: Mon, 28 Feb 2022 20:17:55 +0100 Subject: [PATCH 6/7] project done-ish --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 40d7e5db..6782b9c5 100644 --- a/README.md +++ b/README.md @@ -12,8 +12,6 @@ The assignment was to create a place to keep track of the GitHub repos that I'm ## The problem -The thing I struggled with the most was to fetch the pull request and number of commits. I solved it by putting the other data inside a div within the innerHTML. -If I had more time with this project I would like to spend it on the styling to make it less shitty lmao xd ## View it live From aa3ef9ea2fc7b26ddd82c499177ab8e87b4df99a Mon Sep 17 00:00:00 2001 From: Lisen Lundgren <64134134+mistscale@users.noreply.github.com> Date: Mon, 28 Feb 2022 21:02:38 +0100 Subject: [PATCH 7/7] Create README.md --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 00000000..8b63597c --- /dev/null +++ b/README.md @@ -0,0 +1,8 @@ +# GitHub Tracker +The assignment was to create a GitHub tracker of all my Technigo-repos using GitHub API. + +## The problem +Problem description and code comments will be added soon... + +## View it live +https://lisen-github-tracker.netlify.app/