From e3ca95ec8cf2c000c2e0f34a42f91c578cb1ebd1 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Sat, 25 Sep 2021 00:50:06 +0200 Subject: [PATCH 01/16] Fetched the data for the username and picture and the filtered repositories and sorted the repos after the date they got created. --- code/index.html | 37 +++++++++++++++------------- code/script.js | 65 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 19 +++++++++++++-- 3 files changed, 102 insertions(+), 19 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..a3160ea4 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,24 @@ - - - - - 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..01ad1f3b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,65 @@ +const name = "Zancotti"; +const myReposApi = `https://api.github.com/users/${name}/repos`; +const usernameAndPictureApi = `https://api.github.com/users/${name}`; +let filteredRepos = []; + +const getUsernameAndPicture = () => { + fetch(usernameAndPictureApi) + .then((res) => res.json()) + .then((data) => { + console.log(data); + const username = `${data.login}`; + const pictureOfUser = `${data.avatar_url}`; + + usernamePicture.innerHTML = ` + Picture of gitHub-user +
${username}
`; + }); +}; + +const getRepos = () => { + fetch(myReposApi) + .then((res) => res.json()) + .then((data) => { + console.log(data); + data.forEach((e) => { + if (e.fork === true && e.full_name.includes(`project`)) { + filteredRepos.push(e); + } + }); + + // sort the filtered repoList after created dates and then reverse it. + filteredRepos.sort( + (a, b) => new Date(b.created_at) - new Date(a.created_at) + ); + filteredRepos = filteredRepos.reverse(); + + filteredRepos.forEach((e) => { + repoName = e.full_name; + repoCreateDate = e.created_at; + const myDate = new Date(repoCreateDate); + + console.log(repoCreateDate); + console.log(myDate); + + projects.innerHTML += `
${repoName}
`; + }); + }); +}; + +// const getPullRequests = (repos) => { +// fetch("https://api.github.com/repos/technigo/" + repo.name + PULLS); +// repos.forEach((repo) => {}); +// }; + +/*- 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 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).*/ + +getUsernameAndPicture(); +getRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..e71daa8d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,18 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #ffece9; +} + +h1 { + text-align: center; +} + +.username-picture { + display: flex; + flex-direction: column; + justify-content: center; +} + +.username-picture__picture { + border-radius: 50%; + width: 15%; +} From 6194191c65058a824392ddc034341cc9c4f50782 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Sat, 25 Sep 2021 19:21:37 +0200 Subject: [PATCH 02/16] Added additional information from the api (latest commit and did some styling) --- code/index.html | 6 ++--- code/script.js | 72 ++++++++++++++++++++++++++++++++++++++----------- code/style.css | 32 +++++++++++++++++----- 3 files changed, 86 insertions(+), 24 deletions(-) diff --git a/code/index.html b/code/index.html index a3160ea4..ef935a3d 100644 --- a/code/index.html +++ b/code/index.html @@ -10,9 +10,9 @@

GitHub Tracker

-
-
-

Projects:

+
+
+

Projects at Technigo:

diff --git a/code/script.js b/code/script.js index 01ad1f3b..c978e3ba 100644 --- a/code/script.js +++ b/code/script.js @@ -1,19 +1,29 @@ -const name = "Zancotti"; -const myReposApi = `https://api.github.com/users/${name}/repos`; -const usernameAndPictureApi = `https://api.github.com/users/${name}`; +//Global variables +let username = "Zancotti"; let filteredRepos = []; +let repoName, commitsUrl, repoDefaultBranch; + +//DOM selectors + +// Used APIs +const myReposApi = `https://api.github.com/users/${username}/repos`; +const usernameAndPictureApi = `https://api.github.com/users/${username}`; +let pullRequestsApi; const getUsernameAndPicture = () => { fetch(usernameAndPictureApi) .then((res) => res.json()) .then((data) => { console.log(data); - const username = `${data.login}`; - const pictureOfUser = `${data.avatar_url}`; + const pictureOfUser = data.avatar_url; + const userBio = data.bio; - usernamePicture.innerHTML = ` - Picture of gitHub-user -
${username}
`; + userInformation.innerHTML = ` + Picture of gitHub-user +
+
${username}
+
${userBio}
+
`; }); }; @@ -23,7 +33,7 @@ const getRepos = () => { .then((data) => { console.log(data); data.forEach((e) => { - if (e.fork === true && e.full_name.includes(`project`)) { + if (e.fork === true && e.name.includes(`project`)) { filteredRepos.push(e); } }); @@ -35,25 +45,57 @@ const getRepos = () => { filteredRepos = filteredRepos.reverse(); filteredRepos.forEach((e) => { - repoName = e.full_name; + repoName = e.name; + repoDefaultBranch = e.default_branch; repoCreateDate = e.created_at; - const myDate = new Date(repoCreateDate); + projects.innerHTML += `
+
${repoName}
+
`; - console.log(repoCreateDate); - console.log(myDate); - - projects.innerHTML += `
${repoName}
`; + repoDefaultBranch = e.default_branch; + pullRequestsApi = `https://api.github.com/repos/technigo/${repoName}/pulls?head=${username}:${repoDefaultBranch}`; + getPullRequests(repoName); }); }); }; +const getPullRequests = (repoName) => { + console.log("pullRequestsApi", pullRequestsApi); + fetch(pullRequestsApi) + .then((res) => res.json()) + .then((data) => { + console.log("pullRequestsApi data", data); + + if (data.length === 1) { + commitsUrl = data[0].commits_url; + getcommits(repoName); + } + }); +}; + +const getcommits = (repoName) => { + fetch(commitsUrl) + .then((res) => res.json()) + .then((data) => { + console.log("getcommits data", data); + let commitMessage = data[data.length - 1].commit.message; + console.log(commitMessage); + + containerToChange = document.getElementById(repoName); + containerToChange.innerHTML += `
Latest commit message: ${commitMessage}
`; + }); +}; + // const getPullRequests = (repos) => { // fetch("https://api.github.com/repos/technigo/" + repo.name + PULLS); // repos.forEach((repo) => {}); // }; /*- A list of all repos that are forked ones from Technigo += done - Your username and profile picture += done + - Most recent update (push) for each repo - Name of your default branch for each repo - URL to the actual GitHub repo diff --git a/code/style.css b/code/style.css index e71daa8d..9635b1d5 100644 --- a/code/style.css +++ b/code/style.css @@ -1,18 +1,38 @@ body { background: #ffece9; + margin: 0; + padding: 0; } -h1 { - text-align: center; +*, +*:before, +*:after { + box-sizing: inherit; } -.username-picture { +/* h1 { +} */ + +.user-information { display: flex; - flex-direction: column; - justify-content: center; } -.username-picture__picture { +.user-information__picture { border-radius: 50%; width: 15%; } + +.projects { + display: flex; + flex-direction: column; + align-items: center; +} + +.projects__repo-container { + display: flex; + flex-direction: column; + padding: 10px; +} + +.projects__repo-container-latest-commit { +} From a2cf225636441434db687a8e56b31ba75a1845c8 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Tue, 28 Sep 2021 10:13:35 +0200 Subject: [PATCH 03/16] added styling to the project --- code/index.html | 6 +++-- code/script.js | 24 ++++++++++++++--- code/style.css | 70 ++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 87 insertions(+), 13 deletions(-) diff --git a/code/index.html b/code/index.html index ef935a3d..ca8d2e60 100644 --- a/code/index.html +++ b/code/index.html @@ -8,11 +8,13 @@ -

GitHub Tracker

+
+
GitHub Tracker
+
-

Projects at Technigo:

+
Projects at Technigo:
diff --git a/code/script.js b/code/script.js index c978e3ba..599ff856 100644 --- a/code/script.js +++ b/code/script.js @@ -48,8 +48,20 @@ const getRepos = () => { repoName = e.name; repoDefaultBranch = e.default_branch; repoCreateDate = e.created_at; - projects.innerHTML += `
-
${repoName}
+ htmlUrl = e.html_url; + + const repoNameUppercase = + repoName.charAt(0).toUpperCase() + repoName.slice(1); + + projects.innerHTML += ` +
+
+
+
${repoNameUppercase} ${repoDefaultBranch}
+
${htmlUrl}
+
+
1
+
`; repoDefaultBranch = e.default_branch; @@ -79,10 +91,12 @@ const getcommits = (repoName) => { .then((data) => { console.log("getcommits data", data); let commitMessage = data[data.length - 1].commit.message; + amountOfCommits = data.length; + console.log(commitMessage); containerToChange = document.getElementById(repoName); - containerToChange.innerHTML += `
Latest commit message: ${commitMessage}
`; + containerToChange.innerHTML += `
Latest commit message: ${commitMessage}
`; }); }; @@ -95,10 +109,12 @@ const getcommits = (repoName) => { = done - Your username and profile picture = done - - Most recent update (push) for each repo += done - Name of your default branch for each repo += done - URL to the actual GitHub repo +=done - 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).*/ diff --git a/code/style.css b/code/style.css index 9635b1d5..4fb7dc5f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,11 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + body { background: #ffece9; margin: 0; padding: 0; + font-family: "Roboto", sans-serif; + box-sizing: border-box; } *, @@ -10,29 +14,81 @@ body { box-sizing: inherit; } -/* h1 { -} */ +.header__container { + display: flex; + padding: 20px; + align-items: center; + color: white; + background-color: rgb(0, 0, 0, 0.8); + position: fixed; + top: 0; + width: 100%; + height: 7.5%; + font-size: 1em; +} .user-information { display: flex; + margin-top: 64px; + padding: 20px 20px 0 20px; } .user-information__picture { border-radius: 50%; - width: 15%; + width: 25%; +} + +.user-information__username { + font-size: 40px; + font-weight: 200; + padding-left: 20px; +} + +.user-information__bio { + font-size: 16px; + padding-left: 20px; } .projects { display: flex; flex-direction: column; - align-items: center; + padding: 0 20px 20px 20px; +} + +.projects__title { + font-size: 1.5em; + font-weight: bold; + margin: 1em 0; } .projects__repo-container { + padding: 10px 0; +} + +.projects__repo-container__header { display: flex; - flex-direction: column; - padding: 10px; + flex-direction: row; + background-color: rgb(0, 0, 0, 0.2); + padding-left: 10px; +} + +.projects__repo-container__header__flex-box { + width: 100%; } -.projects__repo-container-latest-commit { +.projects__repo-container__header__flex-box__repo-name { + font-weight: 500; + margin: 4px 0; +} + +.projects__repo-container__header__flex-box__html-url { + margin: 4px 0; + font-size: 13px; +} + +.projects__repo-container__header__amount-commitmessages { + display: flex; + align-self: center; + justify-content: flex-end; + padding-right: 10px; } From ea5343e78a1b1d0216420bb01751237e910d1355 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Tue, 28 Sep 2021 15:44:13 +0200 Subject: [PATCH 04/16] Continued on styling the page in mobile view and finished off all blue step fetch requirements. --- code/chart.js | 19 ++++++++++++++- code/index.html | 5 ++-- code/script.js | 63 ++++++++++++++++++++++++++----------------------- code/style.css | 29 ++++++++++++++++++++--- 4 files changed, 81 insertions(+), 35 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..7d84487d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,21 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 + +const config = { + type: "pie", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [5, 20 - 5], + backgroundColor: ["rgb(0,250,154,0.20)", "rgb(250, 250, 250, 0.60)"], + hoverOffset: 4, + }, + ], + }, +}; + +const myChart = new Chart(ctx, config); diff --git a/code/index.html b/code/index.html index ca8d2e60..ec983466 100644 --- a/code/index.html +++ b/code/index.html @@ -6,20 +6,21 @@ Project GitHub Tracker +
-
GitHub Tracker
+

GitHub Tracker

Projects at Technigo:
+
- diff --git a/code/script.js b/code/script.js index 599ff856..236f20d1 100644 --- a/code/script.js +++ b/code/script.js @@ -4,14 +4,16 @@ let filteredRepos = []; let repoName, commitsUrl, repoDefaultBranch; //DOM selectors +let projectsPullRequest = document.getElementById(`projectsPullRequest`); // Used APIs const myReposApi = `https://api.github.com/users/${username}/repos`; -const usernameAndPictureApi = `https://api.github.com/users/${username}`; +const usernamePictureAndBioApi = `https://api.github.com/users/${username}`; let pullRequestsApi; +//Function in which we fetch the username, picture and bio from github and change the innerhtml of userInformation to contain these values. const getUsernameAndPicture = () => { - fetch(usernameAndPictureApi) + fetch(usernamePictureAndBioApi) .then((res) => res.json()) .then((data) => { console.log(data); @@ -27,6 +29,7 @@ const getUsernameAndPicture = () => { }); }; +// Function in which we fetch the repository data and filter them to the ones that includes `project` in the name. const getRepos = () => { fetch(myReposApi) .then((res) => res.json()) @@ -44,80 +47,82 @@ const getRepos = () => { ); filteredRepos = filteredRepos.reverse(); + // ForEach function over filteredRepos which picks up default branch and creation date and html Url. filteredRepos.forEach((e) => { repoName = e.name; repoDefaultBranch = e.default_branch; repoCreateDate = e.created_at; htmlUrl = e.html_url; + // Function to make the first letter in the repo name into a uppercase one. const repoNameUppercase = repoName.charAt(0).toUpperCase() + repoName.slice(1); + // change the inner html and put the id of the projects__repo-container to the repoName. And make content with the values which we saved. projects.innerHTML += `
${repoNameUppercase} ${repoDefaultBranch}
-
${htmlUrl}
+
Go to ${repoName}
-
1
+
`; repoDefaultBranch = e.default_branch; + // slice to take away the 6 chars not needed to fetch the commitsUrl. + commitsUrl = e.commits_url.slice(0, -6); + getcommits(repoName); + + // add reponame username and repodefault branch to the api to get into the right api adress depending on which repo. pullRequestsApi = `https://api.github.com/repos/technigo/${repoName}/pulls?head=${username}:${repoDefaultBranch}`; getPullRequests(repoName); }); }); }; +// function that gets the pullrequests. If data.length > 0 it changes the inner html of "container to change" else it writes "no pull request made" const getPullRequests = (repoName) => { console.log("pullRequestsApi", pullRequestsApi); fetch(pullRequestsApi) .then((res) => res.json()) .then((data) => { console.log("pullRequestsApi data", data); - - if (data.length === 1) { - commitsUrl = data[0].commits_url; - getcommits(repoName); + if (data.length > 0) { + let prTitle = data[0].title; + let prUrl = data[0].url; + let containerToChange = document.getElementById(repoName); + containerToChange.innerHTML += `
Pull request link:
${prTitle}
`; + } else { + let containerToChange = document.getElementById(repoName); + containerToChange.innerHTML += `
No pull request made
`; } }); }; +// function that fetches the commits and sets the first commit message (which is the last made) until commit message. The last commit message and +// amount of commits is fetched and printed put by changing the innerHTML. const getcommits = (repoName) => { fetch(commitsUrl) .then((res) => res.json()) .then((data) => { console.log("getcommits data", data); - let commitMessage = data[data.length - 1].commit.message; + let commitMessage = data[0].commit.message; amountOfCommits = data.length; console.log(commitMessage); - containerToChange = document.getElementById(repoName); - containerToChange.innerHTML += `
Latest commit message: ${commitMessage}
`; + let containerToChange = document.getElementById(repoName); + containerToChange.innerHTML += `
Last commit message: ${commitMessage}
`; + amountCommitmessages = document.getElementById( + `${repoName}-amountCommitmessages` + ); + amountCommitmessages.innerHTML += `${amountOfCommits}`; }); }; -// const getPullRequests = (repos) => { -// fetch("https://api.github.com/repos/technigo/" + repo.name + PULLS); -// repos.forEach((repo) => {}); -// }; - -/*- A list of all repos that are forked ones from Technigo -= done -- Your username and profile picture -= done -- Most recent update (push) for each repo -= done -- Name of your default branch for each repo -= done -- URL to the actual GitHub repo -=done -- 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).*/ +// - 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).*/ getUsernameAndPicture(); getRepos(); diff --git a/code/style.css b/code/style.css index 4fb7dc5f..4a41c8fd 100644 --- a/code/style.css +++ b/code/style.css @@ -62,6 +62,8 @@ body { } .projects__repo-container { + display: flex; + flex-direction: column; padding: 10px 0; } @@ -69,7 +71,8 @@ body { display: flex; flex-direction: row; background-color: rgb(0, 0, 0, 0.2); - padding-left: 10px; + padding: 5px 10px; + order: 1; } .projects__repo-container__header__flex-box { @@ -81,9 +84,11 @@ body { margin: 4px 0; } -.projects__repo-container__header__flex-box__html-url { +.projects__repo-container__header__flex-box__html-url a { + text-decoration: none; + color: black; margin: 4px 0; - font-size: 13px; + font-size: 15px; } .projects__repo-container__header__amount-commitmessages { @@ -92,3 +97,21 @@ body { justify-content: flex-end; padding-right: 10px; } + +.projects__repo-container__last-commit { + padding: 5px 10px; + border: solid black 1px; + order: 2; +} + +.projects__pull-request__content { + padding: 5px 10px; + border: solid black 1px; + border-top: none; + order: 3; +} + +.projects__pull-request__content a { + text-decoration: none; + color: black; +} From cca2f318f6145f5fd55e6cd4f01d0f596098368f Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Wed, 29 Sep 2021 13:07:00 +0200 Subject: [PATCH 05/16] finsihed the responsive design and the blue steps --- code/index.html | 23 ++++++----- code/script.js | 30 ++++++++++---- code/style.css | 107 ++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 132 insertions(+), 28 deletions(-) diff --git a/code/index.html b/code/index.html index ec983466..3f010775 100644 --- a/code/index.html +++ b/code/index.html @@ -8,19 +8,20 @@ - -
-

GitHub Tracker

-
-
-
-
Projects at Technigo:
+ +
+
+

GitHub Tracker

+
+
+
+
Projects at Technigo:
+
+
+ +
-
- - - diff --git a/code/script.js b/code/script.js index 236f20d1..b171ad86 100644 --- a/code/script.js +++ b/code/script.js @@ -1,3 +1,10 @@ +const options = { + method: `GET`, + headers: { + Authorization: `token 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`, + }, +}; + //Global variables let username = "Zancotti"; let filteredRepos = []; @@ -23,8 +30,8 @@ const getUsernameAndPicture = () => { userInformation.innerHTML = ` Picture of gitHub-user
-
${username}
-
${userBio}
+
${username}
+
${userBio}
`; }); }; @@ -68,6 +75,7 @@ const getRepos = () => {
+
`; repoDefaultBranch = e.default_branch; @@ -92,11 +100,15 @@ const getPullRequests = (repoName) => { if (data.length > 0) { let prTitle = data[0].title; let prUrl = data[0].url; - let containerToChange = document.getElementById(repoName); - containerToChange.innerHTML += `
Pull request link:
${prTitle}
`; + let containerToChange = document.getElementById( + `${repoName}-commit-pulls-container` + ); + containerToChange.innerHTML += `
Pull request link:
${prTitle}
`; } else { - let containerToChange = document.getElementById(repoName); - containerToChange.innerHTML += `
No pull request made
`; + let containerToChange = document.getElementById( + `${repoName}-commit-pulls-container` + ); + containerToChange.innerHTML += `
No pull request made
`; } }); }; @@ -113,8 +125,10 @@ const getcommits = (repoName) => { console.log(commitMessage); - let containerToChange = document.getElementById(repoName); - containerToChange.innerHTML += `
Last commit message: ${commitMessage}
`; + let containerToChange = document.getElementById( + `${repoName}-commit-pulls-container` + ); + containerToChange.innerHTML += `
Last commit message: ${commitMessage}
`; amountCommitmessages = document.getElementById( `${repoName}-amountCommitmessages` ); diff --git a/code/style.css b/code/style.css index 4a41c8fd..fd4b824f 100644 --- a/code/style.css +++ b/code/style.css @@ -6,6 +6,7 @@ body { padding: 0; font-family: "Roboto", sans-serif; box-sizing: border-box; + min-width: 325px; } *, @@ -14,7 +15,9 @@ body { box-sizing: inherit; } -.header__container { +/* ------------------------- Navbar container------------------------*/ + +.navbar__container { display: flex; padding: 20px; align-items: center; @@ -27,28 +30,34 @@ body { font-size: 1em; } +/* ---------------------- User information-content-----------------------*/ + .user-information { display: flex; margin-top: 64px; padding: 20px 20px 0 20px; + justify-content: center; } .user-information__picture { border-radius: 50%; - width: 25%; + width: 30%; + height: 30%; } -.user-information__username { +.user-information__username-bio-container__username { font-size: 40px; font-weight: 200; padding-left: 20px; } -.user-information__bio { +.user-information__username-bio-container__bio { font-size: 16px; padding-left: 20px; } +/* ------------------------- Main projects section------------------------*/ + .projects { display: flex; flex-direction: column; @@ -98,20 +107,100 @@ body { padding-right: 10px; } -.projects__repo-container__last-commit { +.projects__commit-pulls-container { + display: flex; + flex-direction: column; + order: 2; +} + +.projects__commit-pulls-container__last-commit { padding: 5px 10px; border: solid black 1px; - order: 2; + order: 1; } -.projects__pull-request__content { +.projects__commit-pulls-container__pull-request { padding: 5px 10px; border: solid black 1px; border-top: none; - order: 3; + order: 2; } -.projects__pull-request__content a { +.projects__commit-pulls-container__pull-request a { text-decoration: none; color: black; } + +/* ------------------------- Chart container------------------------*/ + +.chart { + margin: auto; + width: 80%; + margin-bottom: 40px; +} + +/* ------------------------- IPAD Alterations------------------------*/ + +@media (min-width: 668px) and (max-width: 1024px) { + .user-information { + margin-top: 100px; + justify-content: center; + } + + .user-information__username-bio-container { + display: flex; + flex-direction: column; + justify-content: center; + } + + .user-information__username-bio-container__username { + font-size: 60px; + } + + .user-information__username-bio-container__bio { + font-size: 20px; + } + + .projects__commit-pulls-container { + flex-direction: row; + } + + .projects__commit-pulls-container__last-commit { + width: 50%; + } + + .projects__commit-pulls-container__pull-request { + width: 50%; + border-left: none; + border-top: solid black 1px; + } + + .chart { + width: 50%; + } +} + +/* ------------------------- Desktop Alterations------------------------*/ + +@media (min-width: 1025px) { + body { + display: flex; + flex-direction: column; + align-items: center; + } + .navbar__container { + max-width: 1024px; + max-height: 60px; + } + + .wrapper { + max-width: 1024px; + display: flex; + flex-direction: column; + margin: 0; + } + + .chart { + width: 50%; + } +} From bab7d8c25ca7f171b9c26861765b77dc33521570 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Wed, 29 Sep 2021 13:09:34 +0200 Subject: [PATCH 06/16] fixed an error in the code --- code/script.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/code/script.js b/code/script.js index b171ad86..58eb7b38 100644 --- a/code/script.js +++ b/code/script.js @@ -1,10 +1,3 @@ -const options = { - method: `GET`, - headers: { - Authorization: `token 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`, - }, -}; - //Global variables let username = "Zancotti"; let filteredRepos = []; From c056b62c0e82a080cc35f6bd4b5a59f80d0e0473 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Wed, 29 Sep 2021 16:24:22 +0200 Subject: [PATCH 07/16] changed the css layout a bit --- code/chart.js | 9 +++---- code/script.js | 6 ++--- code/style.css | 72 +++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 65 insertions(+), 22 deletions(-) diff --git a/code/chart.js b/code/chart.js index 7d84487d..592d8fe5 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,8 +1,7 @@ -//DOM-selector for the canvas 👇 +//DOM-selector const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 - +//Chart const config = { type: "pie", data: { @@ -10,8 +9,8 @@ const config = { datasets: [ { label: "My First Dataset", - data: [5, 20 - 5], - backgroundColor: ["rgb(0,250,154,0.20)", "rgb(250, 250, 250, 0.60)"], + data: [5, 19 - 5], + backgroundColor: ["rgb(0,250,154,0.20)", "rgb(228, 228, 228)"], hoverOffset: 4, }, ], diff --git a/code/script.js b/code/script.js index 58eb7b38..4416b83d 100644 --- a/code/script.js +++ b/code/script.js @@ -20,7 +20,7 @@ const getUsernameAndPicture = () => { const pictureOfUser = data.avatar_url; const userBio = data.bio; - userInformation.innerHTML = ` + userInformation.innerHTML += ` Picture of gitHub-user
${username}
@@ -96,7 +96,7 @@ const getPullRequests = (repoName) => { let containerToChange = document.getElementById( `${repoName}-commit-pulls-container` ); - containerToChange.innerHTML += `
Pull request link:
${prTitle}
`; + containerToChange.innerHTML += `
Pull request:
${prTitle}
`; } else { let containerToChange = document.getElementById( `${repoName}-commit-pulls-container` @@ -129,7 +129,5 @@ const getcommits = (repoName) => { }); }; -// - 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).*/ - getUsernameAndPicture(); getRepos(); diff --git a/code/style.css b/code/style.css index fd4b824f..a014ba80 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,8 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); body { - background: #ffece9; + /* background: #ffece9; */ + background: rgb(246, 248, 250); margin: 0; padding: 0; font-family: "Roboto", sans-serif; @@ -22,12 +23,16 @@ body { padding: 20px; align-items: center; color: white; - background-color: rgb(0, 0, 0, 0.8); + background-color: rgb(14, 16, 18, 0.8); position: fixed; top: 0; width: 100%; height: 7.5%; - font-size: 1em; +} + +h1 { + font-size: 1.5em; + font-weight: 100; } /* ---------------------- User information-content-----------------------*/ @@ -73,13 +78,17 @@ body { .projects__repo-container { display: flex; flex-direction: column; - padding: 10px 0; + border: 1px solid lightgrey; + border-radius: 10px; + margin-bottom: 10px; + padding: 0 0 10px 0; } .projects__repo-container__header { display: flex; flex-direction: row; - background-color: rgb(0, 0, 0, 0.2); + background-color: rgb(228, 228, 228); + border-radius: 10px 10px 0 0; padding: 5px 10px; order: 1; } @@ -93,18 +102,28 @@ body { margin: 4px 0; } +.projects__repo-container__header__flex-box__html-url { + text-decoration: none; + margin: 4px 0; + font-size: 15px; +} + .projects__repo-container__header__flex-box__html-url a { text-decoration: none; - color: black; margin: 4px 0; font-size: 15px; + cursor: pointer; + color: #218bff; } .projects__repo-container__header__amount-commitmessages { display: flex; align-self: center; justify-content: flex-end; - padding-right: 10px; + padding: 10px; + border-radius: 50%; + border: 1px solid lightgrey; + background-color: rgb(0, 250, 154, 0.2); } .projects__commit-pulls-container { @@ -115,20 +134,17 @@ body { .projects__commit-pulls-container__last-commit { padding: 5px 10px; - border: solid black 1px; order: 1; } .projects__commit-pulls-container__pull-request { padding: 5px 10px; - border: solid black 1px; - border-top: none; order: 2; } .projects__commit-pulls-container__pull-request a { text-decoration: none; - color: black; + color: #218bff; } /* ------------------------- Chart container------------------------*/ @@ -171,8 +187,6 @@ body { .projects__commit-pulls-container__pull-request { width: 50%; - border-left: none; - border-top: solid black 1px; } .chart { @@ -200,6 +214,38 @@ body { margin: 0; } + .user-information { + display: flex; + flex-direction: row; + margin-top: 100px; + justify-content: center; + } + + .user-information__username-bio-container { + display: flex; + flex-direction: column; + justify-content: center; + } + + .user-information__username-bio-container__username { + font-size: 60px; + } + + .user-information__username-bio-container__bio { + font-size: 20px; + } + + .projects__commit-pulls-container { + flex-direction: row; + } + + .projects__commit-pulls-container__last-commit { + width: 50%; + } + + .projects__commit-pulls-container__pull-request { + width: 50%; + } .chart { width: 50%; } From 92726476ca7ef680a78dc7b049a548eceea0f064 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Wed, 29 Sep 2021 18:37:09 +0200 Subject: [PATCH 08/16] Added a accordion for all the commits ive written in the projects --- code/script.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++--- code/style.css | 38 +++++++++++++++++++++++++++++++----- 2 files changed, 82 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 4416b83d..6eb70388 100644 --- a/code/script.js +++ b/code/script.js @@ -11,6 +11,19 @@ const myReposApi = `https://api.github.com/users/${username}/repos`; const usernamePictureAndBioApi = `https://api.github.com/users/${username}`; let pullRequestsApi; +// Functions +const toggleMenu = (menuName) => { + console.log("toggle", menuName); + let menu = document.getElementById(`${menuName}-menu`); + menu.classList.toggle( + "projects__commit-pulls-container__commits-accordion__active" + ); +}; + +const toCapitalLetter = (str) => { + return str.charAt(0).toUpperCase() + str.slice(1); +}; + //Function in which we fetch the username, picture and bio from github and change the innerhtml of userInformation to contain these values. const getUsernameAndPicture = () => { fetch(usernamePictureAndBioApi) @@ -113,21 +126,54 @@ const getcommits = (repoName) => { .then((res) => res.json()) .then((data) => { console.log("getcommits data", data); + console.log("getcommits username", username); let commitMessage = data[0].commit.message; - amountOfCommits = data.length; + amountOfCommits = data.filter( + (element) => element.author && element.author.login === username + ).length; - console.log(commitMessage); + commitMessage = toCapitalLetter(commitMessage); let containerToChange = document.getElementById( `${repoName}-commit-pulls-container` ); - containerToChange.innerHTML += `
Last commit message: ${commitMessage}
`; + + containerToChange.innerHTML += ` +
${commitMessage} +
    +
    `; amountCommitmessages = document.getElementById( `${repoName}-amountCommitmessages` ); amountCommitmessages.innerHTML += `${amountOfCommits}`; + + let menu = document.getElementById(`${repoName}-menu`); + data + .slice(1) + .filter( + (element) => element.author && element.author.login === username + ) + .forEach((element) => { + menu.innerHTML += `
  • ${toCapitalLetter( + element.commit.message + )}
    • `; + }); }); }; getUsernameAndPicture(); getRepos(); + +//### **🔴 Red Level (Intermediary Goals)** + +// - Sort your list in different ways. +// **Example of what you can sort by:** creation date, name, most commits, followers or stargazers +// - Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos +// - Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion? +// - Display the comments you got from each pull request +// - When you're browsing through the repo object, you'll see that there's a lot of data that we can use. Create a chart over some of the data. +// **Example of data to use:** Repo size, people that starred your repo (stargazers) or amount of commits on each repo. + +// ### **âš« Black Level (Advanced Goals)** + +// - Implement a search field to find a specific repo based on name diff --git a/code/style.css b/code/style.css index a014ba80..274628fe 100644 --- a/code/style.css +++ b/code/style.css @@ -119,10 +119,11 @@ h1 { .projects__repo-container__header__amount-commitmessages { display: flex; align-self: center; - justify-content: flex-end; + justify-content: center; padding: 10px; border-radius: 50%; border: 1px solid lightgrey; + min-width: 40px; background-color: rgb(0, 250, 154, 0.2); } @@ -130,15 +131,42 @@ h1 { display: flex; flex-direction: column; order: 2; + padding: 0px 6px; } -.projects__commit-pulls-container__last-commit { +.projects__commit-pulls-container__commits-accordion { padding: 5px 10px; + background-color: rgb(0, 250, 154, 0.2); + border: 1px solid lightgrey; + border-radius: 10px; order: 1; + margin: 4px 0 0 0; + cursor: pointer; +} + +.projects__commit-pulls-container__commits-accordion__menu { + order: 2; + flex-direction: column; + row-gap: 6px; + min-width: 250px; + max-height: 0px; + margin: 0; + overflow: hidden; + list-style-position: outside; +} + +.projects__commit-pulls-container__commits-accordion__active { + display: flex; + max-height: 2000px; + transition: max-height 400ms ease-in-out; +} + +.option { + padding: 10px 0px; } .projects__commit-pulls-container__pull-request { - padding: 5px 10px; + padding: 5px 5px; order: 2; } @@ -181,7 +209,7 @@ h1 { flex-direction: row; } - .projects__commit-pulls-container__last-commit { + .projects__commit-pulls-container__commits-accordion { width: 50%; } @@ -239,7 +267,7 @@ h1 { flex-direction: row; } - .projects__commit-pulls-container__last-commit { + .projects__commit-pulls-container__commits-accordion { width: 50%; } From bd80617c76adc9866c695b77f61320bcf06eae64 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Wed, 29 Sep 2021 23:27:46 +0200 Subject: [PATCH 09/16] added a sort after coding language, redid the code to split fetch and render up --- code/index.html | 7 ++ code/script.js | 272 ++++++++++++++++++++++++++++-------------------- code/style.css | 12 ++- 3 files changed, 178 insertions(+), 113 deletions(-) diff --git a/code/index.html b/code/index.html index 3f010775..77ab832a 100644 --- a/code/index.html +++ b/code/index.html @@ -7,12 +7,19 @@ Project GitHub Tracker +

    GitHub Tracker

    + + +
    diff --git a/code/script.js b/code/script.js index 6eb70388..aaa31967 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,8 @@ //Global variables let username = "Zancotti"; let filteredRepos = []; -let repoName, commitsUrl, repoDefaultBranch; +let global__UserData, global__ReposData; +let global_ListCommitData = []; //DOM selectors let projectsPullRequest = document.getElementById(`projectsPullRequest`); @@ -9,7 +10,6 @@ let projectsPullRequest = document.getElementById(`projectsPullRequest`); // Used APIs const myReposApi = `https://api.github.com/users/${username}/repos`; const usernamePictureAndBioApi = `https://api.github.com/users/${username}`; -let pullRequestsApi; // Functions const toggleMenu = (menuName) => { @@ -20,26 +20,58 @@ const toggleMenu = (menuName) => { ); }; +const filter = (type) => { + console.log(type); + filteredRepos = []; + + if (type === `js`) { + const projects = document.getElementsByClassName(`projects__HTML`); + + Array.from(projects).forEach((project) => { + project.style.display = "none"; + }); + } else if (type === `html`) { + const projects = document.getElementsByClassName(`projects__JavaScript`); + + Array.from(projects).forEach((project) => { + project.style.display = "none"; + }); + } else { + const projects = document.getElementsByClassName( + `projects__repo-container` + ); + Array.from(projects).forEach((project) => { + project.style.display = "flex"; + }); + } +}; + const toCapitalLetter = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; -//Function in which we fetch the username, picture and bio from github and change the innerhtml of userInformation to contain these values. +//Function in which I fetch data from the json and save the data from the json into a global variable. const getUsernameAndPicture = () => { fetch(usernamePictureAndBioApi) .then((res) => res.json()) .then((data) => { console.log(data); - const pictureOfUser = data.avatar_url; - const userBio = data.bio; - - userInformation.innerHTML += ` - Picture of gitHub-user -
    -
    ${username}
    -
    ${userBio}
    -
    `; - }); + global__UserData = data; + }) + .then(() => renderUsernameAndPicture()); +}; + +// Function in which i render the information based on the data that i saved to the global variable. +const renderUsernameAndPicture = () => { + const pictureOfUser = global__UserData.avatar_url; + const userBio = global__UserData.bio; + + userInformation.innerHTML += ` + Picture of gitHub-user +
    +
    ${username}
    +
    ${userBio}
    +
    `; }; // Function in which we fetch the repository data and filter them to the ones that includes `project` in the name. @@ -48,119 +80,137 @@ const getRepos = () => { .then((res) => res.json()) .then((data) => { console.log(data); - data.forEach((e) => { - if (e.fork === true && e.name.includes(`project`)) { - filteredRepos.push(e); - } - }); - - // sort the filtered repoList after created dates and then reverse it. - filteredRepos.sort( - (a, b) => new Date(b.created_at) - new Date(a.created_at) - ); - filteredRepos = filteredRepos.reverse(); - - // ForEach function over filteredRepos which picks up default branch and creation date and html Url. - filteredRepos.forEach((e) => { - repoName = e.name; - repoDefaultBranch = e.default_branch; - repoCreateDate = e.created_at; - htmlUrl = e.html_url; - - // Function to make the first letter in the repo name into a uppercase one. - const repoNameUppercase = - repoName.charAt(0).toUpperCase() + repoName.slice(1); - - // change the inner html and put the id of the projects__repo-container to the repoName. And make content with the values which we saved. - projects.innerHTML += ` -
    -
    -
    -
    ${repoNameUppercase} ${repoDefaultBranch}
    -
    Go to ${repoName}
    -
    -
    -
    -
    -
    `; - - repoDefaultBranch = e.default_branch; - // slice to take away the 6 chars not needed to fetch the commitsUrl. - commitsUrl = e.commits_url.slice(0, -6); - getcommits(repoName); - - // add reponame username and repodefault branch to the api to get into the right api adress depending on which repo. - pullRequestsApi = `https://api.github.com/repos/technigo/${repoName}/pulls?head=${username}:${repoDefaultBranch}`; - getPullRequests(repoName); - }); - }); + + global__ReposData = data; + }) + .then(() => renderRepos()) + .then(() => getCommits()) + .then(() => getPullRequests()); }; -// function that gets the pullrequests. If data.length > 0 it changes the inner html of "container to change" else it writes "no pull request made" -const getPullRequests = (repoName) => { - console.log("pullRequestsApi", pullRequestsApi); - fetch(pullRequestsApi) - .then((res) => res.json()) - .then((data) => { - console.log("pullRequestsApi data", data); - if (data.length > 0) { - let prTitle = data[0].title; - let prUrl = data[0].url; - let containerToChange = document.getElementById( - `${repoName}-commit-pulls-container` - ); - containerToChange.innerHTML += `
    Pull request:
    ${prTitle}
    `; - } else { - let containerToChange = document.getElementById( - `${repoName}-commit-pulls-container` - ); - containerToChange.innerHTML += `
    No pull request made
    `; - } - }); +const renderRepos = () => { + global__ReposData.forEach((e) => { + if (e.fork === true && e.name.includes(`project`)) { + filteredRepos.push(e); + } + }); + + // sort the filtered repoList after created dates and then reverse it. + filteredRepos.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); + filteredRepos = filteredRepos.reverse(); + + // ForEach function over filteredRepos which picks up default branch and creation date and html Url. + filteredRepos.forEach((e) => { + const repoName = e.name; + const repoNameDisplay = toCapitalLetter(repoName); + const repoDefaultBranch = e.default_branch; + const htmlUrl = e.html_url; + let repoLanguage = e.language; + + if (repoLanguage === null) { + repoLanguage = ""; + } + + // change the inner html and put the id of the projects__repo-container to the repoName. And make content with the values which we saved. + projects.innerHTML += ` +
    +
    +
    +
    ${repoNameDisplay} ${repoDefaultBranch}
    +
    Go to ${repoName}
    +
    Programming language: ${repoLanguage}
    +
    +
    +
    +
    +
    `; + }); }; // function that fetches the commits and sets the first commit message (which is the last made) until commit message. The last commit message and // amount of commits is fetched and printed put by changing the innerHTML. -const getcommits = (repoName) => { - fetch(commitsUrl) - .then((res) => res.json()) - .then((data) => { - console.log("getcommits data", data); - console.log("getcommits username", username); - let commitMessage = data[0].commit.message; - amountOfCommits = data.filter( - (element) => element.author && element.author.login === username - ).length; +const getCommits = () => { + filteredRepos.forEach((repo) => { + const repoName = repo.name; + const commitsUrl = repo.commits_url.slice(0, -6); + + fetch(commitsUrl) + .then((res) => res.json()) + .then((data) => { + console.log("getcommits data", data); + global_ListCommitData.push(data); + return data; + }) + .then((data) => renderCommits(data, repoName)); + }); +}; - commitMessage = toCapitalLetter(commitMessage); +const renderCommits = (data, repoName) => { + const commitMessage = toCapitalLetter(data[0].commit.message); + const amountOfCommits = data.filter( + (element) => element.author && element.author.login === username + ).length; - let containerToChange = document.getElementById( - `${repoName}-commit-pulls-container` - ); + let containerToChange = document.getElementById( + `${repoName}-commit-pulls-container` + ); - containerToChange.innerHTML += ` + containerToChange.innerHTML += `
    ${commitMessage}
      `; - amountCommitmessages = document.getElementById( - `${repoName}-amountCommitmessages` - ); - amountCommitmessages.innerHTML += `${amountOfCommits}`; - - let menu = document.getElementById(`${repoName}-menu`); - data - .slice(1) - .filter( - (element) => element.author && element.author.login === username - ) - .forEach((element) => { - menu.innerHTML += `
    • ${toCapitalLetter( - element.commit.message - )}
      • `; - }); + + const amountCommitmessages = document.getElementById( + `${repoName}-amountCommitmessages` + ); + amountCommitmessages.innerHTML += `${amountOfCommits}`; + + let menu = document.getElementById(`${repoName}-menu`); + data + .slice(1) + .filter((element) => element.author && element.author.login === username) + .forEach((element) => { + menu.innerHTML += `
    • ${toCapitalLetter( + element.commit.message + )}
      • `; }); }; +// function that gets the pullrequests. If data.length > 0 it changes the inner html of "container to change" else it writes "no pull request made" +const getPullRequests = () => { + filteredRepos.forEach((repo) => { + const repoDefaultBranch = repo.default_branch; + const repoName = repo.name; + + // add reponame username and repodefault branch to the api to get into the right api adress depending on which repo. + const pullRequestsApi = `https://api.github.com/repos/technigo/${repoName}/pulls?head=${username}:${repoDefaultBranch}`; + + fetch(pullRequestsApi) + .then((res) => res.json()) + .then((data) => { + console.log("pullRequestsApi data", data); + return data; + }) + .then((data) => renderPullRequest(data, repoName)); + }); +}; + +const renderPullRequest = (data, repoName) => { + if (data.length > 0) { + const prTitle = data[0].title; + const prUrl = data[0].url; + let containerToChange = document.getElementById( + `${repoName}-commit-pulls-container` + ); + containerToChange.innerHTML += `
      Pull request:
      ${prTitle}
      `; + } else { + let containerToChange = document.getElementById( + `${repoName}-commit-pulls-container` + ); + containerToChange.innerHTML += `
      No pull request made
      `; + } +}; + getUsernameAndPicture(); getRepos(); diff --git a/code/style.css b/code/style.css index 274628fe..d4051895 100644 --- a/code/style.css +++ b/code/style.css @@ -19,8 +19,10 @@ body { /* ------------------------- Navbar container------------------------*/ .navbar__container { - display: flex; - padding: 20px; + display: grid; + grid-template-columns: 1fr auto auto auto; + column-gap: 10px; + padding: 10px 20px; align-items: center; color: white; background-color: rgb(14, 16, 18, 0.8); @@ -30,9 +32,15 @@ body { height: 7.5%; } +.icon { + margin-right: auto; + font-size: 20px; +} + h1 { font-size: 1.5em; font-weight: 100; + margin: 0; } /* ---------------------- User information-content-----------------------*/ From b2066a7ddb359a92d0b57fb241fbed6f79c15f6b Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Thu, 30 Sep 2021 15:59:03 +0200 Subject: [PATCH 10/16] cleaned up the project and finished the last accordion --- README.md | 8 ++-- code/script.js | 109 +++++++++++++++++++++++++++++++------------------ code/style.css | 55 +++++++++++++++++++++---- 3 files changed, 119 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..b89f6f83 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. +They assignment was to make a Github tracker with information fetched from githubs apis. ## 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? +Initially I didnt split up the fetch and the actual rendering of the content on my site. After doing a couple of functions I realised that it would probably be a better solution to split the fetching of the data and the rendering up into different functions. This made me lose some time on the project. If I would have had more time I would probably implement a search field to find a specific repo based on the name. I would also try to make the website visually more appealing for the viewer. ## 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://app.netlify.com/sites/zancotti-githubtracker/overview diff --git a/code/script.js b/code/script.js index aaa31967..a2891fe2 100644 --- a/code/script.js +++ b/code/script.js @@ -2,28 +2,27 @@ let username = "Zancotti"; let filteredRepos = []; let global__UserData, global__ReposData; -let global_ListCommitData = []; -//DOM selectors -let projectsPullRequest = document.getElementById(`projectsPullRequest`); +// ------------Functions-------------------- -// Used APIs -const myReposApi = `https://api.github.com/users/${username}/repos`; -const usernamePictureAndBioApi = `https://api.github.com/users/${username}`; - -// Functions +// Function in which I toggleMenu to to put on an active class for the commits accordion. const toggleMenu = (menuName) => { - console.log("toggle", menuName); let menu = document.getElementById(`${menuName}-menu`); menu.classList.toggle( "projects__commit-pulls-container__commits-accordion__active" ); }; -const filter = (type) => { - console.log(type); - filteredRepos = []; +// Function in which I toggleMenu to to put on an active class for the comments accordion. +const toggleMenuComments = (menuName) => { + let menu = document.getElementById(`${menuName}-comments-menu`); + menu.classList.toggle( + "projects__commit-comments-container__comments-accordion__active" + ); +}; +// a filter function to function out repos depending on the language of them. +const filter = (type) => { if (type === `js`) { const projects = document.getElementsByClassName(`projects__HTML`); @@ -46,16 +45,17 @@ const filter = (type) => { } }; +// A function to make the first character in a string into a capital letter. const toCapitalLetter = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; //Function in which I fetch data from the json and save the data from the json into a global variable. const getUsernameAndPicture = () => { + const usernamePictureAndBioApi = `https://api.github.com/users/${username}`; fetch(usernamePictureAndBioApi) .then((res) => res.json()) .then((data) => { - console.log(data); global__UserData = data; }) .then(() => renderUsernameAndPicture()); @@ -74,13 +74,13 @@ const renderUsernameAndPicture = () => {
      `; }; -// Function in which we fetch the repository data and filter them to the ones that includes `project` in the name. +// Function in which I fetch the repository data and save it into a global variable. I also after the data has been fetched +// call for the functions renderrepos, get commits and getpullrequests. const getRepos = () => { + const myReposApi = `https://api.github.com/users/${username}/repos`; fetch(myReposApi) .then((res) => res.json()) .then((data) => { - console.log(data); - global__ReposData = data; }) .then(() => renderRepos()) @@ -88,6 +88,7 @@ const getRepos = () => { .then(() => getPullRequests()); }; +// Function in which I filter the repodata. const renderRepos = () => { global__ReposData.forEach((e) => { if (e.fork === true && e.name.includes(`project`)) { @@ -95,11 +96,11 @@ const renderRepos = () => { } }); - // sort the filtered repoList after created dates and then reverse it. + // I sort the filtered repoList after creation dates and then reverse it. filteredRepos.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); filteredRepos = filteredRepos.reverse(); - // ForEach function over filteredRepos which picks up default branch and creation date and html Url. + // ForEach function over filteredRepos which picks up repoName, default branch, html Url and repoLanguage. filteredRepos.forEach((e) => { const repoName = e.name; const repoNameDisplay = toCapitalLetter(repoName); @@ -123,12 +124,13 @@ const renderRepos = () => {
      +
      `; }); }; -// function that fetches the commits and sets the first commit message (which is the last made) until commit message. The last commit message and -// amount of commits is fetched and printed put by changing the innerHTML. +// function that fetches the commits from the repo data and saved the data unto a global variable. It also sends data through to the new function +// renderCommits. const getCommits = () => { filteredRepos.forEach((repo) => { const repoName = repo.name; @@ -137,20 +139,20 @@ const getCommits = () => { fetch(commitsUrl) .then((res) => res.json()) .then((data) => { - console.log("getcommits data", data); - global_ListCommitData.push(data); return data; }) .then((data) => renderCommits(data, repoName)); }); }; +// A function which filter the amount of commits into just counting the ones that I have made in my name. const renderCommits = (data, repoName) => { const commitMessage = toCapitalLetter(data[0].commit.message); const amountOfCommits = data.filter( (element) => element.author && element.author.login === username ).length; + // Set the containerToChange into the dynamic reponame-commit-pulls-container and then switch the inner html of that container. let containerToChange = document.getElementById( `${repoName}-commit-pulls-container` ); @@ -160,12 +162,14 @@ const renderCommits = (data, repoName) => {
        `; + // Change the innerhtml of to registrer amount of commits on the website. const amountCommitmessages = document.getElementById( `${repoName}-amountCommitmessages` ); amountCommitmessages.innerHTML += `${amountOfCommits}`; let menu = document.getElementById(`${repoName}-menu`); + // I slice,filter and make a foreach and then change the innerhtml of menu (the commit message accordion) data .slice(1) .filter((element) => element.author && element.author.login === username) @@ -176,33 +180,37 @@ const renderCommits = (data, repoName) => { }); }; -// function that gets the pullrequests. If data.length > 0 it changes the inner html of "container to change" else it writes "no pull request made" +// function that for each repo set default branch and repo name and then fetch the pullrequests. const getPullRequests = () => { filteredRepos.forEach((repo) => { const repoDefaultBranch = repo.default_branch; const repoName = repo.name; - // add reponame username and repodefault branch to the api to get into the right api adress depending on which repo. + // add reponame username and repodefault branch to the api to get into the right api adress depending on repo. const pullRequestsApi = `https://api.github.com/repos/technigo/${repoName}/pulls?head=${username}:${repoDefaultBranch}`; fetch(pullRequestsApi) .then((res) => res.json()) .then((data) => { - console.log("pullRequestsApi data", data); return data; }) - .then((data) => renderPullRequest(data, repoName)); + .then((data) => { + renderPullRequest(data, repoName); + return data; + }) + .then((data) => getCommentsOnPullRequest(data, repoName)); }); }; +// Function that renderPullrequest and changes the innerhtml of the dynamic containerToChange. const renderPullRequest = (data, repoName) => { if (data.length > 0) { const prTitle = data[0].title; - const prUrl = data[0].url; + const prUrl = data[0].html_url; let containerToChange = document.getElementById( `${repoName}-commit-pulls-container` ); - containerToChange.innerHTML += `
        Pull request:
        ${prTitle}
        `; + containerToChange.innerHTML += `
        Pull request:
        ${prTitle}
        `; } else { let containerToChange = document.getElementById( `${repoName}-commit-pulls-container` @@ -211,19 +219,40 @@ const renderPullRequest = (data, repoName) => { } }; -getUsernameAndPicture(); -getRepos(); +// function that fetches the comments of the PR and then wait for the data and sends it through to the renderCommentsOnPullRequest function. +const getCommentsOnPullRequest = (data, repoName) => { + if (data.length > 0) { + const commentsOnPrApi = data[0].review_comments_url; -//### **🔴 Red Level (Intermediary Goals)** + fetch(commentsOnPrApi) + .then((res) => res.json()) + .then((data) => { + return data; + }) + .then((data) => renderCommentsOnPullRequest(data, repoName)); + } +}; + +// Function that renders the information on the of the container to change and pick up the information through a foreach. +const renderCommentsOnPullRequest = (data, repoName) => { + const containerToChange = document.getElementById( + `${repoName}-commit-comments-container` + ); + + containerToChange.innerHTML += ` +
        Show all PR comments: +
          +
          `; -// - Sort your list in different ways. -// **Example of what you can sort by:** creation date, name, most commits, followers or stargazers -// - Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos -// - Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion? -// - Display the comments you got from each pull request -// - When you're browsing through the repo object, you'll see that there's a lot of data that we can use. Create a chart over some of the data. -// **Example of data to use:** Repo size, people that starred your repo (stargazers) or amount of commits on each repo. + const commentsContainer = document.getElementById( + `${repoName}-comments-menu` + ); -// ### **âš« Black Level (Advanced Goals)** + data.forEach((comment) => { + commentsContainer.innerHTML += `
        • ${comment.user.login}: ${comment.body}
          • `; + }); +}; -// - Implement a search field to find a specific repo based on name +// Start the website by calling these functions. +getUsernameAndPicture(); +getRepos(); diff --git a/code/style.css b/code/style.css index d4051895..88638875 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); body { - /* background: #ffece9; */ background: rgb(246, 248, 250); margin: 0; padding: 0; @@ -29,16 +28,16 @@ body { position: fixed; top: 0; width: 100%; - height: 7.5%; + height: 10%; } .icon { margin-right: auto; - font-size: 20px; + font-size: 18px; } h1 { - font-size: 1.5em; + font-size: 18px; font-weight: 100; margin: 0; } @@ -58,15 +57,17 @@ h1 { height: 30%; } +.user-information__username-bio-container { + padding-left: 20px; +} + .user-information__username-bio-container__username { font-size: 40px; font-weight: 200; - padding-left: 20px; } .user-information__username-bio-container__bio { font-size: 16px; - padding-left: 20px; } /* ------------------------- Main projects section------------------------*/ @@ -78,7 +79,7 @@ h1 { } .projects__title { - font-size: 1.5em; + font-size: 1.25em; font-weight: bold; margin: 1em 0; } @@ -142,6 +143,8 @@ h1 { padding: 0px 6px; } +/*-----------------------Commits Accordion----------------------------*/ + .projects__commit-pulls-container__commits-accordion { padding: 5px 10px; background-color: rgb(0, 250, 154, 0.2); @@ -183,6 +186,42 @@ h1 { color: #218bff; } +.projects__commit-comments-container { + padding: 0px 6px; + border-radius: 10px; + order: 3; + cursor: pointer; +} + +/*-----------------------Comments Accordion----------------------------*/ + +.projects__commit-comments-container__comments-accordion { + padding: 5px 10px; + background-color: rgba(0, 137, 250, 0.2); + border: 1px solid lightgrey; + border-radius: 10px; + order: 1; + margin: 4px 0 0 0; + cursor: pointer; +} + +.projects__commit-comments-container__comments-accordion__menu { + order: 2; + flex-direction: column; + row-gap: 6px; + min-width: 250px; + max-height: 0px; + margin: 0; + overflow: hidden; + list-style-position: outside; +} + +.projects__commit-comments-container__comments-accordion__active { + display: flex; + max-height: 2000px; + transition: max-height 400ms ease-in-out; +} + /* ------------------------- Chart container------------------------*/ .chart { @@ -191,7 +230,7 @@ h1 { margin-bottom: 40px; } -/* ------------------------- IPAD Alterations------------------------*/ +/* ------------------------- iPad Alterations------------------------*/ @media (min-width: 668px) and (max-width: 1024px) { .user-information { From b168c074ce1de0b695b54d9960598b4250391ee4 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Thu, 30 Sep 2021 16:23:18 +0200 Subject: [PATCH 11/16] updated the spacing of the pr comments accordion --- README.md | 2 +- code/script.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b89f6f83..2dc1b0ad 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ They assignment was to make a Github tracker with information fetched from githu ## The problem -Initially I didnt split up the fetch and the actual rendering of the content on my site. After doing a couple of functions I realised that it would probably be a better solution to split the fetching of the data and the rendering up into different functions. This made me lose some time on the project. If I would have had more time I would probably implement a search field to find a specific repo based on the name. I would also try to make the website visually more appealing for the viewer. +Initially I didnt split up the fetch and the actual rendering of the content on my site. After doing a couple of functions I realised that it would probably be a better solution to split the fetching of the data and the rendering up into different functions. This made me lose some time on the project. If I would have had more time I would probably implement a search field to find a specific repo based on the name. I would also try to make the website visually to make it more appealing for the viewer. ## View it live diff --git a/code/script.js b/code/script.js index a2891fe2..d83e9493 100644 --- a/code/script.js +++ b/code/script.js @@ -249,7 +249,7 @@ const renderCommentsOnPullRequest = (data, repoName) => { ); data.forEach((comment) => { - commentsContainer.innerHTML += `
        • ${comment.user.login}: ${comment.body}
          • `; + commentsContainer.innerHTML += `
        • ${comment.user.login}: ${comment.body}
          • `; }); }; From 1df494312c994f398793fe7adfce3f1a0ce2f49a Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Thu, 30 Sep 2021 16:27:18 +0200 Subject: [PATCH 12/16] changed the width of the navbar --- code/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/style.css b/code/style.css index 88638875..889ec558 100644 --- a/code/style.css +++ b/code/style.css @@ -28,7 +28,7 @@ body { position: fixed; top: 0; width: 100%; - height: 10%; + height: 60px; } .icon { @@ -279,7 +279,6 @@ h1 { } .navbar__container { max-width: 1024px; - max-height: 60px; } .wrapper { From ad6bae383f81e2903ea88a88e89f23aa415d03c1 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Thu, 30 Sep 2021 16:32:29 +0200 Subject: [PATCH 13/16] made the cursor a pointer when hovering over the icons --- code/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/style.css b/code/style.css index 889ec558..2cb939d5 100644 --- a/code/style.css +++ b/code/style.css @@ -36,6 +36,10 @@ body { font-size: 18px; } +.icon:hover { + cursor: pointer; +} + h1 { font-size: 18px; font-weight: 100; From 68f0dbbb1ddce402a7cf98d13f51772aeea19c5f Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Thu, 7 Oct 2021 12:37:38 +0200 Subject: [PATCH 14/16] updated with the right netlify url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2dc1b0ad..15e52776 100644 --- a/README.md +++ b/README.md @@ -8,4 +8,4 @@ Initially I didnt split up the fetch and the actual rendering of the content on ## View it live -https://app.netlify.com/sites/zancotti-githubtracker/overview +https://zancotti-githubtracker.netlify.app/ From 60c06229a3381b386dfc4eecd9c0c4558a3797c9 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Thu, 14 Oct 2021 22:33:36 +0200 Subject: [PATCH 15/16] Added dynamic chart, added tooltips for clarification --- code/chart.js | 38 ++++++++++++++++++++------------------ code/index.html | 22 +++++++++++++++++----- code/script.js | 6 +++++- 3 files changed, 42 insertions(+), 24 deletions(-) diff --git a/code/chart.js b/code/chart.js index 592d8fe5..e2a2f133 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,20 +1,22 @@ -//DOM-selector -const ctx = document.getElementById("chart").getContext("2d"); +const renderChart = (finishedProjects) => { + //DOM-selector + const ctx = document.getElementById("chart").getContext("2d"); -//Chart -const config = { - type: "pie", - data: { - labels: ["Finished projects", "Projects left"], - datasets: [ - { - label: "My First Dataset", - data: [5, 19 - 5], - backgroundColor: ["rgb(0,250,154,0.20)", "rgb(228, 228, 228)"], - hoverOffset: 4, - }, - ], - }, -}; + //Chart + const config = { + type: "pie", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [finishedProjects, 19 - finishedProjects], + backgroundColor: ["rgb(0,250,154,0.20)", "rgb(228, 228, 228)"], + hoverOffset: 4, + }, + ], + }, + }; -const myChart = new Chart(ctx, config); + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 77ab832a..9da7519f 100644 --- a/code/index.html +++ b/code/index.html @@ -17,9 +17,21 @@

          GitHub Tracker

          - - - + + +
          @@ -29,7 +41,7 @@

          GitHub Tracker

          - - + + diff --git a/code/script.js b/code/script.js index d83e9493..4831aa0b 100644 --- a/code/script.js +++ b/code/script.js @@ -96,6 +96,8 @@ const renderRepos = () => { } }); + renderChart(filteredRepos.length - 1); + // I sort the filtered repoList after creation dates and then reverse it. filteredRepos.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); filteredRepos = filteredRepos.reverse(); @@ -121,7 +123,7 @@ const renderRepos = () => {
          Go to ${repoName}
          Programming language: ${repoLanguage}
          -
          +
          @@ -186,6 +188,8 @@ const getPullRequests = () => { const repoDefaultBranch = repo.default_branch; const repoName = repo.name; + finishedProjects = filteredRepos.length - 1; + // add reponame username and repodefault branch to the api to get into the right api adress depending on repo. const pullRequestsApi = `https://api.github.com/repos/technigo/${repoName}/pulls?head=${username}:${repoDefaultBranch}`; From b2416dee75806f5212262034d0d966b7c3e423d4 Mon Sep 17 00:00:00 2001 From: Sabrina Zancotti Date: Fri, 15 Oct 2021 15:57:10 +0200 Subject: [PATCH 16/16] updated the readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 15e52776..96c65513 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ They assignment was to make a Github tracker with information fetched from githu ## The problem -Initially I didnt split up the fetch and the actual rendering of the content on my site. After doing a couple of functions I realised that it would probably be a better solution to split the fetching of the data and the rendering up into different functions. This made me lose some time on the project. If I would have had more time I would probably implement a search field to find a specific repo based on the name. I would also try to make the website visually to make it more appealing for the viewer. +Initially I didnt split up the fetch and the actual rendering of the content on my site. After doing a couple of functions I realised that it would probably be a better solution to split the fetching of the data and the rendering up into different functions. ## View it live