From 97e0f5af52160060661aae8e6ede24f11b98ffa3 Mon Sep 17 00:00:00 2001 From: Jenny Fiskaare Date: Sat, 26 Feb 2022 22:22:42 +0100 Subject: [PATCH 1/4] styling and fetching --- .DS_Store | Bin 0 -> 8196 bytes .gitignore | 1 + code/chart.js | 23 +++++++++++ code/index.html | 33 ++++++++++++--- code/script.js | 104 ++++++++++++++++++++++++++++++++++++++++++++++++ code/secret.js | 2 + code/style.css | 51 +++++++++++++++++++++++- 7 files changed, 207 insertions(+), 7 deletions(-) create mode 100644 .DS_Store create mode 100644 .gitignore create mode 100644 code/secret.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..afb61c74046a5a96fa72627e55b5327f368d9ddd GIT binary patch literal 8196 zcmeHMTWl3Y82-Pu!0bZl7J+sTmmVn^Zx@#_euByXO=r zHC3bW!C<^3##=P#8zwxF7+*}h8;zIPcuVv_UwkwgO?=XScDGF_G|?B8u#?PuGynXv z^Ut^6naS)SBD59FW};dm5}YM!^SQW2lKnDYmC9nv97gbX%8mHLImgR!`@^fe6GOs4 z!a%}6!a%}6!odH50Y0;360@B9QEyTv3?vNPkPOKEAxmh@Cv|K!R9b= zU6U2Ybc~r8$0Ot(PKbswMne%_F%S)Bdph>Z#5f*dG@KA$J`m50_=bXTc7A?3bSGpY zOv;3Tgn_FWkazbA%9BSXS<~9RH0U?N3*BAk!)ZDMZe7` z9G0zaBRG|d>ph<5Ox2CtLE9P`)E2jUZeZB1RR{;$ro}Et`fS(qM%uihYx?1HvQdW+ zicki%+R@RC8(SLF8=9KO8q=d&TDCN%TQ+YU8&gD0L-So-$A`|G9X&U8|FhAW5bq0A zHDis>O<$nt=bapfD4nNP?f9kk=&ME9Gn1?SdUDl@I$!U)N8LN9Eh_P1_74ZP=lTb& zg3mapRryRnSKf2G3zqEf%X?07$n^)c>b&9Pi;fXkt&Wqm&su(eV4V(RZNT>mL3`*p zsA)ytI$*J%U9vjZ+wZseanenLa&f_u6{~Jp*VMA@?v9Ddg;iShB2^t=p4`AbVOxdX z5!(z-9Wwm9<(js8vae+OcFwVSTw} z&=yuzs&)F!igsBXF*%%lo+)QC!ydg(ZxG_Jw6_;5F3m8gHEVUX$CnWsLJ2L6>s7Vq zUVg!v&mqXbn>VO>uVdsaM>7=>nl^1#^}bTXq_!tEZr`Em{dsR_h?nSBqmj)rCcRZ} z7upBnn4EjB;RpMNEmuxoQ@gaYPS+1fd#h<$rVye&vo;bzNP|+JX^J%=NT=KRDBDd( z$f99-h#sT!^f*0FuhJ#DOmEWr^f7%(pV8;^E&V`0(J%BX{YJmjpAb+m9}A#k73#4X zP1uT^$eyWyh{1*Hq^&b@zWG*KZa?8og=pl9lyq*KgRo zqjl{t3;D~?)!S0+X$Y-6Y^Lr|n*|G0n-lfkscuqO!dgYtyH(vTSgG3FsCTED zQRI(Iqwvv6LrUen>mRG{0$rpx=so&~Rre)*Pe0Pn^ap@>s74KHu?)+x5^HcP)}ayW zu?btS4coB;o!Eul=wki#pcj4U#{lck4E1ND03St^ScebbK~~`-cr@1G)2zb_cx8s_ zx@M^EwdtxWWecw3xhL5+snRRmlh$>|KzS5#t-Swt&i?)Xx?5KgaKb>sz~5&86&=}* zHuj%wXP0;FH0R@-Ws-j55r#v!2(ROe;dPvG>JLM%r`c7G$;3DwAzL{8>mLG=^B>9i KA4>0rF8%`Cu;4fV literal 0 HcmV?d00001 diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..a76fd6e1 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code./secret.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..7fc78081 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,26 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Completed projects', + 'Projects left to build', + ], + datasets: [{ + label: 'My Technigo projects', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(235, 14, 14)', + 'rgb(64, 19, 19)', + ], + hoverOffset: 4 + }], + }, + }; + + const projectsChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..36168e9a 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,41 @@ - Project GitHub Tracker + ⏱ My GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+ +

My GitHub Tracker

+ +
+ +

+ +
+ +
+ +

PROJECTS

+ +
+ +
+ +
- + + + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..eed6461c 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,104 @@ +const username = 'JenFi72' +let reponame = '' + +const profileBox= document.getElementById('profileBox'); +const profileImage = document.getElementById('profileImage') +const projectBox = document.getElementById('projects') +const repoName = document.getElementById('reponame') + +const API_URL = `https://api.github.com/users/${username}/repos`; +const PULL_URL = `https://api.github.com/repos/Technigo/${reponame}/pulls`; +const PROFILE_URL = `https://api.github.com/users/${username}` + + + + +const options = { + method: 'GET', + headers: { + Authorization: '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' // my TOKEN + } + } + + +//FETCH PROFILE + const fetchProfile = () =>{ + fetch(PROFILE_URL) + .then(res => res.json()) + .then(profileData => { + + profileBox.innerHTML +=` + +

${profileData.name}

+

${profileData.login}

` + }); + } + + + + +//FETCH REPOS + + +const getRepos = () => { +fetch (API_URL, options) +.then(res => res.json()) +.then(data => { + const technigoRepos =data.filter( + (repo) => repo && repo.name.startsWith ('project-') + ); + +technigoRepos.forEach((repo) => { + projectBox.innerHTML += ` +
+

${repo.name}

+

Branch: ${repo.default_branch}

+

URL: ${repo.html_url}

+

Main Language: ${repo.language}

+

Last push: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits:

+
+ `; + getPullRequests(technigoRepos); + //drawChart(technigoRepos.length); + }); + +}); +}; + +//FETCHING THE PULL REQUESTS +const getPullRequests = (allRepos) => { + allRepos.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULL_URL) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request yet'; + } + }); + }); + }; + +//FETCHING COMMITS +const fetchCommits = (urlMyCommits, myRepoName) => { + fetch(urlMyCommits) + .then((res) => res.json ()) + .then ((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }) +}; + + +fetchProfile(); +getRepos(); + + +//reponame = data [7].name \ No newline at end of file diff --git a/code/secret.js b/code/secret.js new file mode 100644 index 00000000..a487f07f --- /dev/null +++ b/code/secret.js @@ -0,0 +1,2 @@ +// secret.js file +const API_TOKEN = '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'; \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..a4934ffb 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,50 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #11130d; + font-family: 'Zilla Slab', serif; + +} + + +h1{ + font-family: 'Galada', cursive; + font-size: 65pt; + text-align: center; + text-shadow: 6px 5px rgb(151, 31, 71); + margin-bottom: -2rem; + color: rgb(216, 83, 128); +} + +h3{ + font-size: 35pt; + text-align: center; + color: rgb(216, 83, 128); +} + +.profile-box { + display: flex; + align-items: center; + flex-direction: column; + width: 90%; + margin: 0 auto; + color: rgb(216, 83, 128); +} + +.profile-image { + border-radius: 50%; + width: 290px; + align-content: center; + border: 6px solid rgb(216, 83, 128); + } + + .projects { + display: flex; + flex-flow: wrap; + } + + .repo-card { + display: flexbox; + margin: 2rem; + border-radius: 1rem; + padding: 1rem; + background-color:rgb(216, 83, 128) + } \ No newline at end of file From 663afec4761a4c6162b1b5938b8d11c2f96da924 Mon Sep 17 00:00:00 2001 From: Jenny Fiskaare Date: Sun, 27 Feb 2022 19:54:49 +0100 Subject: [PATCH 2/4] your commit message --- code/chart.js | 36 ++++++++++++++++++------------------ code/index.html | 18 ++++++++++-------- code/script.js | 31 ++++++++++++------------------- code/secret.js | 2 +- code/style.css | 36 ++++++++++++++++++++++++++++++++---- 5 files changed, 73 insertions(+), 50 deletions(-) diff --git a/code/chart.js b/code/chart.js index 7fc78081..9a77479d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,27 +1,27 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') + //"Draw" the chart here 👇 -const drawChart = (amount) => { +const drawChart = (number) => { const config = { - type: 'doughnut', - data: { - labels: [ - 'Completed projects', - 'Projects left to build', + type: "doughnut", + data: { + labels: ["DONE", "LEFT TO DO"], + datasets: [ + {label: "PROJECT CHART", + data: [number, 19 - number], + backgroundColor: ["#ff874e", "#db738e"], + hoverOffset: 4, + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(255, 206, 86, 1)', + ], + borderWidth: 4 + }, ], - datasets: [{ - label: 'My Technigo projects', - data: [amount, 19-amount], - backgroundColor: [ - 'rgb(235, 14, 14)', - 'rgb(64, 19, 19)', - ], - hoverOffset: 4 - }], }, }; - - const projectsChart = new Chart(ctx, config); -} + const myChart = new Chart(ctx, config); + }; \ No newline at end of file diff --git a/code/index.html b/code/index.html index 36168e9a..4183d251 100644 --- a/code/index.html +++ b/code/index.html @@ -6,9 +6,15 @@ ⏱ My GitHub Tracker + + + + + +

My GitHub Tracker

@@ -19,26 +25,22 @@

My GitHub Tracker

-
- +

PROJECTS

-
-
- - +
+ +
- - \ No newline at end of file diff --git a/code/script.js b/code/script.js index eed6461c..27e479cd 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,5 @@ const username = 'JenFi72' -let reponame = '' +let reponame = ' ' const profileBox= document.getElementById('profileBox'); const profileImage = document.getElementById('profileImage') @@ -11,15 +11,14 @@ const PULL_URL = `https://api.github.com/repos/Technigo/${reponame}/pulls`; const PROFILE_URL = `https://api.github.com/users/${username}` - +//TOKEN const options = { method: 'GET', headers: { - Authorization: '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' // my TOKEN + Authorization: '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' // my TOKEN } } - //FETCH PROFILE const fetchProfile = () =>{ @@ -29,17 +28,15 @@ const options = { profileBox.innerHTML +=` -

${profileData.name}

-

${profileData.login}

` +

NAME: ${profileData.name}

+

USERNAME: ${profileData.login}

` }); } - - + fetchProfile(); //FETCH REPOS - const getRepos = () => { fetch (API_URL, options) .then(res => res.json()) @@ -60,17 +57,16 @@ technigoRepos.forEach((repo) => { `; getPullRequests(technigoRepos); - //drawChart(technigoRepos.length); + drawChart(technigoRepos.length); //* if this one is commented out, more projects will appear. Do not know why. }); }); }; -//FETCHING THE PULL REQUESTS +//FETCH THE PULL REQUESTS const getPullRequests = (allRepos) => { allRepos.forEach((repo) => { - const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; - fetch(PULL_URL) + fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=150`) .then((res) => res.json()) .then((data) => { const myPullRequest = data.find( @@ -81,24 +77,21 @@ const getPullRequests = (allRepos) => { fetchCommits(myPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - 'No pull request yet'; + 'No pull requests or closed'; } }); }); }; -//FETCHING COMMITS +//FETCH COMMITS const fetchCommits = (urlMyCommits, myRepoName) => { fetch(urlMyCommits) .then((res) => res.json ()) .then ((data) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }) }; - -fetchProfile(); getRepos(); - -//reponame = data [7].name \ No newline at end of file diff --git a/code/secret.js b/code/secret.js index a487f07f..9bef5b73 100644 --- a/code/secret.js +++ b/code/secret.js @@ -1,2 +1,2 @@ // secret.js file -const API_TOKEN = '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'; \ No newline at end of file +const API_TOKEN = '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'; \ No newline at end of file diff --git a/code/style.css b/code/style.css index a4934ffb..c9bdea7d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,10 +1,9 @@ body { background: #11130d; - font-family: 'Zilla Slab', serif; - + font-family: 'Zilla Slab', serif; + display: flexbox; } - h1{ font-family: 'Galada', cursive; font-size: 65pt; @@ -36,9 +35,11 @@ h3{ border: 6px solid rgb(216, 83, 128); } + .projects { display: flex; - flex-flow: wrap; + flex-wrap: wrap; + justify-content: space-evenly; } .repo-card { @@ -47,4 +48,31 @@ h3{ border-radius: 1rem; padding: 1rem; background-color:rgb(216, 83, 128) + } + + .chart-size{ + height: 500px; + width: 500px; +padding: 3rem; +justify-content: space-evenly; + } + + @media (max-width: 624px) { + h1{ + font-size: 30pt; + } + .profile-image { + width: 190px; + } +.h3 { + font-size: 20pt + } + .repo-card { + margin-left: 5rem; + margin-right: 5rem; + } + .chart-size{ + height: 250px; + width: 250px; +} } \ No newline at end of file From 6902636825a3676ff9f75574dbe8bc76ca5a11ad Mon Sep 17 00:00:00 2001 From: Jenny Fiskaare Date: Sun, 27 Feb 2022 19:56:28 +0100 Subject: [PATCH 3/4] added chart and styling --- code/chart.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/chart.js b/code/chart.js index 9a77479d..fbb0037e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,7 +2,7 @@ const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +//CHART const drawChart = (number) => { const config = { @@ -24,4 +24,5 @@ const drawChart = (number) => { }, }; const myChart = new Chart(ctx, config); - }; \ No newline at end of file + }; + \ No newline at end of file From 6e18ad3c5585a8536f65c202f9ffb8bfc74d5ee6 Mon Sep 17 00:00:00 2001 From: Jenny Fiskaare <91797551+JenFi72@users.noreply.github.com> Date: Sun, 27 Feb 2022 20:08:37 +0100 Subject: [PATCH 4/4] Update README.md --- README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..7442a16e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ # GitHub Tracker -Replace this readme with your own information about your project. +In this project we were suppose to build a tracker of all our projects related to Technigo using GitHub API. The site should include: + + +- A list of all repos forked from Technigo +- Username and profile picture +- Most recent push for each repo +- Default branch for each repo +- URL to the actual GitHub repo +- Number of commits per repo +- Chart showing completed projects/total. -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? +In order to solve the problem I've worked with API's and a personal token. A challening project where there still are things needed to be fixed (when the chart is showing only 2 out of 5 projects are visible). ## 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://jolly-hopper-ee7c71.netlify.app/