From 921173254e2a3ad4b65d08c53951348754d6bbc2 Mon Sep 17 00:00:00 2001 From: rijad90 Date: Tue, 22 Feb 2022 19:59:03 +0100 Subject: [PATCH 1/5] done with step 1, added a little styling and class/id --- code/index.html | 37 +++++++++++++++++++++---------------- code/script.js | 31 +++++++++++++++++++++++++++++++ code/style.css | 19 +++++++++++++++++++ 3 files changed, 71 insertions(+), 16 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..0c2d8d10 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,26 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - + + + + + Project GitHub Tracker + + + + + +
+
+ +
+ + + + + + + - - - \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..dc1b869a 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,31 @@ +//Username +const username = 'rijad90' + +//API URL +const GITHUB_USER_API = `https://api.github.com/users/${username}` +const GITHUB_REPOS_API = `https://api.github.com/users/${username}/repos` + +//DOM selectors +const userProfile = document.getElementById('userProfile') +const userContaier = document.getElementById('container') + + +fetch(GITHUB_USER_API) + .then(res => res.json()) + .then(data =>{ + console.log(data) + userProfile.innerHTML += ` + +

${data.login}

+` +}) + +fetch(GITHUB_REPOS_API) + .then(res => res.json()) + .then(data =>{ + console.log(data) + userContaier.innerHTML += ` +

${data[0].html_url} + +` +}) \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..2ba13988 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,22 @@ body { background: #FFECE9; + margin: 0; + padding: 0; +} + + +p { + font-family: 'Times New Roman', Times, serif; +} + +.profile { + display: flex; + flex-direction: column; + padding: 2%; + +} + +.pic { + border-radius: 50%; + max-width: 30%; } \ No newline at end of file From 0fa6fdff2f9b5ad3ca4056fec83b30430e486739 Mon Sep 17 00:00:00 2001 From: rijad90 Date: Wed, 23 Feb 2022 14:10:00 +0100 Subject: [PATCH 2/5] added chart, gitignore and token --- .gitignore | 6 ++++++ code/chart.js | 31 +++++++++++++++++++++++++++++++ code/index.html | 5 ++++- code/script.js | 14 ++++++++++++++ code/style.css | 2 +- 5 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..dfa5a4fe --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ + + + +# other +code/token.js + diff --git a/code/chart.js b/code/chart.js index 92e85a30..3ae54d28 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,34 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + + const labels = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: 'rgb(255, 99, 132)', + borderColor: 'rgb(255, 99, 132)', + data: [0, 10, 5, 2, 20, 30, 45], + }] + }; + + 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 0c2d8d10..b64a642f 100644 --- a/code/index.html +++ b/code/index.html @@ -7,6 +7,7 @@ Project GitHub Tracker + @@ -19,8 +20,10 @@ - + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index dc1b869a..7c591f9f 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,20 @@ //Username const username = 'rijad90' + +const API_TOKEN = TOKEN || process.env.API_KEY; + + + +//authenticated request +const options = { + method: 'GET', // POST, PATCH, DELETE + headers: { + Authorization: `token ${API_TOKEN}` //token + } +} + + //API URL const GITHUB_USER_API = `https://api.github.com/users/${username}` const GITHUB_REPOS_API = `https://api.github.com/users/${username}/repos` diff --git a/code/style.css b/code/style.css index 2ba13988..c7a64b70 100644 --- a/code/style.css +++ b/code/style.css @@ -19,4 +19,4 @@ p { .pic { border-radius: 50%; max-width: 30%; -} \ No newline at end of file +} From 3a30fc0a0d6c17c8dc6914dd020ab8e158930522 Mon Sep 17 00:00:00 2001 From: rijad90 Date: Sat, 26 Feb 2022 20:26:12 +0100 Subject: [PATCH 3/5] final edit --- code/chart.js | 44 +++++++------------ code/index.html | 28 ++++++------- code/script.js | 109 +++++++++++++++++++++++++++++++----------------- code/style.css | 62 ++++++++++++++++++++++----- 4 files changed, 149 insertions(+), 94 deletions(-) diff --git a/code/chart.js b/code/chart.js index 3ae54d28..e65d771c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,35 +1,21 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 - - const labels = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - ]; - - const data = { - labels: labels, - datasets: [{ - label: 'My First dataset', - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgb(255, 99, 132)', - data: [0, 10, 5, 2, 20, 30, 45], - }] - }; - +//Draws the chart and displays progress in projects finished vs left +const drawChart = (amount) => { const config = { type: 'doughnut', - data: data, - options: {} - }; - + data: { + labels: ['Finished projects', 'Projects left'], + datasets: [ + { + label: 'Technigo projects', + data: [amount, 19 - amount], + backgroundColor: ['rgb(63, 114, 175)', 'rgb(17, 45, 78)'], + }, + ], + }, + } -const myChart = new Chart( - document.getElementById('chart'), - config - ); + const myChart = new Chart(ctx, config) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index b64a642f..a67669c2 100644 --- a/code/index.html +++ b/code/index.html @@ -1,29 +1,25 @@ - - - - + + + Project GitHub Tracker +

+
+
+
+ +
+ +
-
-
- -
- - - - - - - + - \ No newline at end of file diff --git a/code/script.js b/code/script.js index 7c591f9f..cdea67a2 100644 --- a/code/script.js +++ b/code/script.js @@ -1,45 +1,78 @@ -//Username -const username = 'rijad90' - - -const API_TOKEN = TOKEN || process.env.API_KEY; - - +// USERNAME +let username = 'rijad90' +// API +const GITHUB_USER_API = `https://api.github.com/users/${username}` +const GITHUB_REPOS_API = `https://api.github.com/users/${username}/repos` -//authenticated request -const options = { - method: 'GET', // POST, PATCH, DELETE - headers: { - Authorization: `token ${API_TOKEN}` //token - } +//FETCH API TO PROFILE. INJECTS PIC,USERNAME,BIO +const getProfile = () => { + fetch(GITHUB_USER_API) + .then((res) => res.json()) + .then((data) => { + profile.innerHTML += ` +
+

Github Tracker

+ +

${username}

+

${data.bio}

+
+ ` + }) } +getProfile() +//DOM SELECTOR +const projects = document.getElementById('projects-container') +//FETCH API AND FILTERS REPO. INJECTS REPO URL, NAME, DEF BRANCH, PUSHED DATE AND COMMIT +const fetchRepo = () => { + fetch(GITHUB_REPOS_API) + .then((res) => res.json()) + .then((data) => { + const technigoRepo = data.filter( + // FILTERS MY FORKED REPOS ONLY TO DESPLAY THE ONES NAMNED "project-" + (repo) => repo.name.includes('project-') && repo.fork + ) -//API URL -const GITHUB_USER_API = `https://api.github.com/users/${username}` -const GITHUB_REPOS_API = `https://api.github.com/users/${username}/repos` - -//DOM selectors -const userProfile = document.getElementById('userProfile') -const userContaier = document.getElementById('container') + technigoRepo.forEach((repo) => { + projects.innerHTML += ` +
+ ${repo.name.toUpperCase()} +

Default branch: ${repo.default_branch}

+

Most recent push: ${new Date(repo.pushed_at).toISOString().substring(0, 10)}

+

Number of commits:

+
+ ` + }) + fetchPull(technigoRepo) + drawChart(technigoRepo.length) + }) +} +// FETCH ALL REPO PULLS +const fetchPull = (allRepo) => { + allRepo.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) + .then((res) => res.json()) + .then((data) => { + const myPullRequests = data.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML += + 'No pull request' + } + }) + }) +} -fetch(GITHUB_USER_API) - .then(res => res.json()) - .then(data =>{ - console.log(data) - userProfile.innerHTML += ` - -

${data.login}

-` -}) +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) +} -fetch(GITHUB_REPOS_API) - .then(res => res.json()) - .then(data =>{ - console.log(data) - userContaier.innerHTML += ` -

${data[0].html_url} - -` -}) \ No newline at end of file +fetchRepo() \ No newline at end of file diff --git a/code/style.css b/code/style.css index c7a64b70..4b1eed44 100644 --- a/code/style.css +++ b/code/style.css @@ -1,22 +1,62 @@ -body { - background: #FFECE9; - margin: 0; +* { + box-sizing: border-box; +} + +html { + font-family: "Montserrat", sans-serif; + border: 0; padding: 0; + margin: 0; +} + +body { + display: grid; + justify-content: center; + background-color: #3F72AF; } +.main { + display: grid; + height: auto; + text-align: center; + justify-content: center; + row-gap: 1em; + +} -p { - font-family: 'Times New Roman', Times, serif; +.projects-container { + display: grid; + gap: 1rem; } -.profile { - display: flex; - flex-direction: column; - padding: 2%; +.projects, .profile, .chart { + background-color: whitesmoke; + border-radius: 3%; + align-items: center; + margin: 10px; + padding: 10%; } -.pic { +.profile_picture { border-radius: 50%; - max-width: 30%; + width: 50%; +} + +a, a:visited, a:hover, a:active { + color: #3F72AF; } + +p, h1, a { + color: #3F72AF; +} + +@media (min-width: 668px) { + .projects-container { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 1080px) { + .projects-container { + grid-template-columns: repeat(3, 1fr); + } \ No newline at end of file From 2dfae3af2c4320a96d2dba8a26200f6e46a67790 Mon Sep 17 00:00:00 2001 From: Rijad <91568892+rijad90@users.noreply.github.com> Date: Sat, 26 Feb 2022 20:29:15 +0100 Subject: [PATCH 4/5] Delete .gitignore --- .gitignore | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index dfa5a4fe..00000000 --- a/.gitignore +++ /dev/null @@ -1,6 +0,0 @@ - - - -# other -code/token.js - From fa4529fb43bb977bc204361f33521f16bf2810af Mon Sep 17 00:00:00 2001 From: Rijad <91568892+rijad90@users.noreply.github.com> Date: Sun, 27 Feb 2022 20:55:04 +0100 Subject: [PATCH 5/5] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..3b2ef6fd 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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. +This weeks project was about deepening our knowledge of API and also some unit testing. ## 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've had huge issues with getting my personal token to work and I must say that it has defeted me, I never managed to solve it (this time). I have never spent so much time on a single problem, but I still like the fact that I never gave in, I kept trying. + +If I had more time, I would make the token work :D ## 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://w7-project-github-tracker.netlify.app/