From bf3f1eba476f2317c2a1e2b0bd741b7cab9922cc Mon Sep 17 00:00:00 2001 From: Emelie Date: Fri, 8 Oct 2021 13:56:50 +0200 Subject: [PATCH 1/7] Followed Maks video, fetched repos, commits and chart --- code/TO DO | 33 +++++++++++++++++++++++ code/chart.js | 24 +++++++++++++++++ code/index.html | 4 ++- code/script.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++ code/token.js | 0 5 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 code/TO DO create mode 100644 code/token.js diff --git a/code/TO DO b/code/TO DO new file mode 100644 index 00000000..1daa6033 --- /dev/null +++ b/code/TO DO @@ -0,0 +1,33 @@ + +1) Fetch repos and console log them +2) get them in the browser +3) filter out the technigo repos +4) test chart library + + + + +Jennys: + +const USER = 'pcruzem'; +const REPOS_URL =`https://api.github.com/users/${USER}/repos`; +const projectsContainer = document.getElementById('projects'); + +const getRepos = () => { + fetch (REPOS_URL) + .then(response => response.json()) + .then(data => { + console.log(data) + // data.forEach(repo => console.log(repo.name)) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + forkedRepos.forEach(repo => projectsContainer.innerHTML = `

${repo.name}

`) + }) +} + + +// const options = { +// method: 'GET', +// headers: { +// Authorization: `token ${token}`, +// }, +// }; \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..99f1ee79 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,27 @@ 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, 20-amount], + backgroundColor: [ + 'rgb(219,57,141)', + 'rgb(0,255,255)', + ], + hoverOffset: 4 + }], + }, + }; + + const projectsChart = new Chart(ctx, config); +} + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..a43c1897 100644 --- a/code/index.html +++ b/code/index.html @@ -15,7 +15,9 @@

Projects:

- + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..7cc68760 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,71 @@ +const USER = 'pcruzem'; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const projectsContainer = document.getElementById('projects'); + +const fetchRepositories = () => { + fetch (REPOS_URL) + .then((res)=> res.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); + + technigoRepositories.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ ${repo.name} with default branch ${ + repo.default_branch + } +

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

+

Commits amount:

+
+ `; + + }); + + //Aproach number 2 + fetchPullRequestsArray(technigoRepositories); + + //Draw chart with technigoRepos data + drawChart(technigoRepositories.length); + + }); +}; + +const fetchPullRequestsArray = (allRepositories) => { + allRepositories.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 + ); + console.log(myPullRequest); + + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'This was a group project. No pull requests made by pcruzem.'; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + + +fetchRepositories (); \ No newline at end of file diff --git a/code/token.js b/code/token.js new file mode 100644 index 00000000..e69de29b From 2b381ef186e15a69f714a0295adb2e4cdd2755bf Mon Sep 17 00:00:00 2001 From: Emelie Date: Fri, 8 Oct 2021 15:35:49 +0200 Subject: [PATCH 2/7] Added fetchprofile but its not working yet --- code/index.html | 10 +++++++++- code/script.js | 20 ++++++++++++++++++-- code/token.js | 0 3 files changed, 27 insertions(+), 3 deletions(-) delete mode 100644 code/token.js diff --git a/code/index.html b/code/index.html index a43c1897..194fb6a1 100644 --- a/code/index.html +++ b/code/index.html @@ -8,7 +8,15 @@ -

GitHub Tracker

+

GitHub Tracker

+
+
+
+ +
+ +
+

Projects:

diff --git a/code/script.js b/code/script.js index 7cc68760..b26a8785 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,24 @@ const USER = 'pcruzem'; +const PROFILE_URL = `https://api.github.com/users/${USER}`; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const profileContainer = document.getElementById('profile-container'); const projectsContainer = document.getElementById('projects'); + +// fetch Profile function +const fetchProfile = () => { + fetch(PROFILE_URL) + .then((res) => res.json()) + .then((profileData) => { + profileContainer.innerHTML += ` + +

${profileData.name}

+

${profileData.login}

+ ` + }); + } + const fetchRepositories = () => { fetch (REPOS_URL) .then((res)=> res.json()) @@ -24,7 +40,7 @@ const fetchRepositories = () => { }); - //Aproach number 2 + fetchPullRequestsArray(technigoRepositories); //Draw chart with technigoRepos data @@ -53,7 +69,7 @@ const fetchPullRequestsArray = (allRepositories) => { fetchCommits(myPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - 'This was a group project. No pull requests made by pcruzem.'; + 'No pull requests made by pcruzem.'; } }); }); diff --git a/code/token.js b/code/token.js deleted file mode 100644 index e69de29b..00000000 From 9e788723cbfa8b8da1c1d2f0c365b6c67141a692 Mon Sep 17 00:00:00 2001 From: Emelie Date: Fri, 8 Oct 2021 23:01:43 +0200 Subject: [PATCH 3/7] fixed the fetchProfile, all data is collected --- code/index.html | 15 ++++++++++----- code/script.js | 8 ++++---- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/code/index.html b/code/index.html index 194fb6a1..5ad61db5 100644 --- a/code/index.html +++ b/code/index.html @@ -8,17 +8,22 @@ -

GitHub Tracker

+
+

GitHub Tracker

+
+
-
+
-
+
-

Projects:

-
+ +
+

Projects:

+
diff --git a/code/script.js b/code/script.js index b26a8785..a830490c 100644 --- a/code/script.js +++ b/code/script.js @@ -15,7 +15,7 @@ const fetchProfile = () => {

${profileData.name}

${profileData.login}

- ` + `; }); } @@ -69,7 +69,7 @@ const fetchPullRequestsArray = (allRepositories) => { fetchCommits(myPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - 'No pull requests made by pcruzem.'; + 'No pull requests made by pcruzem'; } }); }); @@ -83,5 +83,5 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { }); }; - -fetchRepositories (); \ No newline at end of file +fetchProfile(); +fetchRepositories(); \ No newline at end of file From 9348050e075a3b4bee48a362771c8987d5662598 Mon Sep 17 00:00:00 2001 From: Emelie Date: Sun, 10 Oct 2021 08:20:26 +0200 Subject: [PATCH 4/7] made project cards and began with some styling --- code/index.html | 10 +++++++--- code/script.js | 4 ++-- code/style.css | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/code/index.html b/code/index.html index 5ad61db5..20a86718 100644 --- a/code/index.html +++ b/code/index.html @@ -6,10 +6,14 @@ Project GitHub Tracker + + + +
-

GitHub Tracker

+

GITHUB TRACKER

@@ -22,13 +26,13 @@

GitHub Tracker

-

Projects:

+

Projects

- + diff --git a/code/script.js b/code/script.js index a830490c..47d20904 100644 --- a/code/script.js +++ b/code/script.js @@ -29,12 +29,12 @@ const fetchRepositories = () => { technigoRepositories.forEach((repo) => { projectsContainer.innerHTML += ` -
+
${repo.name} with default branch ${ repo.default_branch }

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

-

Commits amount:

+

Amount of commits:

`; diff --git a/code/style.css b/code/style.css index 7c8ad447..6daa09e8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,36 @@ body { background: #FFECE9; + margin-left: 50px; +} + +.title { + font-family: 'Archivo Black', sans-serif; + font-size: 20px; +} + +h2, p { + font-family: 'Roboto', sans-serif; +} + +.profile-img { + border-radius: 50%; + max-width: 250px; + align-content: center; +} + +.canvas-container { + display: grid; + grid-column: span 6; + justify-items: center; + margin: 5% auto; + width: 300px; +} + +.card { + background: #fff; + text-align:center; + padding: 2rem; + box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); + transform: translateY(0); + position: relative; } \ No newline at end of file From deff5142ab2c0d978756838f30638995425aac13 Mon Sep 17 00:00:00 2001 From: Emelie Date: Tue, 12 Oct 2021 09:15:24 +0200 Subject: [PATCH 5/7] added grid and @media + styling --- code/chart.js | 4 +-- code/index.html | 20 +++++------ code/script.js | 15 ++++---- code/style.css | 93 +++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 101 insertions(+), 31 deletions(-) diff --git a/code/chart.js b/code/chart.js index 99f1ee79..35ed4ccf 100644 --- a/code/chart.js +++ b/code/chart.js @@ -14,8 +14,8 @@ const drawChart = (amount) => { label: 'My Technigo projects', data: [amount, 20-amount], backgroundColor: [ - 'rgb(219,57,141)', - 'rgb(0,255,255)', + 'rgba(192, 253, 196, 0.48)', + 'rgba(255, 159, 209, 0.8)', ], hoverOffset: 4 }], diff --git a/code/index.html b/code/index.html index 20a86718..daaa3660 100644 --- a/code/index.html +++ b/code/index.html @@ -19,19 +19,15 @@

GITHUB TRACKER

+ +
+ + +
+ +
-
- -
-
- -
-

Projects

-
- - - - + diff --git a/code/script.js b/code/script.js index 47d20904..2af6db47 100644 --- a/code/script.js +++ b/code/script.js @@ -14,10 +14,12 @@ const fetchProfile = () => { profileContainer.innerHTML += `

${profileData.name}

-

${profileData.login}

+ Date: Tue, 12 Oct 2021 12:23:34 +0200 Subject: [PATCH 6/7] fixed problems with margin and media --- code/chart.js | 2 +- code/script.js | 5 ++--- code/style.css | 25 +++++++++++++------------ 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/code/chart.js b/code/chart.js index 35ed4ccf..a7c4380e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -12,7 +12,7 @@ const drawChart = (amount) => { ], datasets: [{ label: 'My Technigo projects', - data: [amount, 20-amount], + data: [amount, 19-amount], backgroundColor: [ 'rgba(192, 253, 196, 0.48)', 'rgba(255, 159, 209, 0.8)', diff --git a/code/script.js b/code/script.js index 2af6db47..e7f50e07 100644 --- a/code/script.js +++ b/code/script.js @@ -14,9 +14,8 @@ const fetchProfile = () => { profileContainer.innerHTML += `

${profileData.name}

- ${profileData.login} `; }); }; diff --git a/code/style.css b/code/style.css index d4695b95..520d21ad 100644 --- a/code/style.css +++ b/code/style.css @@ -2,13 +2,9 @@ body { background: rgb(163, 211, 198); } -.main-container { - grid-template-columns: repeat(6, 1fr); -} - .title { font-family: 'Archivo Black', sans-serif; - font-size: 1.6em; + font-size: 1.6rem; text-align: center; } @@ -16,7 +12,6 @@ h2, p, button { font-family: 'Roboto', sans-serif; } - .profile-img { border-radius: 50%; max-width: 200px; @@ -36,8 +31,14 @@ button:hover { color: white; } +.main-container .title { + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + align-items: center; +} + .profile-container { - font-size: 1.1rem; display: grid; grid-column: span 6; justify-items: center; @@ -55,7 +56,7 @@ button:hover { display: grid; grid-column: span 6; justify-items: center; - padding: 3rem; + margin: 5% auto; width: 300px; } @@ -65,7 +66,9 @@ button:hover { text-align:center; padding: 1.5rem; box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2); + transform: translateY(0); position: relative; + } .card a { @@ -88,7 +91,7 @@ button:hover { grid-column: span 3; } - .canvas-container { + .chart-container { grid-column: span 3; } @@ -101,7 +104,5 @@ button:hover { .projects-container { grid-template-columns: repeat(3, 1fr); } - .canvas-container { - width: 40rem; - } + } \ No newline at end of file From 51169cade523b41ad58cc6feec91c6876abfedd9 Mon Sep 17 00:00:00 2001 From: Emelie Date: Tue, 12 Oct 2021 13:35:25 +0200 Subject: [PATCH 7/7] added README --- README.md | 11 ++++++----- code/TO DO | 33 --------------------------------- 2 files changed, 6 insertions(+), 38 deletions(-) delete mode 100644 code/TO DO diff --git a/README.md b/README.md index 1613a3b0..3d7c9d79 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # 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 creating a git hub tracker with a list of all my Technigo Repositories as well as amount of commits for each repo. ## 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 used javascript, CSS and some html. I encountered most problem in the beginning when trying to fetch my data from github. I followed Jennies and Maks videos and constantly ran out of fetches. Eventually I managed. For styling I looked at my teammate Maria SjΓΆgrens Code and implemented it step by step, by doing that I learned a lot of things that I didn't know before. + +What technologies did you use? If you had more time, what would be next? +If I had more time I would work more on the links, because I want them to open in a new window but I didnt manage to do it. I would also try to put the chart in the profile-section and add som red level stuff. ## 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://infallible-bassi-7672f0.netlify.app/ diff --git a/code/TO DO b/code/TO DO deleted file mode 100644 index 1daa6033..00000000 --- a/code/TO DO +++ /dev/null @@ -1,33 +0,0 @@ - -1) Fetch repos and console log them -2) get them in the browser -3) filter out the technigo repos -4) test chart library - - - - -Jennys: - -const USER = 'pcruzem'; -const REPOS_URL =`https://api.github.com/users/${USER}/repos`; -const projectsContainer = document.getElementById('projects'); - -const getRepos = () => { - fetch (REPOS_URL) - .then(response => response.json()) - .then(data => { - console.log(data) - // data.forEach(repo => console.log(repo.name)) - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - forkedRepos.forEach(repo => projectsContainer.innerHTML = `

${repo.name}

`) - }) -} - - -// const options = { -// method: 'GET', -// headers: { -// Authorization: `token ${token}`, -// }, -// }; \ No newline at end of file