From 43c75150b2e5e2c0d078c71e8ede392174816853 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Tue, 28 Sep 2021 21:28:41 +0200 Subject: [PATCH 01/10] started the project and styling --- code/Notes | 0 code/chart.js | 30 +++++++++++++++++++++++++++++ code/index.html | 22 +++++++++++++++++---- code/script.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 33 ++++++++++++++++++++++++++++++++ 5 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 code/Notes diff --git a/code/Notes b/code/Notes new file mode 100644 index 00000000..e69de29b diff --git a/code/chart.js b/code/chart.js index 92e85a30..e34e9452 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,34 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +console.log('hello from the chart.js') + //"Draw" the chart here 👇 + +const drawChart = (amount) => { +const config = { + type: 'doughnut', + data: { + labels: [ + 'Projects done', + 'Projects left', + //'Blue' + ], + datasets: [{ + label: 'My Projects', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(255, 205, 86)', + //'rgb(54, 162, 235)' + ], + hoverOffset: 4 + }] + }, + }; + + +const repoChart = new Chart(ctx, config); +} + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..a3375d69 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,30 @@ Project GitHub Tracker + + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+
+
+ +

Projects:

+
+ +
+ - +
+ +
+ \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..404cbeb6 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,51 @@ +console.log('hello from scrips.js') + +const USER = `annaester` +const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos` + +const projectContainer = document.getElementById('projects') + +const getRepos = () => { + fetch(MY_REPOS_URL) + .then(resp => resp.json()) + .then(data => { + console.log(data) + //data.forEach(repo => console.log(repo.name)) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + forkedRepos.forEach(repo => projectContainer.innerHTML += `

${repo.name}

`) + + getPullRequests(forkedRepos) + + drawChart(forkedRepos.length) + }) + +} + +getRepos() + + + +//Remember to pass along your filtered repos as an argument when +//you are calling this function + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`) + .then(res => res.json()) + .then(data => { + console.log('hello pullrequests', data) + const myPullRequests = data.filter(pull => pull.user.login === repo.owner.login) + console.log(myPullRequests) + //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 + }) + }) + } + + getPullRequests() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..c546db79 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,36 @@ body { background: #FFECE9; + font-family: 'Baloo Chettan 2', cursive; +} + +.topbar { + background-color: white; + width: 100vw; + display: flex; + flex-direction: row; + justify-content: center; +} + +.title { + color: #FFECE9; + font-weight: bold; + font-size: 70px; +} + +.project-title { + text-align: center; + font-size: 30px; +} + +.github-project { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-items: center; +} + +.chart-box { + width: 500px; + margin-left: auto; + margin-right: auto; + padding-top: 20px; } \ No newline at end of file From d50383c9707589701345b3c53bfaba0b8905a437 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Wed, 29 Sep 2021 17:26:07 +0200 Subject: [PATCH 02/10] tall the js and more styling --- code/Notes | 8 +++++ code/chart.js | 1 + code/index.html | 17 ++++++++--- code/script.js | 80 ++++++++++++++++++++++++++++++++++++++++--------- code/style.css | 23 ++++++++++---- 5 files changed, 105 insertions(+), 24 deletions(-) diff --git a/code/Notes b/code/Notes index e69de29b..726b229a 100644 --- a/code/Notes +++ b/code/Notes @@ -0,0 +1,8 @@ +TO DO: + +- fetch repos +- show in browser +- do a pie-chart +- fetching pull requests +- fetch commits +- accordion? \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index e34e9452..ed552dbf 100644 --- a/code/chart.js +++ b/code/chart.js @@ -5,6 +5,7 @@ console.log('hello from the chart.js') //"Draw" the chart here 👇 + const drawChart = (amount) => { const config = { type: 'doughnut', diff --git a/code/index.html b/code/index.html index a3375d69..faddf25a 100644 --- a/code/index.html +++ b/code/index.html @@ -4,7 +4,7 @@ - Project GitHub Tracker + LPB GitHub Tracker @@ -16,6 +16,17 @@

GitHub Tracker

+
+
+ +
+ +
+
+ + + +

Projects:

@@ -24,9 +35,7 @@

Projects:

-
- -
+ diff --git a/code/script.js b/code/script.js index 404cbeb6..4f1360ac 100644 --- a/code/script.js +++ b/code/script.js @@ -1,42 +1,80 @@ console.log('hello from scrips.js') -const USER = `annaester` +const USER = 'annaester' const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos` +const MY_PROFILE_URL = `https://api.github.com/users/${USER}` const projectContainer = document.getElementById('projects') +const infoBox = document.getElementById('user-box') + +const getUserInfo = () => { + fetch(MY_PROFILE_URL) + .then((resp) => resp.json()) + .then((data) => { + console.log('testar min nya url', data) + infoBox.innerHTML = ` +
+

${data.login}

+ +
` + }) +} + +getUserInfo() + + const getRepos = () => { fetch(MY_REPOS_URL) .then(resp => resp.json()) .then(data => { - console.log(data) + //console.log(data) //data.forEach(repo => console.log(repo.name)) - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - forkedRepos.forEach(repo => projectContainer.innerHTML += `

${repo.name}

`) + const forkedRepos = data.filter(repo => repo.fork && repo.name.includes('project-')) + forkedRepos.forEach(repo => projectContainer.innerHTML += ` +
+

${repo.name}

+ ${repo.name}with default branch ${repo.default_branch} +

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

+

Commits amount:

+ +
+ `) getPullRequests(forkedRepos) - + console.log('my repos', forkedRepos) + drawChart(forkedRepos.length) }) } -getRepos() //Remember to pass along your filtered repos as an argument when //you are calling this function -const getPullRequests = (repos) => { +const getPullRequests = (allRepos) => { //Get all the PRs for each project. - repos.forEach(repo => { - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`) + allRepos.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) .then(res => res.json()) .then(data => { - console.log('hello pullrequests', data) - const myPullRequests = data.filter(pull => pull.user.login === repo.owner.login) - console.log(myPullRequests) + //console.log(`hello pullrequests ${repo.name}`, data) + const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) + + console.log('my pull requests', myPullRequests) + + //fetchCommits(myPullRequests.commits_url, repo.name) + + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name); + } else { + document.getElementById(`commits-${repo.name}`).innerHTML += + 'No pull request yet done :('; + } + console.log('my commits 1', data.length) //TODO //1. Find only the PR that you made by comparing pull.user.login // with repo.owner.login @@ -44,8 +82,22 @@ const getPullRequests = (repos) => { // 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 - }) + }).catch(err => console.log("getPullRequests error:", err)) }) + } - getPullRequests() \ No newline at end of file + const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then ((res) => res.json ()) + .then ((data) => { + document.getElementById(`commits-${myRepoName}`).innerHTML += data.length + + console.log('my commits', data.length) + }) +} + + + + + getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index c546db79..6c729bd4 100644 --- a/code/style.css +++ b/code/style.css @@ -17,6 +17,23 @@ body { font-size: 70px; } +.info-chart-box { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} + +.profile-pic { + width: 400px; + border-radius: 50%; +} + +.chart-box { + width: 400px; + padding: 20px; +} + .project-title { text-align: center; font-size: 30px; @@ -28,9 +45,3 @@ body { justify-items: center; } -.chart-box { - width: 500px; - margin-left: auto; - margin-right: auto; - padding-top: 20px; -} \ No newline at end of file From 1633227cd171ed7e92d47237f9f0c629b901d900 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Wed, 29 Sep 2021 18:31:11 +0200 Subject: [PATCH 03/10] more styling and responsiveness --- code/script.js | 12 ++++----- code/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 76 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 4f1360ac..38da539e 100644 --- a/code/script.js +++ b/code/script.js @@ -13,10 +13,10 @@ const getUserInfo = () => { .then((data) => { console.log('testar min nya url', data) infoBox.innerHTML = ` -
-

${data.login}

+ +

${data.login}

-
` + ` }) } @@ -32,9 +32,9 @@ const getRepos = () => { //data.forEach(repo => console.log(repo.name)) const forkedRepos = data.filter(repo => repo.fork && repo.name.includes('project-')) forkedRepos.forEach(repo => projectContainer.innerHTML += ` -
-

${repo.name}

- ${repo.name}with default branch ${repo.default_branch} +
+

${repo.name}

+ ${repo.name}with default branch ${repo.default_branch}

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

Commits amount:

diff --git a/code/style.css b/code/style.css index 6c729bd4..23e261e6 100644 --- a/code/style.css +++ b/code/style.css @@ -19,9 +19,14 @@ body { .info-chart-box { display: flex; - flex-direction: row; + flex-direction: column; justify-content: space-around; align-items: center; + padding-bottom: 50px; +} + +.user-name { + text-align: center; } .profile-pic { @@ -34,6 +39,11 @@ body { padding: 20px; } +.project-container { + background-color: white; + padding: 20px; +} + .project-title { text-align: center; font-size: 30px; @@ -41,7 +51,65 @@ body { .github-project { display: grid; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr; justify-items: center; + gap: 15px; +} + +.project-card { + background-color: #FFECE9; + width: 350px; + height: 250px; + padding: 15px; + border-radius: 5%; +} + +.project-name { + font-size: 30px; + color: white; + text-shadow: 1px 1px 1px #000000; +} + + /* Tablet */ +@media (min-width:768px) { + + .info-chart-box { + display: flex; + flex-direction: row; + } + + .user-name { + text-align: center; + } + + .profile-pic { + width: 400px; + border-radius: 50%; + } + + .chart-box { + width: 400px; + padding: 20px; + } + + .github-project { + display: grid; + grid-template-columns: 1fr 1fr; +} + + +/* Desktop */ +@media (min-width: 992px) { + + .github-project { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + } + + + + + From 1b5c527823fc32488950be303957753ba06855b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Wed, 29 Sep 2021 18:50:21 +0200 Subject: [PATCH 04/10] minor styling --- code/script.js | 2 +- code/style.css | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index 38da539e..87e71375 100644 --- a/code/script.js +++ b/code/script.js @@ -15,7 +15,7 @@ const getUserInfo = () => { infoBox.innerHTML = `

${data.login}

- + profile picture ` }) } diff --git a/code/style.css b/code/style.css index 23e261e6..848bb5bb 100644 --- a/code/style.css +++ b/code/style.css @@ -47,6 +47,8 @@ body { .project-title { text-align: center; font-size: 30px; + padding-top: 15px; + padding-bottom: 20px; } .github-project { @@ -97,7 +99,6 @@ body { grid-template-columns: 1fr 1fr; } - /* Desktop */ @media (min-width: 992px) { @@ -105,6 +106,7 @@ body { display: grid; grid-template-columns: 1fr 1fr 1fr; } + } From 82f672486a53310b899533d33a2f2e6343407290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Thu, 30 Sep 2021 21:30:16 +0200 Subject: [PATCH 05/10] more styling and Readme --- code/index.html | 17 ++-- ...-5b69de71b51265.8586076615336648817417.png | Bin 0 -> 13669 bytes code/script.js | 48 ++++------- code/style.css | 79 ++++++++++++++---- 4 files changed, 93 insertions(+), 51 deletions(-) create mode 100644 code/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png diff --git a/code/index.html b/code/index.html index faddf25a..43a10e59 100644 --- a/code/index.html +++ b/code/index.html @@ -8,24 +8,27 @@ + >

GitHub Tracker

+ +
-
+
+
+
+
- - -
@@ -34,7 +37,11 @@

Projects:

- + diff --git a/code/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png b/code/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png new file mode 100644 index 0000000000000000000000000000000000000000..6c3b3cd14aece03ce138e53c6e8ecc4954b17e8a GIT binary patch literal 13669 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 { fetch(MY_PROFILE_URL) - .then((resp) => resp.json()) - .then((data) => { + .then(resp => resp.json()) + .then(data => { console.log('testar min nya url', data) infoBox.innerHTML = ` -

${data.login}

profile picture ` }) -} + } getUserInfo() - const getRepos = () => { fetch(MY_REPOS_URL) .then(resp => resp.json()) .then(data => { - //console.log(data) - //data.forEach(repo => console.log(repo.name)) const forkedRepos = data.filter(repo => repo.fork && repo.name.includes('project-')) forkedRepos.forEach(repo => projectContainer.innerHTML += `
-

${repo.name}

- ${repo.name}with default branch ${repo.default_branch} -

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

-

Commits amount:

- +

${repo.name}

+ ${repo.name}
With default branch ${repo.default_branch} +

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

+

Number of commits:

`) getPullRequests(forkedRepos) - console.log('my repos', forkedRepos) - drawChart(forkedRepos.length) }) - -} - - - + } //Remember to pass along your filtered repos as an argument when //you are calling this function const getPullRequests = (allRepos) => { - //Get all the PRs for each project. allRepos.forEach((repo) => { fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) - .then(res => res.json()) + .then(resp => resp.json()) .then(data => { - //console.log(`hello pullrequests ${repo.name}`, data) const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) console.log('my pull requests', myPullRequests) - //fetchCommits(myPullRequests.commits_url, repo.name) if (myPullRequests) { fetchCommits(myPullRequests.commits_url, repo.name); } else { - document.getElementById(`commits-${repo.name}`).innerHTML += - 'No pull request yet done :('; + document.getElementById(`commits-${repo.name}`).innerHTML = + `No pull requests done by ${USER}`; + } console.log('my commits 1', data.length) //TODO @@ -84,20 +71,17 @@ const getPullRequests = (allRepos) => { // another function with the review_comments_url as argument }).catch(err => console.log("getPullRequests error:", err)) }) + } - } const fetchCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) - .then ((res) => res.json ()) - .then ((data) => { + .then (resp => resp.json ()) + .then (data => { document.getElementById(`commits-${myRepoName}`).innerHTML += data.length console.log('my commits', data.length) }) -} - - - + } getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 848bb5bb..2118ab09 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,5 @@ body { - background: #FFECE9; + background: #f7faf1; font-family: 'Baloo Chettan 2', cursive; } @@ -17,6 +17,16 @@ body { font-size: 70px; } +.github-logo { + width: 50px; + height: 50px; + border-radius: 50%; + border: 2px solid #FFECE9; + background-color:#FFECE9; + align-self: center; + margin: 20px; +} + .info-chart-box { display: flex; flex-direction: column; @@ -41,7 +51,7 @@ body { .project-container { background-color: white; - padding: 20px; + padding: 20px 20px 60px 20px; } .project-title { @@ -55,29 +65,68 @@ body { display: grid; grid-template-columns: 1fr; justify-items: center; - gap: 15px; + gap: 20px; } .project-card { - background-color: #FFECE9; + font-family: 'Quicksand', sans-serif; + background-color: #f7faf1; width: 350px; - height: 250px; + height: 200px; padding: 15px; - border-radius: 5%; + border-radius: 2%; + border: 2px solid rgb(220, 220, 220); +} + +.project-card:hover { + background-color: #FFECE9; } .project-name { font-size: 30px; color: white; text-shadow: 1px 1px 1px #000000; + margin-top: 10px; + text-transform: capitalize;; } +.project-info { + margin: 2px; + font-size: 15px; +} + +.project-links { + color: black; + font-size: 20px; +} + +.footer { + height: 100px; + background-color: #f7faf1; + align-items: right; + display: flex; + flex-direction: row; + justify-content: center; +} + +.linkedin-link { + color: rgb(201, 200, 200); + text-decoration: none; + text-align: right; + margin: 35px 20px; + font-style: italic; +} + + /* Tablet */ @media (min-width:768px) { .info-chart-box { display: flex; flex-direction: row; + /*width: 1000px;*/ + margin-left: auto; + margin-right: auto; } .user-name { @@ -97,21 +146,23 @@ body { .github-project { display: grid; grid-template-columns: 1fr 1fr; + width: 800px; + margin-left: auto; + margin-right: auto; } /* Desktop */ -@media (min-width: 992px) { +@media (min-width: 1192px) { + + .info-chart-box { + width: 1250px; + } .github-project { display: grid; grid-template-columns: 1fr 1fr 1fr; + width: 1190px; } - - -} - - - - +} From 2c61b3e0f464b94bc5e0a8ad515e15fa553bfa47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Thu, 30 Sep 2021 21:32:55 +0200 Subject: [PATCH 06/10] ReadMe --- README.md | 10 +++++----- code/style.css | 4 +--- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..db382ca9 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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 assignment was to creata a GitHub tracker that used APIs to keep track of all my projects forked by Technigo in Github. We also had to creat a chart to show our progress. ## 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? +This week it was most difficult to understand how to use the APIs from Github and collect the right information. Past week the APIs were more straight forward compared to this week. + +I learnt a lot about how to style from the script file, something I was a bit worried about since we had to style things that didn't excist in the HTML from the beginning. But I noticed that it wasn't that complicated. ## 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://lisapblome-w7-githubtracker.netlify.app/ diff --git a/code/style.css b/code/style.css index 2118ab09..9bfbdb31 100644 --- a/code/style.css +++ b/code/style.css @@ -124,7 +124,6 @@ body { .info-chart-box { display: flex; flex-direction: row; - /*width: 1000px;*/ margin-left: auto; margin-right: auto; } @@ -164,5 +163,4 @@ body { width: 1190px; } - -} +} \ No newline at end of file From 845e06de1ba56f6d1f040fab833e6efbe8a34203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Thu, 30 Sep 2021 21:42:28 +0200 Subject: [PATCH 07/10] minor styling --- code/index.html | 2 +- code/style.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 43a10e59..305bffb2 100644 --- a/code/index.html +++ b/code/index.html @@ -8,7 +8,7 @@ - > + diff --git a/code/style.css b/code/style.css index 9bfbdb31..f0cbfe2f 100644 --- a/code/style.css +++ b/code/style.css @@ -8,6 +8,7 @@ body { width: 100vw; display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: center; } @@ -15,6 +16,7 @@ body { color: #FFECE9; font-weight: bold; font-size: 70px; + text-align: center; } .github-logo { From 8d9f8dd3ddbf41867c4e600fc2b07ebf67c95745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Pousette=20Blom=C3=A9?= Date: Fri, 1 Oct 2021 09:26:53 +0200 Subject: [PATCH 08/10] styling and more info from API --- code/chart.js | 10 ++++++---- code/script.js | 9 +++++++-- code/style.css | 13 ++++++++++++- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/code/chart.js b/code/chart.js index ed552dbf..fe1a40f9 100644 --- a/code/chart.js +++ b/code/chart.js @@ -13,15 +13,16 @@ const config = { labels: [ 'Projects done', 'Projects left', + 'Projects in total' //'Blue' ], datasets: [{ label: 'My Projects', - data: [amount, 19-amount], + data: [amount, 19-amount, 19], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(255, 205, 86)', - //'rgb(54, 162, 235)' + '#e3f7ba', + 'rgb(252, 241, 175)', + '#FFECE9' ], hoverOffset: 4 }] @@ -29,6 +30,7 @@ const config = { }; + const repoChart = new Chart(ctx, config); } diff --git a/code/script.js b/code/script.js index 05b96e42..a2c88753 100644 --- a/code/script.js +++ b/code/script.js @@ -31,11 +31,16 @@ const getRepos = () => {

${repo.name}

${repo.name}
With default branch ${repo.default_branch} -

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

-

Number of commits:

+

Created: ${new Date(repo.created_at).toDateString()} +

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

+

Number of commits:

`) + + + //forkedRepos.sort(function(a, b){return a.created_at - b.created_at}); + getPullRequests(forkedRepos) drawChart(forkedRepos.length) }) diff --git a/code/style.css b/code/style.css index f0cbfe2f..af491821 100644 --- a/code/style.css +++ b/code/style.css @@ -44,6 +44,12 @@ body { .profile-pic { width: 400px; border-radius: 50%; + opacity: 0.5; +} + +.profile-pic:hover { + opacity: 1; + transition: 1s; } .chart-box { @@ -73,7 +79,7 @@ body { .project-card { font-family: 'Quicksand', sans-serif; background-color: #f7faf1; - width: 350px; + width: 330px; height: 200px; padding: 15px; border-radius: 2%; @@ -119,6 +125,11 @@ body { font-style: italic; } +.linkedin-link:hover { + color: rgb(123, 122, 122); + font-size: 20px; + transition: 1s; +} /* Tablet */ @media (min-width:768px) { From 66f103d93825921f2c3df23f4348632be15d3a6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Blom=C3=A9?= <81302626+annaester@users.noreply.github.com> Date: Fri, 1 Oct 2021 20:55:10 +0200 Subject: [PATCH 09/10] sorting projects and minor adjustments --- code/Notes | 8 -------- code/chart.js | 16 +++------------ code/index.html | 20 ++++++------------- code/script.js | 52 +++++++++++++++++-------------------------------- code/style.css | 14 ------------- 5 files changed, 27 insertions(+), 83 deletions(-) delete mode 100644 code/Notes diff --git a/code/Notes b/code/Notes deleted file mode 100644 index 726b229a..00000000 --- a/code/Notes +++ /dev/null @@ -1,8 +0,0 @@ -TO DO: - -- fetch repos -- show in browser -- do a pie-chart -- fetching pull requests -- fetch commits -- accordion? \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index fe1a40f9..356f6a94 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,11 +1,5 @@ -//DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -console.log('hello from the chart.js') - -//"Draw" the chart here 👇 - - const drawChart = (amount) => { const config = { type: 'doughnut', @@ -14,7 +8,7 @@ const config = { 'Projects done', 'Projects left', 'Projects in total' - //'Blue' + ], datasets: [{ label: 'My Projects', @@ -28,10 +22,6 @@ const config = { }] }, }; - - - + const repoChart = new Chart(ctx, config); -} - - +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 305bffb2..cff0dda8 100644 --- a/code/index.html +++ b/code/index.html @@ -8,33 +8,26 @@ - - +

GitHub Tracker

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

Projects:

-
@@ -43,7 +36,6 @@

Projects:

- diff --git a/code/script.js b/code/script.js index a2c88753..659659af 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,6 @@ -console.log('hello from scrips.js') - const USER = 'annaester' -const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos` const MY_PROFILE_URL = `https://api.github.com/users/${USER}` +const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos` const projectContainer = document.getElementById('projects') const infoBox = document.getElementById('user-box') @@ -15,7 +13,7 @@ const getUserInfo = () => { infoBox.innerHTML = `

${data.login}

profile picture - ` + ` }) } @@ -27,28 +25,25 @@ const getRepos = () => { .then(resp => resp.json()) .then(data => { const forkedRepos = data.filter(repo => repo.fork && repo.name.includes('project-')) + forkedRepos.sort(function (oldestRepo, newestRepo) { + return new Date(oldestRepo.created_at) - new Date(newestRepo.created_at); + }); forkedRepos.forEach(repo => projectContainer.innerHTML += ` -
-

${repo.name}

- ${repo.name}
With default branch ${repo.default_branch} -

Created: ${new Date(repo.created_at).toDateString()} -

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

-

Number of commits:

-
- `) - - - - //forkedRepos.sort(function(a, b){return a.created_at - b.created_at}); +
+

${repo.name}

+ ${repo.name}
With default branch ${repo.default_branch} +

Created: ${new Date(repo.created_at).toDateString()} +

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

+

Number of commits:

+
+ `) getPullRequests(forkedRepos) drawChart(forkedRepos.length) }) } - -//Remember to pass along your filtered repos as an argument when -//you are calling this function - + + const getPullRequests = (allRepos) => { allRepos.forEach((repo) => { fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) @@ -56,25 +51,14 @@ const getPullRequests = (allRepos) => { .then(data => { const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) - console.log('my pull requests', myPullRequests) - - if (myPullRequests) { fetchCommits(myPullRequests.commits_url, repo.name); - } else { + } + else { document.getElementById(`commits-${repo.name}`).innerHTML = `No pull requests done by ${USER}`; - } - console.log('my commits 1', data.length) - //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 - }).catch(err => console.log("getPullRequests error:", err)) + }).catch(err => console.log("getPullRequests error:", err)) }) } diff --git a/code/style.css b/code/style.css index af491821..fbdbfc77 100644 --- a/code/style.css +++ b/code/style.css @@ -140,21 +140,7 @@ body { margin-left: auto; margin-right: auto; } - - .user-name { - text-align: center; - } - - .profile-pic { - width: 400px; - border-radius: 50%; - } - .chart-box { - width: 400px; - padding: 20px; - } - .github-project { display: grid; grid-template-columns: 1fr 1fr; From b8769b2afabb747a5d08982f223200542572487e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lisa=20Blom=C3=A9?= <81302626+annaester@users.noreply.github.com> Date: Fri, 5 Nov 2021 16:06:31 +0100 Subject: [PATCH 10/10] minor adjustment --- code/script.js | 135 ++++++++++++++++++++++++++++--------------------- code/style.css | 1 - 2 files changed, 76 insertions(+), 60 deletions(-) diff --git a/code/script.js b/code/script.js index 659659af..94778134 100644 --- a/code/script.js +++ b/code/script.js @@ -1,76 +1,93 @@ -const USER = 'annaester' -const MY_PROFILE_URL = `https://api.github.com/users/${USER}` -const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos` +const USER = "annaester"; +const MY_PROFILE_URL = `https://api.github.com/users/${USER}`; +const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos`; -const projectContainer = document.getElementById('projects') -const infoBox = document.getElementById('user-box') +const projectContainer = document.getElementById("projects"); +const infoBox = document.getElementById("user-box"); const getUserInfo = () => { - fetch(MY_PROFILE_URL) - .then(resp => resp.json()) - .then(data => { - console.log('testar min nya url', data) - infoBox.innerHTML = ` + fetch(MY_PROFILE_URL) + .then((resp) => resp.json()) + .then((data) => { + console.log("testar min nya url", data); + infoBox.innerHTML = `

${data.login}

profile picture - ` - }) - } - -getUserInfo() + `; + }); +}; +getUserInfo(); const getRepos = () => { - fetch(MY_REPOS_URL) - .then(resp => resp.json()) - .then(data => { - const forkedRepos = data.filter(repo => repo.fork && repo.name.includes('project-')) - forkedRepos.sort(function (oldestRepo, newestRepo) { - return new Date(oldestRepo.created_at) - new Date(newestRepo.created_at); - }); - forkedRepos.forEach(repo => projectContainer.innerHTML += ` + fetch(MY_REPOS_URL) + .then((resp) => resp.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.includes("project-") + ); + forkedRepos.sort((oldestRepo, newestRepo) => { + return ( + new Date(newestRepo.created_at) - new Date(oldestRepo.created_at) + ); + }); + forkedRepos.forEach( + (repo) => + (projectContainer.innerHTML += `

${repo.name}

- ${repo.name}
With default branch ${repo.default_branch} -

Created: ${new Date(repo.created_at).toDateString()} -

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

-

Number of commits:

+ ${ + repo.name + }
With default branch ${repo.default_branch} +

Created: ${new Date( + repo.created_at + ).toDateString()} +

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

+

Number of commits:

`) + ); + + getPullRequests(forkedRepos); + drawChart(forkedRepos.length); + }); +}; - getPullRequests(forkedRepos) - drawChart(forkedRepos.length) - }) - } - - const getPullRequests = (allRepos) => { - allRepos.forEach((repo) => { - fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) - .then(resp => resp.json()) - .then(data => { - const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) - - if (myPullRequests) { - fetchCommits(myPullRequests.commits_url, repo.name); - } - else { - document.getElementById(`commits-${repo.name}`).innerHTML = - `No pull requests done by ${USER}`; - } - }).catch(err => console.log("getPullRequests error:", err)) - }) - } + allRepos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + ) + .then((resp) => resp.json()) + .then((data) => { + const myPullRequests = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name); + } else { + document.getElementById( + `commits-${repo.name}` + ).innerHTML = `No pull requests done by ${USER}`; + } + }) + .catch((err) => console.log("getPullRequests error:", err)); + }); +}; +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((resp) => resp.json()) + .then((data) => { + document.getElementById(`commits-${myRepoName}`).innerHTML += data.length; - const fetchCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) - .then (resp => resp.json ()) - .then (data => { - document.getElementById(`commits-${myRepoName}`).innerHTML += data.length - - console.log('my commits', data.length) - }) - } + console.log("my commits", data.length); + }); +}; - getRepos() \ No newline at end of file +getRepos(); diff --git a/code/style.css b/code/style.css index fbdbfc77..6ad36762 100644 --- a/code/style.css +++ b/code/style.css @@ -80,7 +80,6 @@ body { font-family: 'Quicksand', sans-serif; background-color: #f7faf1; width: 330px; - height: 200px; padding: 15px; border-radius: 2%; border: 2px solid rgb(220, 220, 220);