From 7eae73f36e91b2e76a100ecd02e461f679333eab Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Tue, 22 Feb 2022 22:13:15 +0100 Subject: [PATCH 01/16] first commit. added fetch of api to get my repos --- code/index.html | 7 +++++-- code/script.js | 9 +++++++++ code/style.css | 14 ++++++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b8d65a40 100644 --- a/code/index.html +++ b/code/index.html @@ -4,11 +4,14 @@ - Project GitHub Tracker + Camillas GitHub Tracker + + + -

GitHub Tracker

+

Camillas GitHub Tracker

Projects:

diff --git a/code/script.js b/code/script.js index e69de29b..8adba761 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,9 @@ +const username = 'CamillaHallberg' +const API_REPOS_URL = `https://api.github.com/users/${username}/repos` + +fetch(API_REPOS_URL) +.then(res => res.json()) +.then(data => { + console.log(data, 'my repos'); +}) + diff --git a/code/style.css b/code/style.css index 7c8ad447..6a57e8dd 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,17 @@ body { background: #FFECE9; +} + +h1 { + font-family: 'Shizuru', cursive; + font-size: 96px; + color:palevioletred; + text-align: center; +} + +h2 { + font-family: 'Shizuru', cursive; + font-size: 36px; + color:mediumpurple; + text-align: center; } \ No newline at end of file From 25f2c5424a7c243c09724cc48ef2299e4d59f3fc Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Wed, 23 Feb 2022 22:43:39 +0100 Subject: [PATCH 02/16] step 2 and 3 done - filter out the forked repos / projects from Technigo --- code/script.js | 14 +++++++++++--- code/style.css | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 8adba761..e776c7ee 100644 --- a/code/script.js +++ b/code/script.js @@ -1,9 +1,17 @@ const username = 'CamillaHallberg' -const API_REPOS_URL = `https://api.github.com/users/${username}/repos` +let reponame = '' -fetch(API_REPOS_URL) +const API_URL = `https://api.github.com/users/${username}/repos` +const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` + + +fetch(API_URL) .then(res => res.json()) .then(data => { console.log(data, 'my repos'); -}) + // below I'm filtering out the forked repos from Technigo. + const technigoRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork); + console.log(technigoRepos, 'technigo repos') +}) diff --git a/code/style.css b/code/style.css index 6a57e8dd..b72f166f 100644 --- a/code/style.css +++ b/code/style.css @@ -4,7 +4,7 @@ body { h1 { font-family: 'Shizuru', cursive; - font-size: 96px; + font-size: 72px; color:palevioletred; text-align: center; } From 24b11827a1d53d7a9de9d99b425ef13645b4898e Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Thu, 24 Feb 2022 14:32:15 +0100 Subject: [PATCH 03/16] testing to add .gitignore --- .DS_Store | Bin 0 -> 6148 bytes .gitignore | 1 + code/index.html | 5 +++-- code/script.js | 32 ++++++++++++++++++++++++++++++-- 4 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 .DS_Store create mode 100644 .gitignore diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..661f8d2e4b2c7ad162c4690fce4e9456a6e81136 GIT binary patch literal 6148 zcmeHKO-~y!5FLj=c7-bC020TQxJGGEB68regmCDgmu%G@+A3t(sH|AlC?DhyMcOm{ zFp8?*xGM$sAgoaP{?-+gc2P0-7OTTzFzIOY3A75wbc+zP6QKgOY z=2pe4c-!93=t9q;$zU=acLt;H-1?$*7C+Vp@z-=X>sNP9bUqoR`EXN^Mz+KAJ-=Vwo6lRVRxN0@4;Hmx-flN)L92PVSoq%V{>P(U|1!JE^{u5| z;lDKU!QmtPMrFC4n`o40I{yV5`}@?RQ#z(DeFoO)ijpVH+`;Q#X3!K72801&V2v1X zXQQ{hM&B%-Dhvn%Z^Hne4*`@hbXZt4M+XX%0s#3LX#{oi^aloP0EP|=i?BeH4F%dz z -

Camillas GitHub Tracker

+

GitHub Tracker

Projects:

- + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e776c7ee..35b826c1 100644 --- a/code/script.js +++ b/code/script.js @@ -4,8 +4,17 @@ let reponame = '' const API_URL = `https://api.github.com/users/${username}/repos` const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` +const API_TOKEN = TOKEN; +console.log(TOKEN) -fetch(API_URL) +const options = { + method: 'GET', + headers: { + Authorization: `${API_TOKEN}` + } +} + +fetch(API_URL, options) .then(res => res.json()) .then(data => { console.log(data, 'my repos'); @@ -13,5 +22,24 @@ fetch(API_URL) const technigoRepos = data.filter( (repo) => repo.name.includes('project-') && repo.fork); console.log(technigoRepos, 'technigo repos') - }) + + //Remember to pass along your filtered repos as an argument when +//you are calling this function + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls') + .then(res => res.json()) + .then(data => { + //TODO + //1. Find only the PR that you made by comparing pull.user.login + // with repo.owner.login + //2. Now you're able to get the commits for each repo by using + // the commits_url as an argument to call another function + //3. You can also get the comments for each PR by calling + // another function with the review_comments_url as argument + }) + }) + } From cdcbc9440db5d633ce0735ba3f094560e714d4a8 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Thu, 24 Feb 2022 15:20:14 +0100 Subject: [PATCH 04/16] fetched pullrequests data, yay --- code/script.js | 51 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/code/script.js b/code/script.js index 35b826c1..c6071709 100644 --- a/code/script.js +++ b/code/script.js @@ -5,7 +5,7 @@ const API_URL = `https://api.github.com/users/${username}/repos` const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` const API_TOKEN = TOKEN; -console.log(TOKEN) +// console.log(TOKEN) const options = { method: 'GET', @@ -22,24 +22,35 @@ fetch(API_URL, options) const technigoRepos = data.filter( (repo) => repo.name.includes('project-') && repo.fork); console.log(technigoRepos, 'technigo repos') + + const getPullRequests = (repos) => { + repos.forEach(repo => { + fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=150', options) + .then(res => res.json()) + .then(data2 => { + console.log(data2, 'every pull for each project') + }) + }) + } + getPullRequests(technigoRepos); }) - //Remember to pass along your filtered repos as an argument when -//you are calling this function - -const getPullRequests = (repos) => { - //Get all the PRs for each project. - repos.forEach(repo => { - fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls') - .then(res => res.json()) - .then(data => { - //TODO - //1. Find only the PR that you made by comparing pull.user.login - // with repo.owner.login - //2. Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function - //3. You can also get the comments for each PR by calling - // another function with the review_comments_url as argument - }) - }) - } + + + +// const getPullRequests = (repos) => { +// //Get all the PRs for each project. +// repos.forEach(repo => { +// fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls') +// .then(res => res.json()) +// .then(data => { +// //TODO +// //1. Find only the PR that you made by comparing pull.user.login +// // with repo.owner.login +// //2. Now you're able to get the commits for each repo by using +// // the commits_url as an argument to call another function +// //3. You can also get the comments for each PR by calling +// // another function with the review_comments_url as argument +// // }) +// }) +// } From 6632ae438ea3ac9a9ee8601b28029708c1525cae Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Thu, 24 Feb 2022 21:50:01 +0100 Subject: [PATCH 05/16] changes to fetch function pullrequests --- code/script.js | 72 +++++++++++++++++++++++--------------------------- 1 file changed, 33 insertions(+), 39 deletions(-) diff --git a/code/script.js b/code/script.js index c6071709..8dd29ed8 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,10 @@ const username = 'CamillaHallberg' let reponame = '' -const API_URL = `https://api.github.com/users/${username}/repos` + +// API's +const API_USER = `https://api.github.com/users/${username}` +const API_URL_REPO = `https://api.github.com/users/${username}/repos` const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` const API_TOKEN = TOKEN; @@ -14,43 +17,34 @@ const options = { } } -fetch(API_URL, options) +fetch(API_USER, options) .then(res => res.json()) -.then(data => { - console.log(data, 'my repos'); - // below I'm filtering out the forked repos from Technigo. - const technigoRepos = data.filter( - (repo) => repo.name.includes('project-') && repo.fork); - console.log(technigoRepos, 'technigo repos') - - const getPullRequests = (repos) => { - repos.forEach(repo => { - fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=150', options) - .then(res => res.json()) - .then(data2 => { - console.log(data2, 'every pull for each project') - }) +.then(userdata => { + console.log(userdata, 'my user'); +}) + +const getRepos = () => { + fetch(API_URL_REPO, options) + .then(res => res.json()) + .then(data => { + console.log(data, 'my repos') + + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) + console.log(forkedRepos, 'forked repos') + getPullRequests(forkedRepos) + }) +} + +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options) + .then(res => res.json()) + .then(data => { + // console.log(data, 'all pull requests on the projects') + + const pulls = data.find((pull) => pull.user.login === repo.owner.login) + console.log(pulls, 'my pull requests') }) - } - getPullRequests(technigoRepos); -}) - - - - -// const getPullRequests = (repos) => { -// //Get all the PRs for each project. -// repos.forEach(repo => { -// fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls') -// .then(res => res.json()) -// .then(data => { -// //TODO -// //1. Find only the PR that you made by comparing pull.user.login -// // with repo.owner.login -// //2. Now you're able to get the commits for each repo by using -// // the commits_url as an argument to call another function -// //3. You can also get the comments for each PR by calling -// // another function with the review_comments_url as argument -// // }) -// }) -// } + }) +} +getRepos() \ No newline at end of file From b503989f5eed9f9d9732ac907c1b8bb8a36aa3f8 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Fri, 25 Feb 2022 13:27:58 +0100 Subject: [PATCH 06/16] added different user info in script, worked on styling (mobile first), added a footer in index --- code/index.html | 24 +++++++++++++++++++++--- code/script.js | 19 +++++++++++++++---- code/style.css | 34 +++++++++++++++++++++++++++++++--- 3 files changed, 67 insertions(+), 10 deletions(-) diff --git a/code/index.html b/code/index.html index cae0f531..19074a2d 100644 --- a/code/index.html +++ b/code/index.html @@ -8,16 +8,34 @@ - + +

GitHub Tracker

-

Projects:

-
+
+ +
+ +
+

Projects

+
+ + + + + + +
+
+

Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 🤖

+
+
+ diff --git a/code/script.js b/code/script.js index 8dd29ed8..04dd5241 100644 --- a/code/script.js +++ b/code/script.js @@ -1,12 +1,13 @@ +// const userData = document.getElementsById('userData') const username = 'CamillaHallberg' let reponame = '' - // API's const API_USER = `https://api.github.com/users/${username}` const API_URL_REPO = `https://api.github.com/users/${username}/repos` const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` +// my token const API_TOKEN = TOKEN; // console.log(TOKEN) @@ -17,11 +18,21 @@ const options = { } } +const getUser = () => { fetch(API_USER, options) .then(res => res.json()) -.then(userdata => { - console.log(userdata, 'my user'); -}) +.then(user => { + console.log(user, 'my user'); + userData.innerHTML = ` +
+ user image +

${user.login}

+

${user.bio}

+

Location: ${user.location}

+
` + }) +} +getUser() const getRepos = () => { fetch(API_URL_REPO, options) diff --git a/code/style.css b/code/style.css index b72f166f..6eb6abda 100644 --- a/code/style.css +++ b/code/style.css @@ -1,17 +1,45 @@ body { - background: #FFECE9; + background: linear-gradient(floralwhite, rosybrown); } h1 { font-family: 'Shizuru', cursive; - font-size: 72px; + font-size: 48px; color:palevioletred; text-align: center; } h2 { font-family: 'Shizuru', cursive; - font-size: 36px; + font-size: 32px; color:mediumpurple; text-align: center; +} + +.img { + width: 96px; + border-radius: 50%; + border: 8px solid floralwhite; +} + +h3 { + font-family: 'Shippori Antique B1', sans-serif; + font-size: 18px; + color: #886F6F; + text-align: center; +} + +h4 { + font-family: 'Shippori Antique B1', sans-serif; + font-size: 14px; + color: whitesmoke; + text-align: center; +} + +/* Footer styling */ +.made-by { + font-family: 'Shippori Antique B1', sans-serif; + font-size: 12px; + color:lavenderblush; + text-align: center; } \ No newline at end of file From beea0440d9e9693a8e6a302e3fcf8b15ffaeccc6 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Fri, 25 Feb 2022 20:24:46 +0100 Subject: [PATCH 07/16] list of repos, most recent push, default branch, url to repo added --- code/index.html | 18 ++++++------------ code/script.js | 41 +++++++++++++++++++++++++++++++++-------- code/style.css | 23 ++++++++++++++--------- 3 files changed, 53 insertions(+), 29 deletions(-) diff --git a/code/index.html b/code/index.html index 19074a2d..8548177e 100644 --- a/code/index.html +++ b/code/index.html @@ -4,12 +4,14 @@ - Camillas GitHub Tracker + + GitHub Tracker by Camilla +

GitHub Tracker

@@ -18,22 +20,14 @@

GitHub Tracker

-

Projects

+

👇🏽 Projects 👇🏽

- - - - - - + - -
-
+

Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 🤖

-
diff --git a/code/script.js b/code/script.js index 04dd5241..04aab59c 100644 --- a/code/script.js +++ b/code/script.js @@ -2,14 +2,15 @@ const username = 'CamillaHallberg' let reponame = '' +const API_TOKEN = TOKEN || process.env.API_KEY; +// console.log(TOKEN) + // API's const API_USER = `https://api.github.com/users/${username}` const API_URL_REPO = `https://api.github.com/users/${username}/repos` -const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` -// my token -const API_TOKEN = TOKEN; -// console.log(TOKEN) +const projectsContainer = document.getElementById('projects') + const options = { method: 'GET', @@ -40,8 +41,21 @@ const getRepos = () => { .then(data => { console.log(data, 'my repos') + // Filtering to get only my forked repos const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) console.log(forkedRepos, 'forked repos') + + forkedRepos.forEach((repo) => { + projectsContainer.innerHTML += ` +
+

${repo.name} - ${repo.default_branch}

+

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

+

Number of commits:

+

Main language: ${repo.language}

+
+ ` + }) + getPullRequests(forkedRepos) }) } @@ -51,11 +65,22 @@ const getPullRequests = (forkedRepos) => { fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options) .then(res => res.json()) .then(data => { - // console.log(data, 'all pull requests on the projects') - + const commits = document.getElementById(`commit-${repo.name}`) + const pulls = data.find((pull) => pull.user.login === repo.owner.login) - console.log(pulls, 'my pull requests') + + getCommits(pulls.commits_url, repo.name) + console.log(pulls.commits_url) }) }) } -getRepos() \ No newline at end of file + +const getCommits = (myCommitsURL, myReposName) => { + fetch(myCommitsURL, options) + .then(res => res.json()) + .then(data => { + document.getElementById(`commit-${myReposName}`).innerHTML += data.length + }) +} + +getRepos() diff --git a/code/style.css b/code/style.css index 6eb6abda..635c5bdd 100644 --- a/code/style.css +++ b/code/style.css @@ -4,9 +4,10 @@ body { h1 { font-family: 'Shizuru', cursive; - font-size: 48px; + font-size: 72px; color:palevioletred; text-align: center; + cursor: pointer; } h2 { @@ -16,27 +17,31 @@ h2 { text-align: center; } -.img { - width: 96px; - border-radius: 50%; - border: 8px solid floralwhite; -} - h3 { font-family: 'Shippori Antique B1', sans-serif; font-size: 18px; color: #886F6F; - text-align: center; } h4 { font-family: 'Shippori Antique B1', sans-serif; font-size: 14px; color: whitesmoke; +} + +.info { + display: flex; + flex-direction: column; text-align: center; } -/* Footer styling */ +.img { + width: 96px; + border-radius: 50%; + border: 8px solid floralwhite; +} + +/* Footer Styling */ .made-by { font-family: 'Shippori Antique B1', sans-serif; font-size: 12px; From 4b1bcf997af9c3dad9d9dc5017d536eef855ec0f Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sat, 26 Feb 2022 11:53:49 +0100 Subject: [PATCH 08/16] small changes to all files --- code/index.html | 4 ++-- code/script.js | 28 ++++++++++++++++------------ code/style.css | 33 +++++++++++++++++++++++++-------- 3 files changed, 43 insertions(+), 22 deletions(-) diff --git a/code/index.html b/code/index.html index 8548177e..1c85d874 100644 --- a/code/index.html +++ b/code/index.html @@ -20,9 +20,9 @@

GitHub Tracker

-

👇🏽 Projects 👇🏽

+

👇🏽 Technigo Projects 👇🏽

- + diff --git a/code/script.js b/code/script.js index 04aab59c..909a58ff 100644 --- a/code/script.js +++ b/code/script.js @@ -25,8 +25,10 @@ fetch(API_USER, options) .then(user => { console.log(user, 'my user'); userData.innerHTML = ` -
+
user image +
+

${user.login}

${user.bio}

Location: ${user.location}

@@ -48,18 +50,20 @@ const getRepos = () => { forkedRepos.forEach((repo) => { projectsContainer.innerHTML += `
-

${repo.name} - ${repo.default_branch}

+

${repo.name}

+

Branch: ${repo.default_branch}

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

Number of commits:

Main language: ${repo.language}

` }) - getPullRequests(forkedRepos) }) } +getRepos() + const getPullRequests = (forkedRepos) => { forkedRepos.forEach(repo => { fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options) @@ -67,7 +71,7 @@ const getPullRequests = (forkedRepos) => { .then(data => { const commits = document.getElementById(`commit-${repo.name}`) - const pulls = data.find((pull) => pull.user.login === repo.owner.login) + const pulls = data.find((pull) => pull.user.login === repo.owner.login); getCommits(pulls.commits_url, repo.name) console.log(pulls.commits_url) @@ -75,12 +79,12 @@ const getPullRequests = (forkedRepos) => { }) } -const getCommits = (myCommitsURL, myReposName) => { - fetch(myCommitsURL, options) - .then(res => res.json()) - .then(data => { - document.getElementById(`commit-${myReposName}`).innerHTML += data.length +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => { + return res.json() }) -} - -getRepos() + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 635c5bdd..98150b4b 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,5 @@ body { - background: linear-gradient(floralwhite, rosybrown); + background: linear-gradient(rosybrown, floralwhite); } h1 { @@ -15,6 +15,7 @@ h2 { font-size: 32px; color:mediumpurple; text-align: center; + cursor: pointer; } h3 { @@ -29,22 +30,38 @@ h4 { color: whitesmoke; } -.info { - display: flex; - flex-direction: column; - text-align: center; -} - .img { width: 96px; border-radius: 50%; border: 8px solid floralwhite; } +.info { + text-align: center; +} + +.projects-card { + background: linen; + border: 6px solid hotpink; + margin: 12px; + padding: 12px; + font-size: 12px; + font-family: 'Shippori Antique B1', sans-serif; + text-align: center; +} + +.default-branch { + font-family: 'Shizuru', cursive; +} + +a { + color: black; +} + /* Footer Styling */ .made-by { font-family: 'Shippori Antique B1', sans-serif; font-size: 12px; - color:lavenderblush; + color: #694E4E; text-align: center; } \ No newline at end of file From d1300f0ecb860565212e533039a18a5406300a03 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sat, 26 Feb 2022 14:26:58 +0100 Subject: [PATCH 09/16] created a pie chart to display project progression --- code/chart.js | 29 +++++++++++++++++++++++++++++ code/index.html | 16 ++++++++++++---- code/script.js | 8 ++++---- code/style.css | 17 ++++++++++++----- 4 files changed, 57 insertions(+), 13 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..97198fbc 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,32 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (forkedRepos) => { + + const labels = [ + 'Completed Projects', + 'Remaining Projects', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My first dataset', + backgroundColor: ['#655D8A', '#D885A3'], + borderColor: '#FDCEB9', + borderWidth: 6, + data: [forkedRepos, 19-forkedRepos], + }] + }; + + const config = { + type: 'pie', + data: data, + options: {} + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 1c85d874..40eb8162 100644 --- a/code/index.html +++ b/code/index.html @@ -4,17 +4,23 @@ + + + + - + + + GitHub Tracker by Camilla
-

GitHub Tracker

+

GitHub Tracker

@@ -24,14 +30,16 @@

👇🏽 Technigo Projects 👇🏽

- +
+ +

Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 🤖

- + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 909a58ff..4bf505c4 100644 --- a/code/script.js +++ b/code/script.js @@ -3,7 +3,6 @@ const username = 'CamillaHallberg' let reponame = '' const API_TOKEN = TOKEN || process.env.API_KEY; -// console.log(TOKEN) // API's const API_USER = `https://api.github.com/users/${username}` @@ -53,11 +52,11 @@ const getRepos = () => {

${repo.name}

Branch: ${repo.default_branch}

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

-

Number of commits:

-

Main language: ${repo.language}

+

Number of commits:

` }) + drawChart(forkedRepos.length) getPullRequests(forkedRepos) }) } @@ -74,7 +73,7 @@ const getPullRequests = (forkedRepos) => { const pulls = data.find((pull) => pull.user.login === repo.owner.login); getCommits(pulls.commits_url, repo.name) - console.log(pulls.commits_url) + console.log(pulls.commits_url, 'pulls commits_url') }) }) } @@ -87,4 +86,5 @@ const getCommits = (myCommitsUrl, myRepoName) => { .then((data) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length }) + console.log(myRepoName) } \ No newline at end of file diff --git a/code/style.css b/code/style.css index 98150b4b..591e875a 100644 --- a/code/style.css +++ b/code/style.css @@ -5,15 +5,15 @@ body { h1 { font-family: 'Shizuru', cursive; font-size: 72px; - color:palevioletred; + color: palevioletred; text-align: center; cursor: pointer; } h2 { font-family: 'Shizuru', cursive; - font-size: 32px; - color:mediumpurple; + font-size: 28px; + color: #655D8A; text-align: center; cursor: pointer; } @@ -30,9 +30,13 @@ h4 { color: whitesmoke; } +.avatar { + text-align: center; +} + .img { width: 96px; - border-radius: 50%; + border-radius: 4px; border: 8px solid floralwhite; } @@ -42,7 +46,8 @@ h4 { .projects-card { background: linen; - border: 6px solid hotpink; + border: 6px solid #7897AB; + border-radius: 4px; margin: 12px; padding: 12px; font-size: 12px; @@ -52,6 +57,8 @@ h4 { .default-branch { font-family: 'Shizuru', cursive; + font-size: 14px; + color: #D885A3; } a { From 1c58b7b07c4e582a70be7fbf5eaccfe6128849b5 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sat, 26 Feb 2022 22:33:31 +0100 Subject: [PATCH 10/16] worked on styling to make page responsive --- code/index.html | 4 ++-- code/script.js | 41 ++++++++++++++++++------------------ code/style.css | 55 +++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 73 insertions(+), 27 deletions(-) diff --git a/code/index.html b/code/index.html index 40eb8162..d9f8e1d0 100644 --- a/code/index.html +++ b/code/index.html @@ -7,7 +7,7 @@ - + @@ -25,7 +25,7 @@

GitHub Tracker

-
+

👇🏽 Technigo Projects 👇🏽

diff --git a/code/script.js b/code/script.js index 4bf505c4..7b651d40 100644 --- a/code/script.js +++ b/code/script.js @@ -10,7 +10,6 @@ const API_URL_REPO = `https://api.github.com/users/${username}/repos` const projectsContainer = document.getElementById('projects') - const options = { method: 'GET', headers: { @@ -42,49 +41,49 @@ const getRepos = () => { .then(data => { console.log(data, 'my repos') - // Filtering to get only my forked repos + // Filtering to get only my forked repos from Technigo const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) console.log(forkedRepos, 'forked repos') forkedRepos.forEach((repo) => { + // Creating unique ID for each forked repo + let projectID = repo.id + console.log(repo) projectsContainer.innerHTML += ` -
+

${repo.name}

Branch: ${repo.default_branch}

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

-

Number of commits:

` + getCommits(repo, projectID) }) - drawChart(forkedRepos.length) getPullRequests(forkedRepos) + drawChart(forkedRepos.length) }) } -getRepos() - const getPullRequests = (forkedRepos) => { forkedRepos.forEach(repo => { fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options) .then(res => res.json()) .then(data => { - const commits = document.getElementById(`commit-${repo.name}`) - const pulls = data.find((pull) => pull.user.login === repo.owner.login); - - getCommits(pulls.commits_url, repo.name) - console.log(pulls.commits_url, 'pulls commits_url') }) }) } -const getCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl, options) - .then((res) => { - return res.json() - }) - .then((data) => { - document.getElementById(`commit-${myRepoName}`).innerHTML += data.length +const getCommits = (projectsContainer, projectID) => { + const GIT_COMMIT_API = projectsContainer.commits_url.replace("{/sha}", "") + fetch (GIT_COMMIT_API, options) + .then((res) => res.json()) + .then(data => { + let numberOfCommits = data.length + document.getElementById(projectID).innerHTML +=` +

Number of commits: ${numberOfCommits}

` }) - console.log(myRepoName) -} \ No newline at end of file +} + +getRepos() + +// Kom ihåg att städa i koden + ta bort alla loggar \ No newline at end of file diff --git a/code/style.css b/code/style.css index 591e875a..b6241ce1 100644 --- a/code/style.css +++ b/code/style.css @@ -34,16 +34,16 @@ h4 { text-align: center; } +.info { + text-align: center; +} + .img { width: 96px; border-radius: 4px; border: 8px solid floralwhite; } -.info { - text-align: center; -} - .projects-card { background: linen; border: 6px solid #7897AB; @@ -71,4 +71,51 @@ a { font-size: 12px; color: #694E4E; text-align: center; +} + +/* TABLET VIEW */ +@media (min-width: 667px) and (max-width: 1024px) { + +h1 { + font-size: 96px; +} + +h2 { + font-size: 48px; +} + +h3 { + font-size: 36px; +} + +h4 { + font-size: 18px; +} + +p { + font-size: 18px; +} + +.img { + width: 192px; +} + +.default-branch { + font-size: 24px; +} + +/* .projects-wrapper { */ + /* display: flex; */ + /* flex-direction: column; */ + /* flex-wrap: wrap; */ + /* justify-content: center; */ + /* max-width: 50%; */ + /* align-items: center; */ + /* padding: 18px; */ +/* } */ + +/* .projects-card { */ + +/* } */ + } \ No newline at end of file From d492f2341e3e5a67ef2a68df113ada065b633e0b Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sun, 27 Feb 2022 11:15:04 +0100 Subject: [PATCH 11/16] added grid in stylesheet --- code/index.html | 13 ++++-- code/style.css | 121 ++++++++++++++++++++++++++++++------------------ 2 files changed, 84 insertions(+), 50 deletions(-) diff --git a/code/index.html b/code/index.html index d9f8e1d0..dae5e185 100644 --- a/code/index.html +++ b/code/index.html @@ -20,14 +20,19 @@
-

GitHub Tracker

+
+

GitHub Tracker

+
-
+
-
+ +

👇🏽 Technigo Projects 👇🏽

-
+ + +
diff --git a/code/style.css b/code/style.css index b6241ce1..4f34ca0f 100644 --- a/code/style.css +++ b/code/style.css @@ -4,7 +4,7 @@ body { h1 { font-family: 'Shizuru', cursive; - font-size: 72px; + font-size: 48px; color: palevioletred; text-align: center; cursor: pointer; @@ -41,7 +41,7 @@ h4 { .img { width: 96px; border-radius: 4px; - border: 8px solid floralwhite; + border: 8px solid #FDCEB9; } .projects-card { @@ -65,7 +65,7 @@ a { color: black; } -/* Footer Styling */ +/* --- FOOTER --- */ .made-by { font-family: 'Shippori Antique B1', sans-serif; font-size: 12px; @@ -73,49 +73,78 @@ a { text-align: center; } -/* TABLET VIEW */ +/* --- TABLET VIEW --- */ @media (min-width: 667px) and (max-width: 1024px) { -h1 { - font-size: 96px; -} - -h2 { - font-size: 48px; -} - -h3 { - font-size: 36px; + h1 { + font-size: 96px; + } + + h2 { + font-size: 48px; + } + + h3 { + font-size: 36px; + } + + h4, p { + font-size: 18px; + } + + .img { + width: 200px; + } + + .default-branch { + font-size: 24px; + } + + .projects-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 1rem; + } +} + +/* --- DESKTOP VIEW --- */ +@media (min-width: 1025px) { + .projects-wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 1rem; + } + + .projects-card { + transition: transform .6s; + } + + .projects-card:hover { + background-color:#D885A3; + transform: scale(1.2); + } + + .default-branch { + color: lightpink; + } + + .user-data { + display: flex; + justify-content: space-around; + padding: 48px; + } + + .img { + width: 150px; + } + + h1 { + font-size: 96px; + } + + h2 { + font-size: 48px; + } } - -h4 { - font-size: 18px; -} - -p { - font-size: 18px; -} - -.img { - width: 192px; -} - -.default-branch { - font-size: 24px; -} - -/* .projects-wrapper { */ - /* display: flex; */ - /* flex-direction: column; */ - /* flex-wrap: wrap; */ - /* justify-content: center; */ - /* max-width: 50%; */ - /* align-items: center; */ - /* padding: 18px; */ -/* } */ - -/* .projects-card { */ - -/* } */ - -} \ No newline at end of file From 0f8b8ed92c19af6f8a02ee88f8aaa1210f0e25a5 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sun, 27 Feb 2022 12:40:17 +0100 Subject: [PATCH 12/16] final touches, cleaned the code and removed console logs --- code/index.html | 7 +++---- code/script.js | 50 +++++++++++++++++++++++-------------------------- code/style.css | 15 ++++++++++++++- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/code/index.html b/code/index.html index dae5e185..7a8eae49 100644 --- a/code/index.html +++ b/code/index.html @@ -27,17 +27,16 @@

GitHub Tracker

- -
+

👇🏽 Technigo Projects 👇🏽

-
+
-
+

Made by Camilla Hallberg @ Technigo Bootcamp Spring 2022 🤖

diff --git a/code/script.js b/code/script.js index 7b651d40..844eabd1 100644 --- a/code/script.js +++ b/code/script.js @@ -1,61 +1,59 @@ -// const userData = document.getElementsById('userData') +// DOM selectors +const projectsContainer = document.getElementById('projects') + const username = 'CamillaHallberg' let reponame = '' +// Authentication const API_TOKEN = TOKEN || process.env.API_KEY; - -// API's -const API_USER = `https://api.github.com/users/${username}` -const API_URL_REPO = `https://api.github.com/users/${username}/repos` - -const projectsContainer = document.getElementById('projects') - const options = { method: 'GET', headers: { Authorization: `${API_TOKEN}` } } +// API's +const API_USER = `https://api.github.com/users/${username}` +const API_URL_REPO = `https://api.github.com/users/${username}/repos` +// Function to fetch my user data const getUser = () => { -fetch(API_USER, options) -.then(res => res.json()) -.then(user => { - console.log(user, 'my user'); + fetch(API_USER, options) + .then(res => res.json()) + .then(user => { userData.innerHTML = `
- user image + user image
-

${user.login}

-

${user.bio}

-

Location: ${user.location}

+

${user.login}

+

${user.bio}

+

Location: ${user.location}

` }) } getUser() +// Function to fetch my repositories const getRepos = () => { fetch(API_URL_REPO, options) .then(res => res.json()) .then(data => { - console.log(data, 'my repos') - - // Filtering to get only my forked repos from Technigo + // Filter to get only my forked repos from Technigo const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) - console.log(forkedRepos, 'forked repos') - + forkedRepos.forEach((repo) => { // Creating unique ID for each forked repo let projectID = repo.id - console.log(repo) + projectsContainer.innerHTML += `

${repo.name}

Branch: ${repo.default_branch}

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

-
- ` +
` + + // Invoking function to get the number of commits for the projects getCommits(repo, projectID) }) getPullRequests(forkedRepos) @@ -84,6 +82,4 @@ const getCommits = (projectsContainer, projectID) => { }) } -getRepos() - -// Kom ihåg att städa i koden + ta bort alla loggar \ No newline at end of file +getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 4f34ca0f..4f8fe241 100644 --- a/code/style.css +++ b/code/style.css @@ -65,7 +65,11 @@ a { color: black; } -/* --- FOOTER --- */ +.chart-container { + padding: 20px; +} + +/* --- Footer --- */ .made-by { font-family: 'Shippori Antique B1', sans-serif; font-size: 12px; @@ -147,4 +151,13 @@ a { h2 { font-size: 48px; } + + .chart-container { + position: relative; + left: 0; + right: 0; + margin: auto; + width: 600px; + padding: 100px; + } } From d9430737c1a6381d7ba4d13495e65bb4c6fa69d9 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg <91207223+CamillaHallberg@users.noreply.github.com> Date: Sun, 27 Feb 2022 14:04:02 +0100 Subject: [PATCH 13/16] Update README.md --- README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..887dd1da 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This project was about creating a GitHub tracker that displays my repositories, forked from Technigo. The objective for this project has been to continue practising JavaScript and in particular getting deeper into understanding API's (and for this project, using the GitHub documentation). This project contains my user data, repository data and a progress pie chart built with JS. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I started to work on the project after I had done essential readings and video material provided by Technigo. I went through the project brief step by step and I found it very exciting to display the different kinds of data from the API's. But it has been quite challenging to get through this project, mainly in understanding how to write the code in Javascript (for example; when to declare a const, when to envoke a function, injecting HTML data etc) but new parts such as hiding files and getting acquainted with NPM has also been challenging and time consuming. Also learning about how to use tokens and API rate limits has given me some grey hair. + +But! Being finished with this project, that REALLY has had its ups and downs, in retrospect I know that I have learned A LOT. I'm obviously still on the surface when it comes to understanding everything and if I did have more time with this project I think I would dive into nesting fetches, displaying the number of pull requests, trying out other API endpoints, create a different chart and also try out styling charts in different ways. + +This was a really challenging yet fun and rewarding project that I feel that I have learned a lot from! ## 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. +Here's a link to my tracker :) + +https://github-tracker-by-camilla.netlify.app/ From 3e8932cb2a1001d44f4978d90e13e10c7370508c Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sun, 27 Feb 2022 17:01:50 +0100 Subject: [PATCH 14/16] removed an html emoji --- code/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 7a8eae49..eeca2ac7 100644 --- a/code/index.html +++ b/code/index.html @@ -28,7 +28,7 @@

GitHub Tracker

-

👇🏽 Technigo Projects 👇🏽

+

Technigo Projects 👇🏽

From be4a4f5282706954139c531e2ecb6d93e5328f70 Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sun, 4 Sep 2022 11:27:28 +0200 Subject: [PATCH 15/16] font family change on heading tags --- code/index.html | 3 +++ code/style.css | 11 ++++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/code/index.html b/code/index.html index 462ce08d..c6477c84 100644 --- a/code/index.html +++ b/code/index.html @@ -14,6 +14,9 @@ + + + GitHub Tracker by Camilla diff --git a/code/style.css b/code/style.css index 4f8fe241..38899f92 100644 --- a/code/style.css +++ b/code/style.css @@ -3,15 +3,15 @@ body { } h1 { - font-family: 'Shizuru', cursive; + font-family: 'Devonshire', cursive; font-size: 48px; - color: palevioletred; + color: #EAEAEA; text-align: center; cursor: pointer; } h2 { - font-family: 'Shizuru', cursive; + font-family: 'Devonshire', cursive; font-size: 28px; color: #655D8A; text-align: center; @@ -27,7 +27,7 @@ h3 { h4 { font-family: 'Shippori Antique B1', sans-serif; font-size: 14px; - color: whitesmoke; + color: #EAEAEA; } .avatar { @@ -41,7 +41,8 @@ h4 { .img { width: 96px; border-radius: 4px; - border: 8px solid #FDCEB9; + border: 4px solid #886F6F; + box-shadow: 4px 6px 4px #886F6F; } .projects-card { From 88b235da46ba17bf878b4484af749b4d155f085d Mon Sep 17 00:00:00 2001 From: Camilla Hallberg Date: Sun, 4 Sep 2022 11:31:33 +0200 Subject: [PATCH 16/16] larger font size to headings in desktop view --- code/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/style.css b/code/style.css index 38899f92..74fe09a3 100644 --- a/code/style.css +++ b/code/style.css @@ -146,11 +146,11 @@ a { } h1 { - font-size: 96px; + font-size: 128px; } h2 { - font-size: 48px; + font-size: 80px; } .chart-container {