From c6fb6398e0c3c36af35580de28db1199fa317aec Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Mon, 27 Sep 2021 21:08:58 +0200 Subject: [PATCH 01/13] repos shows in the html and pie chart created --- .DS_Store | Bin 0 -> 6148 bytes code/chart.js | 23 ++++++++++++++++++++++- code/index.html | 35 ++++++++++++++++++----------------- code/script.js | 19 +++++++++++++++++++ todo | 0 5 files changed, 59 insertions(+), 18 deletions(-) create mode 100644 .DS_Store create mode 100644 todo diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b9d4b7875c538b4b76bd55f8d65af6e2f4871f13 GIT binary patch literal 6148 zcmeHK&2AGh5FV!~c!Ll*AkhobUbsb7QYwB9NZXJedO$)ff&-v-w;R!ww(Ba{5J5<_ zuTfs2&(SB~ao`)6i>| zHaX9R2>JLvFEcakn@O3C?L4s?&^pk;VS8&f+kM*WguR_-^G-N>zSHf5yN{pD=Yf9k zsQ2RF==AHi+4uSRg*yv{57o*&kAL6?jKv1O#G|q>>$zQj4`<)?THY6bp~4PfN4b_fqdegrHH(g*` { + const config = { + type: "doughnut", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - amount], //300 = lenght of repo array, second is 20 - lenght of repo array + backgroundColor: [ + "rgb(255, 99, 132)", + "rgb(54, 162, 235)", + "rgb(255, 205, 86)", + ], + hoverOffset: 4, + }, + ], + }, + }; +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..2abe238b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,22 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + +

GitHub Tracker

+

Projects:

+
- - + + - - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index e69de29b..5ac5465f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,19 @@ +const REPOS_URL = `https://api.github.com/users/madeleinesvensson/repos`; +const container = document.getElementById("projects"); + +const getRepos = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + console.log(data); + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + forkedRepos.forEach( + (repo) => (container.innerHTML += `

${repo.name}

`) + ); + drawChart(forkedRepos.length); + }); +}; + +getRepos(); diff --git a/todo b/todo new file mode 100644 index 00000000..e69de29b From eb262741c2bbf14a694bc8b79f9bf85d8caa5c51 Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Tue, 28 Sep 2021 23:10:13 +0200 Subject: [PATCH 02/13] fetch request for user information, to get pullrequests and commits added --- .DS_Store | Bin 6148 -> 6148 bytes code/chart.js | 4 +-- code/index.html | 2 ++ code/script.js | 92 +++++++++++++++++++++++++++++++++++++++++++++--- code/style.css | 15 ++++++-- todo | 26 ++++++++++++++ 6 files changed, 130 insertions(+), 9 deletions(-) diff --git a/.DS_Store b/.DS_Store index b9d4b7875c538b4b76bd55f8d65af6e2f4871f13..d48b1d401ce4bca39fc4e117a4ea1ec16dfc72cc 100644 GIT binary patch delta 48 zcmZoMXffE}&BSE!E7vW&APe`S(qoV{6;`6J6_c8 { const config = { type: "doughnut", @@ -11,7 +10,7 @@ const drawChart = (amount) => { datasets: [ { label: "My First Dataset", - data: [amount, 20 - amount], //300 = lenght of repo array, second is 20 - lenght of repo array + data: [amount, 19 - amount], backgroundColor: [ "rgb(255, 99, 132)", "rgb(54, 162, 235)", @@ -22,4 +21,5 @@ const drawChart = (amount) => { ], }, }; + const myChart = new Chart(ctx, config); }; diff --git a/code/index.html b/code/index.html index 2abe238b..ed7b56e5 100644 --- a/code/index.html +++ b/code/index.html @@ -10,6 +10,8 @@

GitHub Tracker

+
+

Projects:

diff --git a/code/script.js b/code/script.js index 5ac5465f..840ecf8b 100644 --- a/code/script.js +++ b/code/script.js @@ -1,19 +1,101 @@ -const REPOS_URL = `https://api.github.com/users/madeleinesvensson/repos`; +const username = "madeleinesvensson"; +const REPOS_URL = `https://api.github.com/users/${username}/repos`; +const USERS_URL = `https://api.github.com/users/${username}`; +//const PULLREQUEST_URL = `https://api.github.com/repos/technigo/${repo.name}/pulls`; const container = document.getElementById("projects"); +const userInformation = document.getElementById("user-information"); +const commitsContainer = document.getElementById("commit-container"); const getRepos = () => { fetch(REPOS_URL) .then((res) => res.json()) .then((data) => { - console.log(data); + //console.log(data); const forkedRepos = data.filter( (repo) => repo.fork && repo.name.startsWith("project-") ); - forkedRepos.forEach( - (repo) => (container.innerHTML += `

${repo.name}

`) - ); + forkedRepos.forEach((repo) => { + const pushedDate = new Date(repo.pushed_at).toLocaleDateString( + "en-GB", + { + hour: "2-digit", + minute: "2-digit", + weekday: "short", + year: "numeric", + month: "short", + day: "numeric", + } + ); + const commits = (url) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + //console.log(data); + commitsContainer.innerHTML += ` +

Commit messages: ${data.length}

+ `; + }); + }; + container.innerHTML += ` +
+

${repo.name}

 +

${pushedDate}

+

${repo.default_branch}

+
+ `; + }); drawChart(forkedRepos.length); + getPullRequests(forkedRepos); }); }; getRepos(); + +//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` + ) + .then((res) => res.json()) + .then((data) => { + const filteredPullrequests = data.find( + (pull) => pull.user.login === repo.owner.login + ); + const myCommits = filteredPullrequests.commits_url; + console.log(filteredPullrequests); + commits(myCommits); + //TODO + //2. Now you're able to get the commits for each repo by using + // the commits_url as an argument to call another function + //3. You can also get the comments for each PR by calling + // another function with the review_comments_url as argument + }); + }); +}; + +const commits = (url) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + //console.log(data); + commitsContainer.innerHTML += ` +

Commit messages: ${data.length}

+ `; + }); +}; + +fetch(USERS_URL) + .then((res) => res.json()) + .then((data) => { + console.log(data); + userInformation.innerHTML = ` +

Name: ${data.name} +

Username: ${data.login}

+

Location: ${data.location} + + `; + }); diff --git a/code/style.css b/code/style.css index 7c8ad447..af5a540b 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,14 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #ffece9; +} + +.repo-cards { + border: 3px solid black; + margin: 10px; + padding: 5px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + justify-content: center; +} diff --git a/todo b/todo index e69de29b..a4faca8d 100644 --- a/todo +++ b/todo @@ -0,0 +1,26 @@ +1. fetch repos and consol.log them +2. get them in the browser +3. filter out technigo repos +4. test chart library + +X A list of all repos that are forked ones from Technigo +X Your username and profile picture + +X Most recent update (push) for each repo +X Name of your default branch for each repo +X URL to the actual GitHub repo +X 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 using [Chart.js](https://www.chartjs.org/). [Here](https://www.chartjs.org/docs/latest/getting-started/)'s documentation on how to get started, and in the left menu you can also find [example usage](https://www.chartjs.org/docs/latest/getting-started/usage.html). + +X A list of all repos that are forked from Technigo +X Your username and profile picture + +X Most recent update (push) for each repo +X Name of your default branch for each repo +X URL to the actual GitHub repo +X 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/). From 967460625fb6e7300ba9f948c0f8dc6fab5f5d5e Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Wed, 29 Sep 2021 12:52:09 +0200 Subject: [PATCH 03/13] commit is now in the project container --- code/script.js | 32 +++++++++++--------------------- code/style.css | 5 +++++ 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/code/script.js b/code/script.js index 840ecf8b..1b9ee695 100644 --- a/code/script.js +++ b/code/script.js @@ -26,21 +26,13 @@ const getRepos = () => { day: "numeric", } ); - const commits = (url) => { - fetch(url) - .then((res) => res.json()) - .then((data) => { - //console.log(data); - commitsContainer.innerHTML += ` -

Commit messages: ${data.length}

- `; - }); - }; + container.innerHTML += `
-

${repo.name}

 -

${pushedDate}

+

${repo.name}

 +

Recent push: ${pushedDate}

${repo.default_branch}

+

Commits amount:

`; }); @@ -58,16 +50,16 @@ 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` + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` ) .then((res) => res.json()) .then((data) => { const filteredPullrequests = data.find( (pull) => pull.user.login === repo.owner.login ); - const myCommits = filteredPullrequests.commits_url; - console.log(filteredPullrequests); - commits(myCommits); + //const myCommits = filteredPullrequests.commits_url; + //console.log(filteredPullrequests); + commits(filteredPullrequests.commits_url, repo.name); //TODO //2. Now you're able to get the commits for each repo by using // the commits_url as an argument to call another function @@ -77,14 +69,11 @@ const getPullRequests = (repos) => { }); }; -const commits = (url) => { +const commits = (url, myRepoName) => { fetch(url) .then((res) => res.json()) .then((data) => { - //console.log(data); - commitsContainer.innerHTML += ` -

Commit messages: ${data.length}

- `; + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; }); }; @@ -96,6 +85,7 @@ fetch(USERS_URL)

Name: ${data.name}

Username: ${data.login}

Location: ${data.location} +

Bio: ${data.bio}

`; }); diff --git a/code/style.css b/code/style.css index af5a540b..5ff535a7 100644 --- a/code/style.css +++ b/code/style.css @@ -12,3 +12,8 @@ body { align-items: center; justify-content: center; } + +img { + border-radius: 50%; + box-shadow: 5px 5px 1px black; +} From 14e361fb4b9afae3ed4301a39fdd4fff6972cfdd Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Wed, 29 Sep 2021 15:02:52 +0200 Subject: [PATCH 04/13] styling added for mobile view --- code/index.html | 12 ++++++-- code/script.js | 17 ++++++------ code/style.css | 74 ++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 85 insertions(+), 18 deletions(-) diff --git a/code/index.html b/code/index.html index ed7b56e5..96c548b9 100644 --- a/code/index.html +++ b/code/index.html @@ -6,13 +6,19 @@ Project GitHub Tracker + + +

GitHub Tracker

-
-
-

Projects:

+
+
+

Projects

diff --git a/code/script.js b/code/script.js index 1b9ee695..10407a55 100644 --- a/code/script.js +++ b/code/script.js @@ -4,7 +4,6 @@ const USERS_URL = `https://api.github.com/users/${username}`; //const PULLREQUEST_URL = `https://api.github.com/repos/technigo/${repo.name}/pulls`; const container = document.getElementById("projects"); const userInformation = document.getElementById("user-information"); -const commitsContainer = document.getElementById("commit-container"); const getRepos = () => { fetch(REPOS_URL) @@ -30,10 +29,10 @@ const getRepos = () => { container.innerHTML += `

${repo.name}

 -

Recent push: ${pushedDate}

${repo.default_branch}

-

Commits amount:

-
+

Recent push: ${pushedDate}

+

Commits:

+ `; }); drawChart(forkedRepos.length); @@ -82,10 +81,12 @@ fetch(USERS_URL) .then((data) => { console.log(data); userInformation.innerHTML = ` -

Name: ${data.name} -

Username: ${data.login}

-

Location: ${data.location} -

Bio: ${data.bio}

+

${data.name}

+
+

${data.login}

+

Location: ${data.location}

+

Bio: ${data.bio}

+
`; }); diff --git a/code/style.css b/code/style.css index 5ff535a7..75de4ef2 100644 --- a/code/style.css +++ b/code/style.css @@ -1,19 +1,79 @@ body { - background: #ffece9; + background: #383c4b; + font-family: "Poppins", sans-serif; + color: white; +} + +hr { + height: 1px; + width: 80%; + border-style: solid; + border-radius: 10px; + background-color: white; + margin-bottom: 20px; +} +.user-container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +img { + border-radius: 50%; + box-shadow: 5px 5px 10px rgb(11, 11, 46); + width: 250px; + justify-content: center; +} + +h1 { + text-align: center; + font-size: 40px; + margin-bottom: 20px; +} +h2 { + text-align: center; + margin-top: 20px; + font-size: 30px; +} +h3 { + font-size: 25px; + margin: 5px; +} +h4 { + font-size: 15px; + align-self: flex-start; + margin: auto; + padding: 4px; +} +p { + font-size: 15px; + color: black; + margin: 3px; +} +a { + text-decoration: none; + color: black; + justify-content: center; +} +.user-information { + max-width: 90%; + justify-content: center; } .repo-cards { - border: 3px solid black; - margin: 10px; - padding: 5px; + border-radius: 10px; + margin: 15px; + padding: auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; + background-color: white; } -img { - border-radius: 50%; - box-shadow: 5px 5px 1px black; +canvas { + max-height: 100%; + max-width: 100%; + margin: 50px 0px; } From a557e00cda14b14d9c5934c7031baba1b6f79872 Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Wed, 29 Sep 2021 15:54:29 +0200 Subject: [PATCH 05/13] colors added --- code/chart.js | 8 ++------ code/index.html | 2 +- code/style.css | 12 +++++++----- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/code/chart.js b/code/chart.js index 16a61431..94d4e72f 100644 --- a/code/chart.js +++ b/code/chart.js @@ -9,13 +9,9 @@ const drawChart = (amount) => { labels: ["Finished projects", "Projects left"], datasets: [ { - label: "My First Dataset", + label: "Projects", data: [amount, 19 - amount], - backgroundColor: [ - "rgb(255, 99, 132)", - "rgb(54, 162, 235)", - "rgb(255, 205, 86)", - ], + backgroundColor: ["#76b5c5", "#eab676"], hoverOffset: 4, }, ], diff --git a/code/index.html b/code/index.html index 96c548b9..73814d5b 100644 --- a/code/index.html +++ b/code/index.html @@ -20,7 +20,7 @@

GitHub Tracker

Projects

- +

Projects done

diff --git a/code/style.css b/code/style.css index 75de4ef2..7bdd69e2 100644 --- a/code/style.css +++ b/code/style.css @@ -1,15 +1,15 @@ body { - background: #383c4b; + background: #154c79; font-family: "Poppins", sans-serif; color: white; } hr { - height: 1px; + height: 2px; width: 80%; border-style: solid; border-radius: 10px; - background-color: white; + background-color: #eab676; margin-bottom: 20px; } .user-container { @@ -20,7 +20,7 @@ hr { } img { border-radius: 50%; - box-shadow: 5px 5px 10px rgb(11, 11, 46); + box-shadow: 0px 0px 13px -2px #000000; width: 250px; justify-content: center; } @@ -34,16 +34,19 @@ h2 { text-align: center; margin-top: 20px; font-size: 30px; + font-weight: 200; } h3 { font-size: 25px; margin: 5px; + font-weight: 300; } h4 { font-size: 15px; align-self: flex-start; margin: auto; padding: 4px; + font-weight: 100; } p { font-size: 15px; @@ -75,5 +78,4 @@ a { canvas { max-height: 100%; max-width: 100%; - margin: 50px 0px; } From 1d669209ddc42a60eceaaf9e682763e9f0174a4f Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Thu, 30 Sep 2021 19:03:14 +0200 Subject: [PATCH 06/13] styling for tablet done --- code/index.html | 6 ++++-- code/script.js | 7 ++++++- code/style.css | 28 +++++++++++++++++++++++++++- 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/code/index.html b/code/index.html index 73814d5b..05fd24d5 100644 --- a/code/index.html +++ b/code/index.html @@ -19,10 +19,12 @@

GitHub Tracker

Projects

-
+

Projects done

- +
+ +
diff --git a/code/script.js b/code/script.js index 10407a55..1ded1cec 100644 --- a/code/script.js +++ b/code/script.js @@ -56,9 +56,14 @@ const getPullRequests = (repos) => { const filteredPullrequests = data.find( (pull) => pull.user.login === repo.owner.login ); + if (filteredPullrequests) { + commits(filteredPullrequests.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = "No data"; + } //const myCommits = filteredPullrequests.commits_url; //console.log(filteredPullrequests); - commits(filteredPullrequests.commits_url, repo.name); + //commits(filteredPullrequests.commits_url, repo.name); //TODO //2. Now you're able to get the commits for each repo by using // the commits_url as an argument to call another function diff --git a/code/style.css b/code/style.css index 7bdd69e2..c1044e0f 100644 --- a/code/style.css +++ b/code/style.css @@ -7,7 +7,7 @@ body { hr { height: 2px; width: 80%; - border-style: solid; + border-style: solid #eab676; border-radius: 10px; background-color: #eab676; margin-bottom: 20px; @@ -79,3 +79,29 @@ canvas { max-height: 100%; max-width: 100%; } + +/*TABLET*/ +@media (min-width: 768px) and (max-width: 991px) { + .repo-cards { + width: 45%; + } + .project-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + justify-content: space-around; + } + canvas { + max-width: 400px; + max-height: 400px; + } + .chart-container { + display: flex; + justify-content: center; + } +} + +/* DESKTOP */ +@media (min-width: 992px) { +} From e6c975d29b4c55c216d447d78779dbac86ae3853 Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Thu, 30 Sep 2021 19:45:58 +0200 Subject: [PATCH 07/13] styling for desktop done --- code/script.js | 2 +- code/style.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 1ded1cec..5eb271a5 100644 --- a/code/script.js +++ b/code/script.js @@ -87,8 +87,8 @@ fetch(USERS_URL) console.log(data); userInformation.innerHTML = ` -

${data.name}

+

${data.name}

${data.login}

Location: ${data.location}

Bio: ${data.bio}

diff --git a/code/style.css b/code/style.css index c1044e0f..9ff5cb8b 100644 --- a/code/style.css +++ b/code/style.css @@ -40,6 +40,7 @@ h3 { font-size: 25px; margin: 5px; font-weight: 300; + text-align: center; } h4 { font-size: 15px; @@ -78,6 +79,7 @@ a { canvas { max-height: 100%; max-width: 100%; + margin: 50px 0px; } /*TABLET*/ @@ -104,4 +106,40 @@ canvas { /* DESKTOP */ @media (min-width: 992px) { + .repo-cards { + width: 30%; + } + .project-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + justify-content: space-around; + } + canvas { + max-width: 500px; + max-height: 500px; + } + .chart-container { + display: flex; + justify-content: center; + width: 100%; + } + h2 { + text-align: left; + margin-left: 30px; + } + h3 { + text-align: left; + } + .user-container { + display: flex; + justify-content: center; + flex-direction: row; + align-content: center; + } + .user-information { + flex-direction: column; + margin-left: 50px; + } } From e8e4ba3c5534294dc53a77acdcd7e68fd2790846 Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Thu, 30 Sep 2021 19:59:08 +0200 Subject: [PATCH 08/13] final changes to desktop layout and styling --- code/index.html | 6 ++++-- code/style.css | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 05fd24d5..c8731879 100644 --- a/code/index.html +++ b/code/index.html @@ -15,8 +15,10 @@ -

GitHub Tracker

-
+
+

GitHub Tracker

+
+

Projects

diff --git a/code/style.css b/code/style.css index 9ff5cb8b..4ba11b44 100644 --- a/code/style.css +++ b/code/style.css @@ -142,4 +142,23 @@ canvas { flex-direction: column; margin-left: 50px; } + .header-wrapper { + justify-content: flex-start; + display: flex; + flex-direction: column; + } + h1 { + text-align: left; + margin-left: 50px; + } + hr { + height: 2px; + width: 90%; + border-style: solid #eab676; + border-radius: 10px; + background-color: #eab676; + margin-bottom: 20px; + justify-content: flex-start; + align-self: flex-start; + } } From 93c4ad2729c94ac820ee7f1847e801bc87e1ed31 Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Fri, 1 Oct 2021 13:07:11 +0200 Subject: [PATCH 09/13] - replaced with space in repo cards --- code/chart.js | 35 +++++++++++++++++++++++++++++++++-- code/index.html | 2 +- code/script.js | 12 +++++++++--- code/style.css | 13 +++++++++++-- 4 files changed, 54 insertions(+), 8 deletions(-) diff --git a/code/chart.js b/code/chart.js index 94d4e72f..bf1aa106 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,20 +2,51 @@ const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +//const drawChart = (amount) => { +// const config = { +// type: "doughnut", +//data: { +//labels: ["Finished projects", "Projects left"], +//datasets: [ +//{ +//label: "Projects", +//data: [amount, 19 - amount], +//backgroundColor: ["#76b5c5", "#eab676"], +//hoverOffset: 4, +//}, +//], +//}, +//}; +//const myChart = new Chart(ctx, config); +//}; + const drawChart = (amount) => { const config = { type: "doughnut", data: { - labels: ["Finished projects", "Projects left"], + labels: ["Finished Projects", "Projects Left"], datasets: [ { - label: "Projects", + label: ["Finished Projects", "Projects Left"], data: [amount, 19 - amount], backgroundColor: ["#76b5c5", "#eab676"], hoverOffset: 4, }, ], }, + options: { + plugins: { + legend: { + labels: { + font: { + size: 12, + family: "'Poppins',sans-serif", + color: "rgba(26, 26, 24, 0.849)", + }, + }, + }, + }, + }, }; const myChart = new Chart(ctx, config); }; diff --git a/code/index.html b/code/index.html index c8731879..6e243992 100644 --- a/code/index.html +++ b/code/index.html @@ -22,7 +22,7 @@

GitHub Tracker

Projects

-

Projects done

+

Project progress at Technigo Bootcamp

diff --git a/code/script.js b/code/script.js index 5eb271a5..153175ce 100644 --- a/code/script.js +++ b/code/script.js @@ -5,14 +5,20 @@ const USERS_URL = `https://api.github.com/users/${username}`; const container = document.getElementById("projects"); const userInformation = document.getElementById("user-information"); +const formattedRepoName = (name) => name.replace(/-/g, " "); + const getRepos = () => { fetch(REPOS_URL) .then((res) => res.json()) .then((data) => { - //console.log(data); + console.log(data); const forkedRepos = data.filter( (repo) => repo.fork && repo.name.startsWith("project-") ); + + forkedRepos.sort(function (a, b) { + return new Date(b.pushed_at) - new Date(a.pushed_at); + }); forkedRepos.forEach((repo) => { const pushedDate = new Date(repo.pushed_at).toLocaleDateString( "en-GB", @@ -28,9 +34,9 @@ const getRepos = () => { container.innerHTML += `
-

${repo.name}

 +

${formattedRepoName(repo.name)}

${repo.default_branch}

-

Recent push: ${pushedDate}

+

Latest update: ${pushedDate}

Commits:

`; diff --git a/code/style.css b/code/style.css index 4ba11b44..c4c5cf6c 100644 --- a/code/style.css +++ b/code/style.css @@ -7,9 +7,8 @@ body { hr { height: 2px; width: 80%; - border-style: solid #eab676; - border-radius: 10px; background-color: #eab676; + border-radius: 10px; margin-bottom: 20px; } .user-container { @@ -18,11 +17,15 @@ hr { flex-direction: column; align-items: center; } +.user-information { + max-width: 300px; +} img { border-radius: 50%; box-shadow: 0px 0px 13px -2px #000000; width: 250px; justify-content: center; + border: 5px solid #eab676; } h1 { @@ -116,6 +119,7 @@ canvas { width: 100%; justify-content: space-around; } + canvas { max-width: 500px; max-height: 500px; @@ -141,6 +145,7 @@ canvas { .user-information { flex-direction: column; margin-left: 50px; + max-width: 300px; } .header-wrapper { justify-content: flex-start; @@ -161,4 +166,8 @@ canvas { justify-content: flex-start; align-self: flex-start; } + :hover.repo-cards { + box-shadow: 0px 0px 13px -2px #000000; + transform: translateY(-2px); + } } From e60b8fbc0f3ac315fa1a2b1c96fe72da3fe839d6 Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Sat, 2 Oct 2021 16:22:36 +0200 Subject: [PATCH 10/13] cleaned code --- code/chart.js | 19 ------------------- code/index.html | 1 - code/script.js | 21 +++++---------------- code/style.css | 1 + todo | 26 -------------------------- 5 files changed, 6 insertions(+), 62 deletions(-) delete mode 100644 todo diff --git a/code/chart.js b/code/chart.js index bf1aa106..b709c318 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,25 +1,6 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 -//const drawChart = (amount) => { -// const config = { -// type: "doughnut", -//data: { -//labels: ["Finished projects", "Projects left"], -//datasets: [ -//{ -//label: "Projects", -//data: [amount, 19 - amount], -//backgroundColor: ["#76b5c5", "#eab676"], -//hoverOffset: 4, -//}, -//], -//}, -//}; -//const myChart = new Chart(ctx, config); -//}; - const drawChart = (amount) => { const config = { type: "doughnut", diff --git a/code/index.html b/code/index.html index 6e243992..ec388574 100644 --- a/code/index.html +++ b/code/index.html @@ -23,7 +23,6 @@

GitHub Tracker

Projects

Project progress at Technigo Bootcamp

-
diff --git a/code/script.js b/code/script.js index 153175ce..01283d2e 100644 --- a/code/script.js +++ b/code/script.js @@ -1,21 +1,21 @@ const username = "madeleinesvensson"; const REPOS_URL = `https://api.github.com/users/${username}/repos`; const USERS_URL = `https://api.github.com/users/${username}`; -//const PULLREQUEST_URL = `https://api.github.com/repos/technigo/${repo.name}/pulls`; const container = document.getElementById("projects"); const userInformation = document.getElementById("user-information"); +//Takes away the - in the project name const formattedRepoName = (name) => name.replace(/-/g, " "); +//Gets the forked repos from github. const getRepos = () => { fetch(REPOS_URL) .then((res) => res.json()) .then((data) => { - console.log(data); const forkedRepos = data.filter( (repo) => repo.fork && repo.name.startsWith("project-") ); - + //Fixes the date and time in last pushed. forkedRepos.sort(function (a, b) { return new Date(b.pushed_at) - new Date(a.pushed_at); }); @@ -48,9 +48,6 @@ const getRepos = () => { getRepos(); -//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) => { @@ -67,18 +64,10 @@ const getPullRequests = (repos) => { } else { document.getElementById(`commit-${repo.name}`).innerHTML = "No data"; } - //const myCommits = filteredPullrequests.commits_url; - //console.log(filteredPullrequests); - //commits(filteredPullrequests.commits_url, repo.name); - //TODO - //2. Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function - //3. You can also get the comments for each PR by calling - // another function with the review_comments_url as argument }); }); }; - +//gets the commits in the project container. const commits = (url, myRepoName) => { fetch(url) .then((res) => res.json()) @@ -87,10 +76,10 @@ const commits = (url, myRepoName) => { }); }; +//Gets the user data. fetch(USERS_URL) .then((res) => res.json()) .then((data) => { - console.log(data); userInformation.innerHTML = `
diff --git a/code/style.css b/code/style.css index c4c5cf6c..c65703eb 100644 --- a/code/style.css +++ b/code/style.css @@ -77,6 +77,7 @@ a { align-items: center; justify-content: center; background-color: white; + border: 3px solid #76b5c5; } canvas { diff --git a/todo b/todo deleted file mode 100644 index a4faca8d..00000000 --- a/todo +++ /dev/null @@ -1,26 +0,0 @@ -1. fetch repos and consol.log them -2. get them in the browser -3. filter out technigo repos -4. test chart library - -X A list of all repos that are forked ones from Technigo -X Your username and profile picture - -X Most recent update (push) for each repo -X Name of your default branch for each repo -X URL to the actual GitHub repo -X 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 using [Chart.js](https://www.chartjs.org/). [Here](https://www.chartjs.org/docs/latest/getting-started/)'s documentation on how to get started, and in the left menu you can also find [example usage](https://www.chartjs.org/docs/latest/getting-started/usage.html). - -X A list of all repos that are forked from Technigo -X Your username and profile picture - -X Most recent update (push) for each repo -X Name of your default branch for each repo -X URL to the actual GitHub repo -X 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/). From ae859b577e01a633175cebe729c5e5d91603126c Mon Sep 17 00:00:00 2001 From: Madeleine Svensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Sat, 2 Oct 2021 16:32:23 +0200 Subject: [PATCH 11/13] Update README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..246004c1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # 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 assigment was to create a Github tracker that shows all the github repos that is created in the Bootcamp. ## 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? +First step was to get all the correct information from the Github API on the page. Using fetch and different APIs I was able to get all the info that I later styled using CSS. With dynamic ID I was able go get certain information from one fetch into another innerHTML in another fetch. ## 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://sad-jennings-8c6d22.netlify.app From 791ff2979d162872acd2ab5204e62b67bc9ad72d Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Wed, 13 Oct 2021 09:47:51 +0200 Subject: [PATCH 12/13] repos open in a new site --- .DS_Store | Bin 6148 -> 6148 bytes code/script.js | 4 +++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.DS_Store b/.DS_Store index d48b1d401ce4bca39fc4e117a4ea1ec16dfc72cc..a5c50e6dd64d6c7315eac64dbac1cd4476da94a9 100644 GIT binary patch delta 32 ocmZoMXfc@J&&aYdU^gQp%Vr*?aK_Eu%rz_%8#FevbNuB80HRL`@Bjb+ delta 65 zcmZoMXfc@J&&awlU^gQp>t-INa7JYoh7yK+h7^W;&z$_^q@4UD1_lNJ1_nl1Ag%Ww Q3^pe+H?nMI=lIJH07kYG?EnA( diff --git a/code/script.js b/code/script.js index 01283d2e..f7d29a9f 100644 --- a/code/script.js +++ b/code/script.js @@ -34,7 +34,9 @@ const getRepos = () => { container.innerHTML += `
-

${formattedRepoName(repo.name)}

 +

${formattedRepoName( + repo.name + )}

${repo.default_branch}

Latest update: ${pushedDate}

Commits:

From 84581e58012427f24a7787a79083f00fee8bf2ba Mon Sep 17 00:00:00 2001 From: madeleinesvensson <56533906+madeleinesvensson@users.noreply.github.com> Date: Wed, 13 Oct 2021 10:17:36 +0200 Subject: [PATCH 13/13] target fixed --- code/script.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 01283d2e..f7d29a9f 100644 --- a/code/script.js +++ b/code/script.js @@ -34,7 +34,9 @@ const getRepos = () => { container.innerHTML += `
-

${formattedRepoName(repo.name)}

 +

${formattedRepoName( + repo.name + )}

${repo.default_branch}

Latest update: ${pushedDate}

Commits: