From 7e9c51f569b29e35024a4dc5463558bd79e586d1 Mon Sep 17 00:00:00 2001 From: HedvigM Date: Sun, 26 Sep 2021 20:21:51 +0200 Subject: [PATCH 01/13] fetching API for the gutHub repos --- code/script.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..d991be0f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,54 @@ +// Endpoint to get all your repos +// https://api.github.com/users/HedvigM/repos (repos) + +//Endpoint to get all PRs from a Technigo repo `https://api.github.com/repos/technigo/${reponame}/pulls` + +//To get the comments from a PR, you need to get the URL from the `review_comments_url` property in the PR json object. It might look something like this: `https://api.github.com/repos/Technigo/project-news-site/pulls/247/comments` and then do a fetch with that url. + +//To get the commits from a PR, you need to get the URL from the `commits_url` property in the PR json object. It might look something like this:`https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits` and then do a fetch with that url. + +const repos = 'https://api.github.com/users/HedvigM/repos' +fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[0].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[1].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[2].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[3].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[4].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[5].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[6].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[7].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[8].name)); + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data[9].name)); + + + fetch(repos) + .then(response => response.json()) + .then(data => console.log(data)); \ No newline at end of file From e96797c86370c8c1f5f6cd126d82481f6a585152 Mon Sep 17 00:00:00 2001 From: HedvigM Date: Tue, 28 Sep 2021 11:23:05 +0200 Subject: [PATCH 02/13] fetched the APIS and made a chart --- code/chart.js | 25 +++++++++++++++++ code/index.html | 16 ++++++++--- code/script.js | 71 +++++++++++++++++++------------------------------ code/style.css | 59 ++++++++++++++++++++++++++++++++++++++-- 4 files changed, 122 insertions(+), 49 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..c3f10249 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,28 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + + + +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects to go', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(85, 64, 87)', + 'rgb(138, 189, 144)', + ], + hoverOffset: 4 + }] + } + }; + + const chart = new Chart(ctx, config) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..fe243fd5 100644 --- a/code/index.html +++ b/code/index.html @@ -6,12 +6,22 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+

GitHub Tracker

+
+

Profile:

+
+ +
+

Projects:

+
+
+ + diff --git a/code/script.js b/code/script.js index d991be0f..c6f701c7 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,4 @@ -// Endpoint to get all your repos -// https://api.github.com/users/HedvigM/repos (repos) + //Endpoint to get all PRs from a Technigo repo `https://api.github.com/repos/technigo/${reponame}/pulls` @@ -7,48 +6,32 @@ //To get the commits from a PR, you need to get the URL from the `commits_url` property in the PR json object. It might look something like this:`https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits` and then do a fetch with that url. -const repos = 'https://api.github.com/users/HedvigM/repos' -fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[0].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[1].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[2].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[3].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[4].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[5].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[6].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[7].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[8].name)); - - fetch(repos) - .then(response => response.json()) - .then(data => console.log(data[9].name)); +const projects = document.getElementById("projects") +const profile = document.getElementById("profile") +const profileContainer = document.getElementById("profile-container") - fetch(repos) +//^^^^^^^^^^^^^^^^^^^^^^ REPOS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^// +const repos = 'https://api.github.com/users/HedvigM/repos' +fetch(repos) .then(response => response.json()) - .then(data => console.log(data)); \ No newline at end of file + .then(data => { + //Username and userpic + profileContainer.innerHTML+= ` +

${data[0].owner.login}

+ profile picture + ` + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) + /* console.log(forkedRepos) */ + forkedRepos.forEach(repo => projects.innerHTML += ` +
+

${repo.name}

+

${repo.default_branch}

+ Check the project out! +

${repo.pushed_at}

+ +
+ `) + drawChart(forkedRepos.length) + }) + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..6627cb68 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,58 @@ + + body { - background: #FFECE9; -} \ No newline at end of file + background: #EFDE97; + width: 100%; + margin: 0px; +} + +header { + background-color: #CB6A5D +} + +h1 { + margin: 0px; + padding: 50px; + text-align: center; + font-size: 3em; +} + +h3 { + padding: 0px; + margin: 0; +} + +p { + padding: 0px; + margin: 0; +} + +img { + border-radius: 50%; + width: 200px; +} + +.projects { + display: grid; + Grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10px; + +} + +.repos { + border: 2px solid black; + grid-column: span 1; + grid-column-end: auto; + padding: 5px; +} +/* Mobile */ +@media (min-width: 0px) and (max-width: 767px) {} + +/* Tablet */ +@media (min-width: 768px) and (max-width: 991px) {} + +/* small laptop */ +@media (min-width: 992px) {} + +/* big laptop */ +@media (min-width: 1200px) {} \ No newline at end of file From bec425d9212f6e01f87118fd77103f16fdcf446a Mon Sep 17 00:00:00 2001 From: HedvigM Date: Tue, 28 Sep 2021 14:24:46 +0200 Subject: [PATCH 03/13] styled the site --- code/chart.js | 4 +- code/index.html | 24 ++++++--- code/script.js | 21 +++++--- code/style.css | 128 +++++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 149 insertions(+), 28 deletions(-) diff --git a/code/chart.js b/code/chart.js index c3f10249..ada37134 100644 --- a/code/chart.js +++ b/code/chart.js @@ -17,8 +17,8 @@ const drawChart = (amount) => { label: 'My First Dataset', data: [amount, 19-amount], backgroundColor: [ - 'rgb(85, 64, 87)', - 'rgb(138, 189, 144)', + 'rgb(161, 168, 143)', + 'rgb(119, 133, 161)', ], hoverOffset: 4 }] diff --git a/code/index.html b/code/index.html index fe243fd5..ec32e0bc 100644 --- a/code/index.html +++ b/code/index.html @@ -7,24 +7,32 @@ Project GitHub Tracker + + + + + + + -

GitHub Tracker

-
-

Profile:

+
+

GitHub
Tracker

+

GitHub Tracker

+
+
-
-

Projects:

+

Forked Technigo Projects:

- + - - + +

Footer

diff --git a/code/script.js b/code/script.js index c6f701c7..54cca367 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,5 @@ -//Endpoint to get all PRs from a Technigo repo `https://api.github.com/repos/technigo/${reponame}/pulls` //To get the comments from a PR, you need to get the URL from the `review_comments_url` property in the PR json object. It might look something like this: `https://api.github.com/repos/Technigo/project-news-site/pulls/247/comments` and then do a fetch with that url. @@ -18,20 +17,28 @@ fetch(repos) .then(data => { //Username and userpic profileContainer.innerHTML+= ` -

${data[0].owner.login}

- profile picture + profile picture +

${data[0].owner.login}

` const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) - /* console.log(forkedRepos) */ + console.log(forkedRepos) forkedRepos.forEach(repo => projects.innerHTML += `

${repo.name}

-

${repo.default_branch}

+

The default branch is: ${repo.default_branch}

Check the project out! -

${repo.pushed_at}

+

The latest push: ${repo.pushed_at}

`) drawChart(forkedRepos.length) + //pullRequest(forkedRepos.length) + + + //Trying to get the amount of pullrequests + console.log(`https://api.github.com/repos/technigo/${data[5].name}/pulls`) + + }) - \ No newline at end of file + + diff --git a/code/style.css b/code/style.css index 6627cb68..9c7912e0 100644 --- a/code/style.css +++ b/code/style.css @@ -1,20 +1,24 @@ body { - background: #EFDE97; + background: #ECE0D0; width: 100%; margin: 0px; } header { - background-color: #CB6A5D + background-color: #A1A88F; +} + +h1, h2 { + font-family: 'Stardos Stencil', cursive; } h1 { margin: 0px; padding: 50px; text-align: center; - font-size: 3em; + font-size: 4em; } h3 { @@ -27,32 +31,134 @@ p { margin: 0; } +.profile-container h2 { + font-size: 4em; +} + +.project-container h2 { + font-size: 3em; + margin: 0px 0px; + text-align: center; +} + + img { border-radius: 50%; width: 200px; + grid-column: span 1; } -.projects { +.profile-container { display: grid; - Grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px; + Grid-template-columns: 1fr 1fr; + margin: 100px; +} +profile-name { + grid-column: span 1; +} + +.projects { + display: grid; + Grid-template-columns: 1fr; + grid-gap: 20px; + margin: 20px 50px; } .repos { - border: 2px solid black; + border: 1px solid black; + background-color: #CBD1D0; grid-column: span 1; grid-column-end: auto; padding: 5px; } + +footer{ + background-color:#A1A88F; + margin-top: 30px; + padding: 10px; +} + +footer h1 { + padding: 0px; + margin: 0px; +} + +.canvas { + margin: 50px 100px; + +} + /* Mobile */ -@media (min-width: 0px) and (max-width: 767px) {} +@media (min-width: 0px) and (max-width: 767px) { +.not-break { + display: none; +} + +} /* Tablet */ -@media (min-width: 768px) and (max-width: 991px) {} +@media (min-width: 768px) and (max-width: 991px) { + .break { + display: none; + } + + img { + width: 300px; + } + + h2 { + font-size: 5em; + } + + .projects { + Grid-template-columns: 1fr 1fr; + } +} /* small laptop */ -@media (min-width: 992px) {} +@media (min-width: 992px) { + .break { + display: none; + } + + img { + width: 300px; + } + + h2 { + font-size: 5em; + } + + .projects { + Grid-template-columns: 1fr 1fr 1fr 1fr; + } +} /* big laptop */ -@media (min-width: 1200px) {} \ No newline at end of file +@media (min-width: 1200px) { + .profile-container { + margin: 100px 200px; + } + + .project-container { + margin: 100px 200px; + } + + + .break { + display: none; + } + + img { + width: 300px; + } + + h2 { + font-size: 5em; + } + + .projects { + Grid-template-columns: 1fr 1fr 1fr 1fr; + } +} \ No newline at end of file From ad651b7c64813aeefb477351c6d9286a8388d57c Mon Sep 17 00:00:00 2001 From: HedvigM Date: Wed, 29 Sep 2021 14:52:15 +0200 Subject: [PATCH 04/13] Dynamic ID --- code/app.js | 75 ++++++++++++++++++++++++++++++++ code/index.html | 6 ++- code/script.js | 113 ++++++++++++++++++++++++++++++++++++------------ code/style.css | 29 +++++++++---- 4 files changed, 186 insertions(+), 37 deletions(-) create mode 100644 code/app.js diff --git a/code/app.js b/code/app.js new file mode 100644 index 00000000..fd92631c --- /dev/null +++ b/code/app.js @@ -0,0 +1,75 @@ +const USER = ''; // !!! Place your user over here !!! +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const projectsContainer = document.getElementById('projects'); + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); + + technigoRepositories.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ ${repo.name} with default branch ${ + repo.default_branch + } +

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

+

Commits amount:

+
+ `; + + // // Approach number 1 + // fetchPullRequestsSingle(repo); + }); + + // Approach number 2 + fetchPullRequestsArray(technigoRepositories); + + // Draw chart with technigoRepos data + drawBarChart(technigoRepos); + }); +}; + +// // Approach number 1 +// const fetchPullRequestsSingle = (singleRepository) => { +// fetch(singleRepository); +// }; + +// Approach number 2 +const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + fetch(PULL_URL) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request yet done :('; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +fetchRepositories(); \ No newline at end of file diff --git a/code/index.html b/code/index.html index ec32e0bc..2cbf6f03 100644 --- a/code/index.html +++ b/code/index.html @@ -21,6 +21,10 @@

GitHub
Tracker

GitHub Tracker

+ +
+ +
@@ -32,7 +36,7 @@

Forked Technigo Projects:

-

Footer

+

Hedvig Mejstedt 🦁

diff --git a/code/script.js b/code/script.js index 54cca367..4ae09dac 100644 --- a/code/script.js +++ b/code/script.js @@ -1,44 +1,101 @@ - - - -//To get the comments from a PR, you need to get the URL from the `review_comments_url` property in the PR json object. It might look something like this: `https://api.github.com/repos/Technigo/project-news-site/pulls/247/comments` and then do a fetch with that url. - -//To get the commits from a PR, you need to get the URL from the `commits_url` property in the PR json object. It might look something like this:`https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits` and then do a fetch with that url. - - const projects = document.getElementById("projects") const profile = document.getElementById("profile") const profileContainer = document.getElementById("profile-container") +const test = document.getElementById("test") +const userName = 'HedvigM' + //^^^^^^^^^^^^^^^^^^^^^^ REPOS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^// -const repos = 'https://api.github.com/users/HedvigM/repos' + +const repos = `https://api.github.com/users/${userName}/repos` fetch(repos) .then(response => response.json()) .then(data => { - //Username and userpic - profileContainer.innerHTML+= ` - profile picture -

${data[0].owner.login}

- ` - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) - console.log(forkedRepos) - forkedRepos.forEach(repo => projects.innerHTML += ` -
-

${repo.name}

+ + //Fetching only the forked repos + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) + + //Username and userpic + profileContainer.innerHTML+= ` + profile picture +

${data[0].owner.login}

+ ` + + // Repos and pulls + forkedRepos.forEach((repo) => projects.innerHTML += ` +
+

${repo.name}

The default branch is: ${repo.default_branch}

- Check the project out! -

The latest push: ${repo.pushed_at}

- +

The latest push: ${repo.pushed_at.substring(0, 10)}

+

No pull request is yet made 🤷

+

ooops, there are no commits in this projet

- `) - drawChart(forkedRepos.length) - //pullRequest(forkedRepos.length) + `) + + // substring(0, 10) - betyder att vi tar bort de tecknen som kommer efter 10st. + + drawChart(forkedRepos.length) + getPullRequests(forkedRepos) + getCommitsForPullRequests(forkedRepos) + }) + + - //Trying to get the amount of pullrequests - console.log(`https://api.github.com/repos/technigo/${data[5].name}/pulls`) +//^^^^^^^^^^^^^^^^^ fetching pull requests ^^^^^^^^^^^^^^^^^^^^^^^^^^// +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(fetchedPulls => { + const hedvigsPulls = fetchedPulls.filter(fetchedPull => fetchedPull.user.login === repo.owner.login) + + document.getElementById(`pull-${repo.name}`).innerHTML = + `Pull request was made ${hedvigsPulls[0].created_at.substring(0, 10)}`; + //allt som skrivs inom parentesen efter get ElementById är en del av ID:t. + + getCommitsForPullRequests(hedvigsPulls) + + }) }) - +} + + + +const getCommitsForPullRequests = (pullRequests, hedvigsPulls) => { + pullRequests.forEach(pullRequest => { + fetch(pullRequest.commits_url) + .then(res => res.json()) + .then(fetchedCommits => { + /* console.log('FETCHED COMMITS', fetchedCommits) + document.getElementById(`commit-${repo.name}`).innerHTML = + `Number of commits in this project: ${fetchedCommits.length}`; */ + projects.innerHTML += ` +

Number of commits in this project: ${fetchedCommits.length}

+ ` + + }) + }) +} + + + + + + + + + + + + + + + + + + diff --git a/code/style.css b/code/style.css index 9c7912e0..e9319713 100644 --- a/code/style.css +++ b/code/style.css @@ -31,6 +31,22 @@ p { margin: 0; } +a { + color: black; + font-size: 2em; + text-align: center; + text-decoration: none; + line-height: 2.5em; +} + +a:hover { + color: #A1A88F; + font-weight: bold; + text-decoration-style: wavy; + text-decoration-line:underline; + text-decoration-color: #7785A1; +} + .profile-container h2 { font-size: 4em; } @@ -89,6 +105,9 @@ footer h1 { } + + + /* Mobile */ @media (min-width: 0px) and (max-width: 767px) { .not-break { @@ -131,19 +150,13 @@ footer h1 { } .projects { - Grid-template-columns: 1fr 1fr 1fr 1fr; + Grid-template-columns: 1fr 1fr 1fr; } } /* big laptop */ @media (min-width: 1200px) { - .profile-container { - margin: 100px 200px; - } - .project-container { - margin: 100px 200px; - } .break { @@ -159,6 +172,6 @@ footer h1 { } .projects { - Grid-template-columns: 1fr 1fr 1fr 1fr; + Grid-template-columns: 1fr 1fr 1fr; } } \ No newline at end of file From fab878b489dbaf60d925acfc4b9153fb4ba63caf Mon Sep 17 00:00:00 2001 From: HedvigM Date: Thu, 30 Sep 2021 13:04:46 +0200 Subject: [PATCH 05/13] Made one of two dynamic id:s work --- code/app.js | 35 ++++++++++++++++++++++++++- code/script.js | 64 ++++++++++++++++++++++++-------------------------- 2 files changed, 65 insertions(+), 34 deletions(-) diff --git a/code/app.js b/code/app.js index fd92631c..3207e7a8 100644 --- a/code/app.js +++ b/code/app.js @@ -72,4 +72,37 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { }); }; -fetchRepositories(); \ No newline at end of file +fetchRepositories(); + + + +/* TODO: +1. få ut infon om commits på sidan +2. få ut commitsen i den rätta rutan + + +3. titta på hur Max hanterade "dates" från lektionen +*/ + + +// Trying to push up into the innerHTML projects + /* console.log('FETCHED COMMITS', fetchedCommits) + document.getElementById(`commit-${repo.name}`).innerHTML = + `Number of commits in this project: ${fetchedCommits.length}`; */ + /* projects.innerHTML += ` +

Number of commits in this project: ${fetchedCommits.length}

+ ` + + + + document.getElementById(`commits-${pullRequest.commits_url}`).innerHTML = `There are ${fetchedCommits.length} commits`)}; + + +

ooops, there are no commits in this projet

+ + document.getElementById(`commits-${pullRequest.commits_url}`).innerHTML += `Number of commits: ${fetchedCommits.commits_url}`; + +_____________ +

No Commit Yet

+ + document.getElementById(`commits-${fetchedCommits.name}`).innerHTML += `Antalet Commits: ${fetchedCommits.length}`; \ No newline at end of file diff --git a/code/script.js b/code/script.js index 4ae09dac..13ee6130 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,7 @@ const projects = document.getElementById("projects") const profile = document.getElementById("profile") const profileContainer = document.getElementById("profile-container") +const projectContainer = document.getElementById("project-container") const test = document.getElementById("test") const userName = 'HedvigM' @@ -12,8 +13,9 @@ fetch(repos) .then(response => response.json()) .then(data => { - //Fetching only the forked repos - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) + //Fetching only the forked repos and the ones starts with "project" from my GitHub account. + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-guess-who')) + // change back to only "project" later //Username and userpic profileContainer.innerHTML+= ` @@ -21,22 +23,20 @@ fetch(repos)

${data[0].owner.login}

` - // Repos and pulls + // Repos and fetched pulls from the functions down under. forkedRepos.forEach((repo) => projects.innerHTML += `

${repo.name}

The default branch is: ${repo.default_branch}

The latest push: ${repo.pushed_at.substring(0, 10)}

No pull request is yet made 🤷

-

ooops, there are no commits in this projet

+
`) - - // substring(0, 10) - betyder att vi tar bort de tecknen som kommer efter 10st. drawChart(forkedRepos.length) getPullRequests(forkedRepos) - getCommitsForPullRequests(forkedRepos) + //getCommitsForPullRequests(forkedRepos) }) @@ -45,6 +45,8 @@ fetch(repos) //^^^^^^^^^^^^^^^^^ fetching pull requests ^^^^^^^^^^^^^^^^^^^^^^^^^^// + + const getPullRequests = (repos) => { //Get all the PRs for each project. repos.forEach(repo => { @@ -52,11 +54,11 @@ const getPullRequests = (repos) => { .then(res => res.json()) .then(fetchedPulls => { const hedvigsPulls = fetchedPulls.filter(fetchedPull => fetchedPull.user.login === repo.owner.login) + //This fetch is fetching all the pulls at the technigo user, so we have to sort everyone exept my user out "of the bag". Only my pulls for each project will show after this "hedvigsPulls" function. - document.getElementById(`pull-${repo.name}`).innerHTML = - `Pull request was made ${hedvigsPulls[0].created_at.substring(0, 10)}`; - //allt som skrivs inom parentesen efter get ElementById är en del av ID:t. - + document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request was made ${hedvigsPulls[0].created_at.substring(0, 10)}`; + //allt som skrivs inom parentesen efter get ElementById är en del av ID:t. + console.log('Hedvigs PULLS. Arrey med ett objekt', hedvigsPulls) getCommitsForPullRequests(hedvigsPulls) }) @@ -64,38 +66,34 @@ const getPullRequests = (repos) => { } - -const getCommitsForPullRequests = (pullRequests, hedvigsPulls) => { +//Funktionen skall ta infon från det sorterade pullrequestet(hedvigsPulls) och sortera fram mitt commit_url från det. +const getCommitsForPullRequests = (pullRequests) => { pullRequests.forEach(pullRequest => { + console.log('Kolla här på pullRequest', pullRequest) + + //borde visa ett pullrequest CHECK fetch(pullRequest.commits_url) .then(res => res.json()) .then(fetchedCommits => { - /* console.log('FETCHED COMMITS', fetchedCommits) - document.getElementById(`commit-${repo.name}`).innerHTML = - `Number of commits in this project: ${fetchedCommits.length}`; */ - projects.innerHTML += ` -

Number of commits in this project: ${fetchedCommits.length}

- ` + console.log('kolla här 2:', fetchedCommits + ) - }) - }) -} - - - - - - - - - - - + + //Funktionen skall gå ner en nivå till och bara visa commits_URL + }) + }) +} + + + + + + From 5b1978b086abf4fe212e5b6cd125ca2ff36bc04a Mon Sep 17 00:00:00 2001 From: HedvigM Date: Thu, 30 Sep 2021 13:21:58 +0200 Subject: [PATCH 06/13] Fixed the other dynamic id --- code/script.js | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/code/script.js b/code/script.js index 13ee6130..f907181a 100644 --- a/code/script.js +++ b/code/script.js @@ -14,7 +14,7 @@ fetch(repos) .then(data => { //Fetching only the forked repos and the ones starts with "project" from my GitHub account. - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-guess-who')) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) // change back to only "project" later //Username and userpic @@ -30,7 +30,7 @@ fetch(repos)

The default branch is: ${repo.default_branch}

The latest push: ${repo.pushed_at.substring(0, 10)}

No pull request is yet made 🤷

- +

There are no commits yet...

`) @@ -40,13 +40,7 @@ fetch(repos) }) - - - - //^^^^^^^^^^^^^^^^^ fetching pull requests ^^^^^^^^^^^^^^^^^^^^^^^^^^// - - const getPullRequests = (repos) => { //Get all the PRs for each project. repos.forEach(repo => { @@ -59,15 +53,15 @@ const getPullRequests = (repos) => { document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request was made ${hedvigsPulls[0].created_at.substring(0, 10)}`; //allt som skrivs inom parentesen efter get ElementById är en del av ID:t. console.log('Hedvigs PULLS. Arrey med ett objekt', hedvigsPulls) - getCommitsForPullRequests(hedvigsPulls) + getCommitsForPullRequests(hedvigsPulls, repo) }) }) } - +//^^^^^^^^^^^^^^^ fetching commits from the pull requests ^^^^^^^^^^^^^^^^^// //Funktionen skall ta infon från det sorterade pullrequestet(hedvigsPulls) och sortera fram mitt commit_url från det. -const getCommitsForPullRequests = (pullRequests) => { +const getCommitsForPullRequests = (pullRequests, repo) => { pullRequests.forEach(pullRequest => { console.log('Kolla här på pullRequest', pullRequest) @@ -75,12 +69,9 @@ const getCommitsForPullRequests = (pullRequests) => { fetch(pullRequest.commits_url) .then(res => res.json()) .then(fetchedCommits => { - console.log('kolla här 2:', fetchedCommits - ) - - - - + console.log('kolla här 2:', fetchedCommits.length) + + document.getElementById(`commits-${repo.name}`).innerHTML = `Number of commits: ${fetchedCommits.length}`; //Funktionen skall gå ner en nivå till och bara visa commits_URL }) From 7d89c9f526b0cadd6de3ce5ea060b350a54fc409 Mon Sep 17 00:00:00 2001 From: HedvigM Date: Thu, 30 Sep 2021 13:34:46 +0200 Subject: [PATCH 07/13] Made the Dates look nicer with .toLocal.Datestring() --- code/script.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/code/script.js b/code/script.js index f907181a..81171423 100644 --- a/code/script.js +++ b/code/script.js @@ -28,7 +28,7 @@ fetch(repos)

${repo.name}

The default branch is: ${repo.default_branch}

-

The latest push: ${repo.pushed_at.substring(0, 10)}

+

The latest push: ${new Date(repo.pushed_at).toLocaleDateString()}

No pull request is yet made 🤷

There are no commits yet...

@@ -50,9 +50,9 @@ const getPullRequests = (repos) => { const hedvigsPulls = fetchedPulls.filter(fetchedPull => fetchedPull.user.login === repo.owner.login) //This fetch is fetching all the pulls at the technigo user, so we have to sort everyone exept my user out "of the bag". Only my pulls for each project will show after this "hedvigsPulls" function. - document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request was made ${hedvigsPulls[0].created_at.substring(0, 10)}`; + document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request was made ${new Date (hedvigsPulls[0].created_at).toLocaleDateString()}`; //allt som skrivs inom parentesen efter get ElementById är en del av ID:t. - console.log('Hedvigs PULLS. Arrey med ett objekt', hedvigsPulls) + getCommitsForPullRequests(hedvigsPulls, repo) }) @@ -63,13 +63,10 @@ const getPullRequests = (repos) => { //Funktionen skall ta infon från det sorterade pullrequestet(hedvigsPulls) och sortera fram mitt commit_url från det. const getCommitsForPullRequests = (pullRequests, repo) => { pullRequests.forEach(pullRequest => { - console.log('Kolla här på pullRequest', pullRequest) - //borde visa ett pullrequest CHECK fetch(pullRequest.commits_url) .then(res => res.json()) .then(fetchedCommits => { - console.log('kolla här 2:', fetchedCommits.length) document.getElementById(`commits-${repo.name}`).innerHTML = `Number of commits: ${fetchedCommits.length}`; //Funktionen skall gå ner en nivå till och bara visa commits_URL From 78da53d38fc0d23982fad0e44230851fe7bd17b4 Mon Sep 17 00:00:00 2001 From: HedvigM Date: Thu, 30 Sep 2021 13:53:57 +0200 Subject: [PATCH 08/13] Made the "project" and the "-" disappear --- code/script.js | 4 ++-- code/style.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 81171423..faafa8e0 100644 --- a/code/script.js +++ b/code/script.js @@ -26,14 +26,14 @@ fetch(repos) // Repos and fetched pulls from the functions down under. forkedRepos.forEach((repo) => projects.innerHTML += `
-

${repo.name}

 +

${repo.name.substring(8).replace("-"," ")}

The default branch is: ${repo.default_branch}

The latest push: ${new Date(repo.pushed_at).toLocaleDateString()}

No pull request is yet made 🤷

There are no commits yet...

`) - + drawChart(forkedRepos.length) getPullRequests(forkedRepos) //getCommitsForPullRequests(forkedRepos) diff --git a/code/style.css b/code/style.css index e9319713..d67693b3 100644 --- a/code/style.css +++ b/code/style.css @@ -16,7 +16,7 @@ h1, h2 { h1 { margin: 0px; - padding: 50px; + padding: 10px 50px; text-align: center; font-size: 4em; } @@ -27,7 +27,7 @@ h3 { } p { - padding: 0px; + padding: 0px 5px; margin: 0; } From 5d6a8bc5d32ed41411fd93f7297954c0486c3a0c Mon Sep 17 00:00:00 2001 From: HedvigM Date: Fri, 1 Oct 2021 12:12:35 +0200 Subject: [PATCH 09/13] Code cleaning --- code/index.html | 6 ---- code/script.js | 15 +++++---- code/style.css | 87 ++++++++++++++++++++----------------------------- 3 files changed, 44 insertions(+), 64 deletions(-) diff --git a/code/index.html b/code/index.html index 2cbf6f03..9cdd718e 100644 --- a/code/index.html +++ b/code/index.html @@ -22,9 +22,6 @@

GitHub
Tracker

GitHub Tracker

-
- -
@@ -32,9 +29,6 @@

Forked Technigo Projects:

- - -

Hedvig Mejstedt 🦁

diff --git a/code/script.js b/code/script.js index faafa8e0..0a24bcc0 100644 --- a/code/script.js +++ b/code/script.js @@ -2,7 +2,6 @@ const projects = document.getElementById("projects") const profile = document.getElementById("profile") const profileContainer = document.getElementById("profile-container") const projectContainer = document.getElementById("project-container") -const test = document.getElementById("test") const userName = 'HedvigM' @@ -12,7 +11,7 @@ const repos = `https://api.github.com/users/${userName}/repos` fetch(repos) .then(response => response.json()) .then(data => { - + console.log(data) //Fetching only the forked repos and the ones starts with "project" from my GitHub account. const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) // change back to only "project" later @@ -21,6 +20,7 @@ fetch(repos) profileContainer.innerHTML+= ` profile picture

${data[0].owner.login}

+ ` // Repos and fetched pulls from the functions down under. @@ -36,7 +36,6 @@ fetch(repos) drawChart(forkedRepos.length) getPullRequests(forkedRepos) - //getCommitsForPullRequests(forkedRepos) }) @@ -59,15 +58,19 @@ const getPullRequests = (repos) => { }) } -//^^^^^^^^^^^^^^^ fetching commits from the pull requests ^^^^^^^^^^^^^^^^^// -//Funktionen skall ta infon från det sorterade pullrequestet(hedvigsPulls) och sortera fram mitt commit_url från det. +//^^^^^^^^^^^^^^^ Fetching commits from the pull requests ^^^^^^^^^^^^^^^^^// + const getCommitsForPullRequests = (pullRequests, repo) => { pullRequests.forEach(pullRequest => { fetch(pullRequest.commits_url) .then(res => res.json()) .then(fetchedCommits => { - + //This function takes the sorted pull request (hedvigsPulls) and sorts out my commit_url from that. + + + + document.getElementById(`commits-${repo.name}`).innerHTML = `Number of commits: ${fetchedCommits.length}`; //Funktionen skall gå ner en nivå till och bara visa commits_URL diff --git a/code/style.css b/code/style.css index d67693b3..4957ce34 100644 --- a/code/style.css +++ b/code/style.css @@ -1,18 +1,4 @@ - - -body { - background: #ECE0D0; - width: 100%; - margin: 0px; -} - -header { - background-color: #A1A88F; -} - -h1, h2 { - font-family: 'Stardos Stencil', cursive; -} +/* TEXT STYLING */ h1 { margin: 0px; @@ -21,6 +7,10 @@ h1 { font-size: 4em; } +h1, h2 { + font-family: 'Stardos Stencil', cursive; +} + h3 { padding: 0px; margin: 0; @@ -57,23 +47,41 @@ a:hover { text-align: center; } +footer h1 { + padding: 0px; + margin: 0px; +} -img { - border-radius: 50%; - width: 200px; - grid-column: span 1; + +/* CONTAINERS */ +body { + background: #ECE0D0; + width: 100%; + margin: 0px; } +header { + background-color: #A1A88F; +} + +/* PROFILE */ .profile-container { display: grid; Grid-template-columns: 1fr 1fr; margin: 100px; } +img { + border-radius: 50%; + width: 200px; + grid-column: span 1; +} + profile-name { grid-column: span 1; } +/* PROJECTS */ .projects { display: grid; Grid-template-columns: 1fr; @@ -89,31 +97,28 @@ profile-name { padding: 5px; } +.canvas { + margin: 50px 100px; +} + footer{ background-color:#A1A88F; margin-top: 30px; padding: 10px; } -footer h1 { - padding: 0px; - margin: 0px; -} -.canvas { - margin: 50px 100px; -} + /* Mobile */ @media (min-width: 0px) and (max-width: 767px) { -.not-break { - display: none; -} - + .not-break { + display: none; + } } /* Tablet */ @@ -153,25 +158,3 @@ footer h1 { Grid-template-columns: 1fr 1fr 1fr; } } - -/* big laptop */ -@media (min-width: 1200px) { - - - - .break { - display: none; - } - - img { - width: 300px; - } - - h2 { - font-size: 5em; - } - - .projects { - Grid-template-columns: 1fr 1fr 1fr; - } -} \ No newline at end of file From 271b1ae3083dc2d996135a163deca43e3d5446a8 Mon Sep 17 00:00:00 2001 From: HedvigM Date: Fri, 1 Oct 2021 12:47:19 +0200 Subject: [PATCH 10/13] Some css clean up --- code/script.js | 3 +-- code/style.css | 39 ++++++++++++++++++++------------------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/code/script.js b/code/script.js index 0a24bcc0..d680271f 100644 --- a/code/script.js +++ b/code/script.js @@ -19,8 +19,7 @@ fetch(repos) //Username and userpic profileContainer.innerHTML+= ` profile picture -

${data[0].owner.login}

- +

${data[0].owner.login}

 ` // Repos and fetched pulls from the functions down under. diff --git a/code/style.css b/code/style.css index 4957ce34..7fe0e825 100644 --- a/code/style.css +++ b/code/style.css @@ -11,6 +11,12 @@ h1, h2 { font-family: 'Stardos Stencil', cursive; } +h2 { + font-size: 2em; + text-align: center; + margin: 0px; +} + h3 { padding: 0px; margin: 0; @@ -37,16 +43,6 @@ a:hover { text-decoration-color: #7785A1; } -.profile-container h2 { - font-size: 4em; -} - -.project-container h2 { - font-size: 3em; - margin: 0px 0px; - text-align: center; -} - footer h1 { padding: 0px; margin: 0px; @@ -79,6 +75,8 @@ img { profile-name { grid-column: span 1; + justify-self: center; + align-self: center; } /* PROJECTS */ @@ -108,12 +106,6 @@ footer{ } - - - - - - /* Mobile */ @media (min-width: 0px) and (max-width: 767px) { .not-break { @@ -132,12 +124,16 @@ footer{ } h2 { - font-size: 5em; + } .projects { Grid-template-columns: 1fr 1fr; } + + .canvas { + margin: 50px 200px; + } } /* small laptop */ @@ -146,12 +142,17 @@ footer{ display: none; } + .profile-container { + margin-right: 200px; + margin-left: 200px; + } + img { width: 300px; } - h2 { - font-size: 5em; + .canvas { + margin: 50px 200px; } .projects { From 2f12afff175116e79cbf29474168fdcac58ca09d Mon Sep 17 00:00:00 2001 From: HedvigM Date: Fri, 1 Oct 2021 13:21:43 +0200 Subject: [PATCH 11/13] Capitalized letters to the project-names. --- code/script.js | 26 ++++++++++---------------- code/style.css | 2 ++ 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/code/script.js b/code/script.js index d680271f..eef174f3 100644 --- a/code/script.js +++ b/code/script.js @@ -14,8 +14,8 @@ fetch(repos) console.log(data) //Fetching only the forked repos and the ones starts with "project" from my GitHub account. const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) - // change back to only "project" later - + + //Username and userpic profileContainer.innerHTML+= ` profile picture @@ -25,14 +25,19 @@ fetch(repos) // Repos and fetched pulls from the functions down under. forkedRepos.forEach((repo) => projects.innerHTML += `
+ +

${repo.name.substring(8).replace("-"," ")}

 + +

The default branch is: ${repo.default_branch}

-

The latest push: ${new Date(repo.pushed_at).toLocaleDateString()}

+

The latest push: ${new Date(repo.pushed_at).toLocaleDateString().capitalizeFirstLetter}

No pull request is yet made 🤷

There are no commits yet...

`) - + + drawChart(forkedRepos.length) getPullRequests(forkedRepos) }) @@ -75,15 +80,4 @@ const getCommitsForPullRequests = (pullRequests, repo) => { }) }) -} - - - - - - - - - - - +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7fe0e825..0a4516d9 100644 --- a/code/style.css +++ b/code/style.css @@ -33,6 +33,8 @@ a { text-align: center; text-decoration: none; line-height: 2.5em; + text-transform:capitalize; + } a:hover { From e0265899b70cc7755e6e78254299af7dba1bafe5 Mon Sep 17 00:00:00 2001 From: HedvigM Date: Fri, 1 Oct 2021 15:56:15 +0200 Subject: [PATCH 12/13] CSS reparation --- code/index.html | 3 +- code/script.js | 2 +- code/style.css | 98 +++++++++++++++++++++++++++++++++++-------------- 3 files changed, 73 insertions(+), 30 deletions(-) diff --git a/code/index.html b/code/index.html index 9cdd718e..b5dc3d45 100644 --- a/code/index.html +++ b/code/index.html @@ -21,7 +21,7 @@

GitHub
Tracker

GitHub Tracker

- +
@@ -30,6 +30,7 @@

Forked Technigo Projects:

+

Hedvig Mejstedt 🦁

diff --git a/code/script.js b/code/script.js index eef174f3..a0017f19 100644 --- a/code/script.js +++ b/code/script.js @@ -31,7 +31,7 @@ fetch(repos)

The default branch is: ${repo.default_branch}

-

The latest push: ${new Date(repo.pushed_at).toLocaleDateString().capitalizeFirstLetter}

+

The latest push: ${new Date(repo.pushed_at).toLocaleDateString()}

No pull request is yet made 🤷

There are no commits yet...

diff --git a/code/style.css b/code/style.css index 0a4516d9..c90c2d1c 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,4 @@ /* TEXT STYLING */ - h1 { margin: 0px; padding: 10px 50px; @@ -12,11 +11,17 @@ h1, h2 { } h2 { - font-size: 2em; + font-size: 1.5em; text-align: center; margin: 0px; } +.project-container h2 { + font-size: 2em; + text-align: center; + text-decoration: none; +} + h3 { padding: 0px; margin: 0; @@ -27,14 +32,13 @@ p { margin: 0; } -a { + a { color: black; font-size: 2em; text-align: center; text-decoration: none; line-height: 2.5em; text-transform:capitalize; - } a:hover { @@ -56,27 +60,32 @@ body { background: #ECE0D0; width: 100%; margin: 0px; + } header { background-color: #A1A88F; } +.content { + margin: 30px; +} + /* PROFILE */ .profile-container { display: grid; - Grid-template-columns: 1fr 1fr; - margin: 100px; -} + Grid-template-rows: 1fr 1fr; +} img { border-radius: 50%; width: 200px; - grid-column: span 1; + grid-rows: span 3; + justify-self: center; } profile-name { - grid-column: span 1; + grid-rows: span 1; justify-self: center; align-self: center; } @@ -86,7 +95,7 @@ profile-name { display: grid; Grid-template-columns: 1fr; grid-gap: 20px; - margin: 20px 50px; + } .repos { @@ -98,7 +107,7 @@ profile-name { } .canvas { - margin: 50px 100px; + margin-top: 30px; } footer{ @@ -121,20 +130,29 @@ footer{ display: none; } - img { - width: 300px; + .profile-container { + display: grid; + Grid-template-columns: 1fr 1fr; + grid-template-rows: none; + margin-top: 50px; + margin-bottom: 50px; } - h2 { - + img { + border-radius: 50%; + grid-column: span 1; } + profile-name { + grid-column: span 1; + } + .projects { - Grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } - .canvas { - margin: 50px 200px; + a { + line-height: 1.5em; } } @@ -143,21 +161,45 @@ footer{ .break { display: none; } - - .profile-container { - margin-right: 200px; - margin-left: 200px; + + h2 { + font-size: 3em; + text-align: center; + margin: 0px; } - img { - width: 300px; + .project-container h2 { + font-size: 3em; + text-align: center; + text-decoration: none; } - .canvas { - margin: 50px 200px; + header { + padding:50px; + } + .content { + margin: 100px; + } + + .profile-container { + Grid-template-columns: 1fr 1fr; + Grid-template-rows: none; + margin-bottom: 50px; + } + img { + width: 300px; + grid-column: span 1; } + profile-name { + grid-column: span 1; + } + .projects { - Grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } -} + + .canvas { + margin: 100px 0px; + } +} \ No newline at end of file From 548c0a45a87f6dff9e557eae91e5a24aaf8eca4c Mon Sep 17 00:00:00 2001 From: HedvigM Date: Fri, 1 Oct 2021 16:04:29 +0200 Subject: [PATCH 13/13] Update README.md --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..646e565c 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 task was to fetch repos from GitHub and use the information on the website. ## The problem +I had a methodological approach to the problem and solved one task at the time. I thing the fetching and the javaScript part of the task went really well, but i have struggled a bit with the CSS part. I did'nt have the same methodological approach to the CSS, i guess i miss calculated how difficult it was. So i had to redo some things in the very end. -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I'm still not so pleased with the CSS turnout. If i had more time i would make the username and profile picture appear nicer, in line. ## 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://elegant-curran-a4a3c9.netlify.app