From c24e04f48c7e5c12d285b88c58441badfd1cec1a Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Mon, 27 Sep 2021 20:47:44 +0200 Subject: [PATCH 01/15] first steps with fetching repos and creating a chart --- code/chart.js | 27 +++++++++++++++++++++++++++ code/index.html | 1 + code/script.js | 27 +++++++++++++++++++++++++++ fromLesson.js | 19 +++++++++++++++++++ 4 files changed, 74 insertions(+) create mode 100644 fromLesson.js diff --git a/code/chart.js b/code/chart.js index 92e85a30..8fcafabc 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,30 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + + +const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Upcoming projects', + 'Yellow' + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + 'rgb(255, 205, 86)' + ], + hoverOffset: 4 + }] + }, +}; + + +const projectsChart = new Chart(ctx, config); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..81fd8d0a 100644 --- a/code/index.html +++ b/code/index.html @@ -6,6 +6,7 @@ Project GitHub Tracker +

GitHub Tracker

diff --git a/code/script.js b/code/script.js index e69de29b..5300612e 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,27 @@ +const USER = 'hejmaria' +const REPOS_URL = `http://api.github.com/users/${USER}/repos` + +const projectContainer = document.getElementById('projects') + + + +const getRepos = () => { + fetch(REPOS_URL) + .then(res => res.json()) + .then(data => { + console.log('The data', data) + data.forEach (repo => console.log(repo.name)) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + forkedRepos.forEach(repo => console.log(repo.name)) + + forkedRepos.forEach(repo => projectContainer.innerHTML += `

${repo.name}

`) + + //make into a div or something to style them + drawChart(forkedRepos.length) + }); + +} + +getRepos(); + +//const drawChart = (amoun \ No newline at end of file diff --git a/fromLesson.js b/fromLesson.js new file mode 100644 index 00000000..3e381b79 --- /dev/null +++ b/fromLesson.js @@ -0,0 +1,19 @@ +const USER = 'hejmaria' +const REPOS_URL = `http://api.github.com/users/${USER}/repos` + +const getRepos = () => { + fetch (REPOS_URL) + .then (res => res.json()) + .then(data => { + console.log(data) + //data.forEach (repo => console.log(repo.name)) + const forkedRepos = data.fillter(repo => repo.fork && repo.name.startsWith('procet-')) + forkedRepos.forEach(repo => console.log(repo.name)) + forkedRepos.forEach(repo => projectsContainer.inneHTML += `

${repo.name}

`) + //make into a div or something to style them + drawChart(forkedRepos.length) + }); + +} + +const drawChart = (amount) => \ No newline at end of file From 50ed27db46490074e8573950eea14d131c921c8b Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Wed, 29 Sep 2021 14:49:48 +0200 Subject: [PATCH 02/15] added url and push date --- code/script.js | 38 +++++++++++++++++-------- fromLesson.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++- maksScript.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 178 insertions(+), 12 deletions(-) create mode 100644 maksScript.js diff --git a/code/script.js b/code/script.js index 5300612e..a0465361 100644 --- a/code/script.js +++ b/code/script.js @@ -1,27 +1,43 @@ const USER = 'hejmaria' -const REPOS_URL = `http://api.github.com/users/${USER}/repos` +const REPOS_URL = `http://api.github.com/users/${USER}/repos`; -const projectContainer = document.getElementById('projects') +const projectContainer = document.getElementById('projects'); const getRepos = () => { fetch(REPOS_URL) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { console.log('The data', data) + data.forEach (repo => console.log(repo.name)) - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - forkedRepos.forEach(repo => console.log(repo.name)) + + const forkedRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); - forkedRepos.forEach(repo => projectContainer.innerHTML += `

${repo.name}

`) + forkedRepos.forEach((repo) => { + projectContainer.innerHTML += ` +

${repo.name}

`; + + }); + + forkedRepos.forEach((repo) => { + projectContainer.innerHTML += ` +
+ ${repo.name} with defalut branch ${repo.default_branch}. +

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

+ +

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

Recent push: ${new Date()}

+ +

${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(); From d9b005d8c661a3b1909074e2a8e97216b3e0e5d4 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Wed, 29 Sep 2021 16:32:56 +0200 Subject: [PATCH 03/15] pull requests and dynamic ID --- code/github-tracker.code-workspace | 11 ++++++ code/index.html | 2 ++ code/script.js | 54 +++++++++++++++++++++++------- 3 files changed, 54 insertions(+), 13 deletions(-) create mode 100644 code/github-tracker.code-workspace diff --git a/code/github-tracker.code-workspace b/code/github-tracker.code-workspace new file mode 100644 index 00000000..56aa326a --- /dev/null +++ b/code/github-tracker.code-workspace @@ -0,0 +1,11 @@ +{ + "folders": [ + { + "path": ".." + } + ], + "settings": { + "liveServer.settings.port": 5505, + "liveServer.settings.multiRootWorkspaceName": "MAKScode" + } +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 81fd8d0a..987d5339 100644 --- a/code/index.html +++ b/code/index.html @@ -1,5 +1,6 @@ + @@ -8,6 +9,7 @@ +

GitHub Tracker

Projects:

diff --git a/code/script.js b/code/script.js index a0465361..db052995 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,7 @@ const USER = 'hejmaria' const REPOS_URL = `http://api.github.com/users/${USER}/repos`; + const projectContainer = document.getElementById('projects'); @@ -17,27 +18,54 @@ const getRepos = () => { (repo) => repo.name.includes('project-') && repo.fork ); - forkedRepos.forEach((repo) => { - projectContainer.innerHTML += ` -

${repo.name}

`; - - }); - forkedRepos.forEach((repo) => { projectContainer.innerHTML += `
+

${repo.name}

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

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

- -

Commits ammount:

- ` - }) + `; + }); + + fetchPullRequestsArray(forkedRepos); + drawChart(forkedRepos.length); + - //make into a div or something to style them - drawChart(forkedRepos.length) }); }; +const fetchPullRequestsArray = (allRepos) => { + allRepos.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) => { + console.log(`mama repo of ${repo.name}`, data); + + const userPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login); + console.log('MIN MACKA', userPullRequest) + + if (userPullRequest) { + fetchCommits(userPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'Nope, no pull request done yet. You just wait.'; + } + }); + }); +}; +const fetchCommits = (myCommitsUrl, MyRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${MyRepoName}`).innerHTML += data.length; + }); +}; + + getRepos() \ No newline at end of file From 5c1a1b70423ae09277fee8ec112ffc1b0e173a11 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Thu, 30 Sep 2021 08:09:52 +0200 Subject: [PATCH 04/15] picture and name --- code/script.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/code/script.js b/code/script.js index db052995..20ca557c 100644 --- a/code/script.js +++ b/code/script.js @@ -1,16 +1,30 @@ const USER = 'hejmaria' const REPOS_URL = `http://api.github.com/users/${USER}/repos`; +const USER_URL = `http://api.github.com/users/${USER}`; const projectContainer = document.getElementById('projects'); - +const getProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + console.log('ME DATA', data) + projectContainer.innerHTML = ` +
+ avatar picture +

Github: ${data.login}

+

${data.name}

+
+ `; + }) +} const getRepos = () => { fetch(REPOS_URL) .then((res) => res.json()) .then((data) => { - console.log('The data', data) + console.log('SHOW ME THE DATA', data) data.forEach (repo => console.log(repo.name)) @@ -24,7 +38,7 @@ const getRepos = () => {

${repo.name}

${repo.name} with defalut branch ${repo.default_branch}.

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

-

Commits ammount:

+

Number of commits:

`; }); @@ -54,7 +68,7 @@ const fetchPullRequestsArray = (allRepos) => { fetchCommits(userPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - 'Nope, no pull request done yet. You just wait.'; + `Nope, ${USER} hasn't done a pull request yet.`; } }); }); @@ -67,5 +81,5 @@ const fetchCommits = (myCommitsUrl, MyRepoName) => { }); }; - +getProfile() getRepos() \ No newline at end of file From 600be4b7153e710d4feb3e6a244c937a23c4f517 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Fri, 1 Oct 2021 15:35:08 +0200 Subject: [PATCH 05/15] started styling using grid --- code/index.html | 24 ++++++++++++--- code/script.js | 10 +++--- code/style.css | 82 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 106 insertions(+), 10 deletions(-) diff --git a/code/index.html b/code/index.html index 987d5339..cfa59971 100644 --- a/code/index.html +++ b/code/index.html @@ -7,16 +7,32 @@ Project GitHub Tracker + + +

GitHub Tracker

-

Projects:

-
- - + +
+
+ + +

My Technigo projects:

+
+ +
+ + + +
+ + +
+ diff --git a/code/script.js b/code/script.js index 20ca557c..a09c2b0d 100644 --- a/code/script.js +++ b/code/script.js @@ -4,14 +4,16 @@ const USER_URL = `http://api.github.com/users/${USER}`; const projectContainer = document.getElementById('projects'); +const profileContainer = document.getElementById('profile'); + const getProfile = () => { fetch(USER_URL) .then((res) => res.json()) .then((data) => { console.log('ME DATA', data) - projectContainer.innerHTML = ` -
+ profileContainer.innerHTML = ` +
avatar picture

Github: ${data.login}

${data.name}

@@ -24,7 +26,6 @@ const getRepos = () => { fetch(REPOS_URL) .then((res) => res.json()) .then((data) => { - console.log('SHOW ME THE DATA', data) data.forEach (repo => console.log(repo.name)) @@ -34,7 +35,8 @@ const getRepos = () => { forkedRepos.forEach((repo) => { projectContainer.innerHTML += ` -
+ +

${repo.name}

${repo.name} with defalut branch ${repo.default_branch}.

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

diff --git a/code/style.css b/code/style.css index 7c8ad447..4bb06b54 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,81 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #ffffff; + font-family: 'Source Sans Pro', sans-serif; + color:#3c4e5c; +} + +h1 { + font-size: 40px; + font-family: 'Fredoka One', cursive; + +} + + + + +.profile-box { + grid-column: span 2; + border: 1px solid lime; +} + +.profile-box img { + border-radius: 50%; + +} + +#projects { + display: grid; + margin: 0% 5%; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + column-gap: 1rem; + row-gap: 1rem; + border: 5px solid blue; +} + +.projects-box { + border: 1px solid magenta; + grid-column-end: auto; + /* box-shadow: 7px 7px 0px 0px #f6B915; */ + padding: 10px; + + +} + +.chart-box { + width: 80%; + margin: auto; + + +} + + + + + +tablet +margin: 0% 10%; + +.chart-box +60% + +@mediaq screen +margin: 0% 15%; +grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + +.chart-box +40% + +/* COLORS +#a14329 +#bb9236 +#a3b4a4 +#3c4e5c +#120c1e */ + +/* COLORS 2 +#203c3b +#447270 +#6B9493 + +#f6e271 +#f6B915 */ From c76aadf51bc5befedc34efd5fbe49e050aa2b6f3 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Fri, 1 Oct 2021 16:18:06 +0200 Subject: [PATCH 06/15] added more styling, colors, headers, chart and more --- code/chart.js | 13 +++++++------ code/index.html | 5 +++-- code/script.js | 7 ++++--- code/style.css | 50 +++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 58 insertions(+), 17 deletions(-) diff --git a/code/chart.js b/code/chart.js index 8fcafabc..f7ad7948 100644 --- a/code/chart.js +++ b/code/chart.js @@ -11,15 +11,14 @@ const config = { labels: [ 'Finished projects', 'Upcoming projects', - 'Yellow' ], + datasets: [{ - label: 'My First Dataset', + label: 'My projects at Technigo', data: [amount, 19-amount], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(54, 162, 235)', - 'rgb(255, 205, 86)' + '#f6e271', + '#f6B915', ], hoverOffset: 4 }] @@ -28,4 +27,6 @@ const config = { const projectsChart = new Chart(ctx, config); -} \ No newline at end of file +} + + diff --git a/code/index.html b/code/index.html index cfa59971..c50b4974 100644 --- a/code/index.html +++ b/code/index.html @@ -9,7 +9,7 @@ - + @@ -21,8 +21,9 @@

GitHub Tracker

-

My Technigo projects:

+
+

My Technigo projects:

diff --git a/code/script.js b/code/script.js index a09c2b0d..12adda5d 100644 --- a/code/script.js +++ b/code/script.js @@ -15,8 +15,9 @@ const getProfile = () => { profileContainer.innerHTML = `
avatar picture -

Github: ${data.login}

-

${data.name}

+

Hello! I'm ${data.name}. This is my github tracker.

+

Username: ${data.login}

+
`; }) @@ -37,7 +38,7 @@ const getRepos = () => { projectContainer.innerHTML += `
-

${repo.name}

+

${repo.name}

${repo.name} with defalut branch ${repo.default_branch}.

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

Number of commits:

diff --git a/code/style.css b/code/style.css index 4bb06b54..7dea517f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,21 +1,57 @@ body { - background: #ffffff; + background: #203c3b; font-family: 'Source Sans Pro', sans-serif; - color:#3c4e5c; + color:#ffffff; } h1 { + font-size: 60px; + font-family: 'Fredoka One', cursive; + color: #f6e271; + text-align: center; +} + +h2{ font-size: 40px; font-family: 'Fredoka One', cursive; + color: #ffffff; + opacity: 80%; +} +h3 { + font-size: 30px; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 200; + color: #ffffff; +} +h4 { + font-size: 20px; + font-weight: 600; + font-family: 'Source Sans Pro', sans-serif; + color: #f6B915; } +a { + color: #ffffff; + text-decoration: none; +} + +a:hover { + color: #f6B915; + +} + +a:visited { + color: #ffffff; + opacity: 80%; + +} .profile-box { grid-column: span 2; - border: 1px solid lime; + } .profile-box img { @@ -29,13 +65,13 @@ h1 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 1rem; row-gap: 1rem; - border: 5px solid blue; + } .projects-box { - border: 1px solid magenta; + background-color: #447270; grid-column-end: auto; - /* box-shadow: 7px 7px 0px 0px #f6B915; */ + box-shadow: 5px 5px 0px 0px #f6B915; padding: 10px; @@ -44,6 +80,8 @@ h1 { .chart-box { width: 80%; margin: auto; + padding-top: 10%; + padding-bottom: 10%; } From df9d3cdc4ec66ae5394ff86f9eea373f0a93fe15 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Fri, 1 Oct 2021 22:03:33 +0200 Subject: [PATCH 07/15] added grid to the profile --- code/index.html | 4 ++-- code/script.js | 6 ++++-- code/style.css | 19 ++++++++++++++----- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/code/index.html b/code/index.html index c50b4974..2d616a54 100644 --- a/code/index.html +++ b/code/index.html @@ -17,7 +17,7 @@

GitHub Tracker

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

My Technigo projects:

-
+
diff --git a/code/script.js b/code/script.js index 12adda5d..d086170c 100644 --- a/code/script.js +++ b/code/script.js @@ -15,7 +15,9 @@ const getProfile = () => { profileContainer.innerHTML = `
avatar picture -

Hello! I'm ${data.name}. This is my github tracker.

+
+
+

Hi! I'm ${data.name}. This is my github tracker.

Username: ${data.login}

@@ -39,7 +41,7 @@ const getRepos = () => {

${repo.name}

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

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

Number of commits:

diff --git a/code/style.css b/code/style.css index 7dea517f..1e4a093a 100644 --- a/code/style.css +++ b/code/style.css @@ -47,10 +47,20 @@ a:visited { opacity: 80%; } +#profile { + display: grid; + width: 70%; + margin: auto; + grid-template-columns: 1fr; + grid-gap: 1rem; + justify-items: center; + +} .profile-box { - grid-column: span 2; + border: 1px solid lime; + grid-column: span 1; } @@ -89,7 +99,7 @@ a:visited { - +/* tablet margin: 0% 10%; @@ -101,7 +111,7 @@ margin: 0% 15%; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); .chart-box -40% +40% */ /* COLORS #a14329 @@ -115,5 +125,4 @@ grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); #447270 #6B9493 -#f6e271 -#f6B915 */ + */ From c130660aab7d4a9c8f8358bde3992b4666ebf368 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sat, 2 Oct 2021 10:49:36 +0200 Subject: [PATCH 08/15] media querys and links --- code/TODO | 3 +++ code/index.html | 1 + code/script.js | 2 +- code/style.css | 72 ++++++++++++++++++++++++++++++++++++------------- 4 files changed, 59 insertions(+), 19 deletions(-) create mode 100644 code/TODO diff --git a/code/TODO b/code/TODO new file mode 100644 index 00000000..8bd4f1c0 --- /dev/null +++ b/code/TODO @@ -0,0 +1,3 @@ +media query chart +madia query projects +media query h1 h2 diff --git a/code/index.html b/code/index.html index 2d616a54..33c04200 100644 --- a/code/index.html +++ b/code/index.html @@ -33,6 +33,7 @@

My Technigo projects:

+ diff --git a/code/script.js b/code/script.js index d086170c..145b33eb 100644 --- a/code/script.js +++ b/code/script.js @@ -41,7 +41,7 @@ const getRepos = () => {

${repo.name}

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

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

Number of commits:

diff --git a/code/style.css b/code/style.css index 1e4a093a..a87c5232 100644 --- a/code/style.css +++ b/code/style.css @@ -2,6 +2,7 @@ body { background: #203c3b; font-family: 'Source Sans Pro', sans-serif; color:#ffffff; + padding: 0 2%; } h1 { @@ -19,49 +20,51 @@ h2{ } h3 { - font-size: 30px; + font-size: 25px; font-family: 'Source Sans Pro', sans-serif; - font-weight: 200; + font-weight: 300; color: #ffffff; } h4 { - font-size: 20px; + font-size: 30px; font-weight: 600; font-family: 'Source Sans Pro', sans-serif; color: #f6B915; + text-transform: capitalize; } a { color: #ffffff; text-decoration: none; + font-weight: 600; } a:hover { - color: #f6B915; + background-color: #6B9493 } a:visited { color: #ffffff; - opacity: 80%; + } #profile { display: grid; - width: 70%; - margin: auto; + margin-bottom: 10%; grid-template-columns: 1fr; grid-gap: 1rem; justify-items: center; + } .profile-box { - border: 1px solid lime; grid-column: span 1; + } .profile-box img { @@ -99,19 +102,52 @@ a:visited { -/* -tablet -margin: 0% 10%; +/* TABLET */ +@media (min-width: 768px) { + +h1 { + font-size: 70px; +} + +#projects { + margin: 0% 10%; +} + +.chart-box{ + width: 60%; +} + +} + + +/* SMALL SCREEN */ +@media (min-width: 992px) { + h1 { + font-size: 80px; + } + +#projects { + margin: 0% 15%; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + +} + +.chart-box { + width: 50%; +} + +} -.chart-box -60% +/* BIG SCREEN */ +@media (min-width: 1100px) { + + .chart-box { + width: 40%; + } + + } -@mediaq screen -margin: 0% 15%; -grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); -.chart-box -40% */ /* COLORS #a14329 From c9298ed46b24a00ff4dd5ac63e033a6448a0bf8e Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sun, 3 Oct 2021 10:26:52 +0200 Subject: [PATCH 09/15] cleaned code and wrote read me + font size on chart --- README.md | 12 ++++--- code/TODO | 3 -- code/chart.js | 15 ++++++++ code/index.html | 2 -- code/script.js | 9 ++--- code/style.css | 41 +++------------------ fromLesson.js | 94 ------------------------------------------------- maksScript.js | 75 --------------------------------------- 8 files changed, 30 insertions(+), 221 deletions(-) delete mode 100644 code/TODO delete mode 100644 fromLesson.js delete mode 100644 maksScript.js diff --git a/README.md b/README.md index 1613a3b0..b0cbb51b 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,16 @@ # GitHub Tracker -Replace this readme with your own information about your project. +## The problem -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The assignment was to built a github tracker, using API's to fetch informations about our Technigo projects. We needed to filter and find certain bits of the arrays to get the correct information. -## The problem +It has been a fun, but difficult project. To me, the lessons has been very useful. I can read the code and more or less understand it, but I have a hard time coming up with the correct solutions on my own. +I followed dthe lessons and then implemented what I had learned in my on code. I always rewrote the code (I didn't copy paste) in order to grasp what I was doing. +I coded togehter with my team several times, it was great. + +I focused on getting all the js/chart in place first, and then went on with tha styling. It was more challenging than I thought, but by asking my team and looking at stack overflow I think it went well! -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? +If I had more time I would look into the red and black requirements. And add a footer with som contact info. ## View it live diff --git a/code/TODO b/code/TODO deleted file mode 100644 index 8bd4f1c0..00000000 --- a/code/TODO +++ /dev/null @@ -1,3 +0,0 @@ -media query chart -madia query projects -media query h1 h2 diff --git a/code/chart.js b/code/chart.js index f7ad7948..facf3bee 100644 --- a/code/chart.js +++ b/code/chart.js @@ -23,6 +23,21 @@ const config = { hoverOffset: 4 }] }, + + // Changeing the fontsize + options: { + plugins: { + legend: { + position: "bottom", + labels: { + font: { + size: 20, + }, + }, + }, + }, + }, + }; diff --git a/code/index.html b/code/index.html index 33c04200..288fe94a 100644 --- a/code/index.html +++ b/code/index.html @@ -21,10 +21,8 @@

GitHub Tracker

-

My Technigo projects:

-
diff --git a/code/script.js b/code/script.js index 145b33eb..597ac3e0 100644 --- a/code/script.js +++ b/code/script.js @@ -11,7 +11,6 @@ const getProfile = () => { fetch(USER_URL) .then((res) => res.json()) .then((data) => { - console.log('ME DATA', data) profileContainer.innerHTML = `
avatar picture @@ -30,7 +29,7 @@ const getRepos = () => { .then((res) => res.json()) .then((data) => { - data.forEach (repo => console.log(repo.name)) + // data.forEach (repo => console.log(repo.name)) const forkedRepos = data.filter( (repo) => repo.name.includes('project-') && repo.fork @@ -62,12 +61,9 @@ const fetchPullRequestsArray = (allRepos) => { fetch(PULL_URL) .then ((res) => res.json()) - .then((data) => { - console.log(`mama repo of ${repo.name}`, data); - + .then((data) => { const userPullRequest = data.find( (pull) => pull.user.login === repo.owner.login); - console.log('MIN MACKA', userPullRequest) if (userPullRequest) { fetchCommits(userPullRequest.commits_url, repo.name); @@ -78,6 +74,7 @@ const fetchPullRequestsArray = (allRepos) => { }); }); }; + const fetchCommits = (myCommitsUrl, MyRepoName) => { fetch(myCommitsUrl) .then((res) => res.json()) diff --git a/code/style.css b/code/style.css index a87c5232..bd97ef94 100644 --- a/code/style.css +++ b/code/style.css @@ -25,6 +25,7 @@ h3 { font-weight: 300; color: #ffffff; } + h4 { font-size: 30px; font-weight: 600; @@ -37,39 +38,30 @@ a { color: #ffffff; text-decoration: none; font-weight: 600; - } a:hover { background-color: #6B9493 - } a:visited { color: #ffffff; - - } + #profile { display: grid; margin-bottom: 10%; grid-template-columns: 1fr; grid-gap: 1rem; justify-items: center; - - } - .profile-box { grid-column: span 1; - - } .profile-box img { border-radius: 50%; - } #projects { @@ -78,7 +70,6 @@ a:visited { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 1rem; row-gap: 1rem; - } .projects-box { @@ -86,8 +77,6 @@ a:visited { grid-column-end: auto; box-shadow: 5px 5px 0px 0px #f6B915; padding: 10px; - - } .chart-box { @@ -95,13 +84,9 @@ a:visited { margin: auto; padding-top: 10%; padding-bottom: 10%; - - } - - /* TABLET */ @media (min-width: 768px) { @@ -119,7 +104,6 @@ h1 { } - /* SMALL SCREEN */ @media (min-width: 992px) { h1 { @@ -129,7 +113,6 @@ h1 { #projects { margin: 0% 15%; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - } .chart-box { @@ -138,27 +121,11 @@ h1 { } + /* BIG SCREEN */ @media (min-width: 1100px) { .chart-box { width: 40%; } - - } - - - -/* COLORS -#a14329 -#bb9236 -#a3b4a4 -#3c4e5c -#120c1e */ - -/* COLORS 2 -#203c3b -#447270 -#6B9493 - - */ +} \ No newline at end of file diff --git a/fromLesson.js b/fromLesson.js deleted file mode 100644 index 6d2c536b..00000000 --- a/fromLesson.js +++ /dev/null @@ -1,94 +0,0 @@ -const options = { - method: 'GET', - headers: { - Authorization: `token ${token}` - } -} - - -const USER = 'hejmaria' -const REPOS_URL = `http://api.github.com/users/${USER}/repos` - -const projectContainer = document.getElementById('projects'); - - -const fetchRepositories = () => { - fetch (REPOS_URL, options) //only for the lecture OPTIONS - .then (res => res.json()) - .then(data => { - console.log(data) - const technigoRepo = data.filter( - (repo) => repo.name.includes('project-') && repo.fork - ); - - technigoRepo.forEach(repo => {(repo) => { - projectContainer.innerHTML += ` -
- ${repo.name} with defalut branch ${repo.default_branch} -

Recent push: ${new Date()}

- -

${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(); From 82fd13741cae08168683605442d0eef3f36db166 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sun, 3 Oct 2021 11:06:13 +0200 Subject: [PATCH 10/15] sorting function --- code/script.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/code/script.js b/code/script.js index 597ac3e0..d7c5af42 100644 --- a/code/script.js +++ b/code/script.js @@ -1,12 +1,14 @@ +/// All API:S /// const USER = 'hejmaria' const REPOS_URL = `http://api.github.com/users/${USER}/repos`; const USER_URL = `http://api.github.com/users/${USER}`; - +/// All DOM selectors /// const projectContainer = document.getElementById('projects'); const profileContainer = document.getElementById('profile'); +/// Fetching the user proile /// const getProfile = () => { fetch(USER_URL) .then((res) => res.json()) @@ -24,6 +26,7 @@ const getProfile = () => { }) } +/// Fetching the repos /// const getRepos = () => { fetch(REPOS_URL) .then((res) => res.json()) @@ -35,9 +38,14 @@ const getRepos = () => { (repo) => repo.name.includes('project-') && repo.fork ); + /// Sort the projects /// + forkedRepos.sort( + (a, b) => new Date(b.created_at) - new Date(a.created_at) + ); + + /// Putting the projects info into the html /// forkedRepos.forEach((repo) => { projectContainer.innerHTML += ` -

${repo.name}

The project with default branch: ${repo.default_branch}. @@ -46,19 +54,21 @@ const getRepos = () => {
`; }); - + fetchPullRequestsArray(forkedRepos); drawChart(forkedRepos.length); - - }); }; + +/// Fetching the pull requests /// const fetchPullRequestsArray = (allRepos) => { allRepos.forEach((repo) => { const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + /// Sorting pullrequests and commits /// fetch(PULL_URL) .then ((res) => res.json()) .then((data) => { @@ -75,6 +85,7 @@ const fetchPullRequestsArray = (allRepos) => { }); }; +/// Fetching the commits /// const fetchCommits = (myCommitsUrl, MyRepoName) => { fetch(myCommitsUrl) .then((res) => res.json()) @@ -83,5 +94,6 @@ const fetchCommits = (myCommitsUrl, MyRepoName) => { }); }; + getProfile() getRepos() \ No newline at end of file From 1ee4a29b7ff5355baa3813a4260fc5cb1176936a Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sun, 3 Oct 2021 11:25:25 +0200 Subject: [PATCH 11/15] link to netlify and tiny css change --- README.md | 15 +++++++-------- code/style.css | 6 +++--- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b0cbb51b..d7d2ab0a 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,15 @@ ## The problem -The assignment was to built a github tracker, using API's to fetch informations about our Technigo projects. We needed to filter and find certain bits of the arrays to get the correct information. +The assignment was to build a GitHub tracker, using APIs to fetch information about our Technigo projects. We needed to filter and find certain bits of the arrays to get the correct information. -It has been a fun, but difficult project. To me, the lessons has been very useful. I can read the code and more or less understand it, but I have a hard time coming up with the correct solutions on my own. -I followed dthe lessons and then implemented what I had learned in my on code. I always rewrote the code (I didn't copy paste) in order to grasp what I was doing. -I coded togehter with my team several times, it was great. +It has been a fun, but difficult project. To me, the lessons have been very useful. I can read the code and more or less understand it, but I have a hard time coming up with the correct solutions on my own. +I followed the lessons and then implemented what I had learned in my own code. I always rewrote the code (I didn't copy-paste) in order to grasp what I was doing. +I coded together with my team several times, it was great. -I focused on getting all the js/chart in place first, and then went on with tha styling. It was more challenging than I thought, but by asking my team and looking at stack overflow I think it went well! +I focused on getting all the js/chart in place first, and then went on with the styling. It was more challenging than I thought, but by asking my team and looking at stack overflow I think it went well! -If I had more time I would look into the red and black requirements. And add a footer with som contact info. +If I had more time I would look into the red and black requirements. And add a footer with some contact info. ## 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://friendly-pike-d9b647.netlify.app \ No newline at end of file diff --git a/code/style.css b/code/style.css index bd97ef94..840bc82c 100644 --- a/code/style.css +++ b/code/style.css @@ -87,7 +87,7 @@ a:visited { } -/* TABLET */ +/* Responsiveness TABLET */ @media (min-width: 768px) { h1 { @@ -104,7 +104,7 @@ h1 { } -/* SMALL SCREEN */ +/* Responsiveness SMALL SCREEN */ @media (min-width: 992px) { h1 { font-size: 80px; @@ -122,7 +122,7 @@ h1 { } -/* BIG SCREEN */ +/* Responsiveness BIG SCREEN */ @media (min-width: 1100px) { .chart-box { From d1b57442baa9ccf9841e852a269221f9a81cd83d Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sun, 3 Oct 2021 12:02:53 +0200 Subject: [PATCH 12/15] changed http to https to make deployed site work --- code/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index d7c5af42..592c142d 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,7 @@ /// All API:S /// const USER = 'hejmaria' -const REPOS_URL = `http://api.github.com/users/${USER}/repos`; -const USER_URL = `http://api.github.com/users/${USER}`; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const USER_URL = `https://api.github.com/users/${USER}`; /// All DOM selectors /// const projectContainer = document.getElementById('projects'); From edba161a08571c380824e86aa775f7cb1b88dd18 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sun, 3 Oct 2021 13:39:14 +0200 Subject: [PATCH 13/15] overflow hidden --- code/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/code/style.css b/code/style.css index 840bc82c..d778743a 100644 --- a/code/style.css +++ b/code/style.css @@ -3,6 +3,7 @@ body { font-family: 'Source Sans Pro', sans-serif; color:#ffffff; padding: 0 2%; + content-overflow: hidden; } h1 { From 31cc1bc52868684ada95631ddf3bd60d005d3c37 Mon Sep 17 00:00:00 2001 From: Maria Petersson Date: Sun, 3 Oct 2021 14:15:25 +0200 Subject: [PATCH 14/15] more media querys --- code/style.css | 38 +++++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/code/style.css b/code/style.css index d778743a..66a8ea55 100644 --- a/code/style.css +++ b/code/style.css @@ -3,7 +3,7 @@ body { font-family: 'Source Sans Pro', sans-serif; color:#ffffff; padding: 0 2%; - content-overflow: hidden; + } h1 { @@ -14,7 +14,7 @@ h1 { } h2{ - font-size: 40px; + font-size: 35px; font-family: 'Fredoka One', cursive; color: #ffffff; opacity: 80%; @@ -63,12 +63,14 @@ a:visited { .profile-box img { border-radius: 50%; + object-fit: contain; + width: 300px; } #projects { display: grid; - margin: 0% 5%; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + margin: 0% 2%; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: 1rem; row-gap: 1rem; } @@ -77,7 +79,7 @@ a:visited { background-color: #447270; grid-column-end: auto; box-shadow: 5px 5px 0px 0px #f6B915; - padding: 10px; + padding: 8px; } .chart-box { @@ -88,6 +90,24 @@ a:visited { } +/* Responsiveness LARGER PHONE */ +@media (min-width: 400px) { + +h2{ + font-size: 40px; +} + +#projects { + margin: 0% 5%; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.projects-box { + padding: 10px; +} +} + + /* Responsiveness TABLET */ @media (min-width: 768px) { @@ -99,6 +119,10 @@ h1 { margin: 0% 10%; } +.profile-box img { + width: 400px; +} + .chart-box{ width: 60%; } @@ -116,6 +140,10 @@ h1 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } +.profile-box img { + width: 480px; +} + .chart-box { width: 50%; } From 73f0f695f410c960adf28a8d50dd0c1f37b09203 Mon Sep 17 00:00:00 2001 From: Maria Petersson <81552130+hejmaria@users.noreply.github.com> Date: Mon, 16 May 2022 21:25:33 +0200 Subject: [PATCH 15/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d7d2ab0a..67ea39b2 100644 --- a/README.md +++ b/README.md @@ -13,4 +13,4 @@ I focused on getting all the js/chart in place first, and then went on with the If I had more time I would look into the red and black requirements. And add a footer with some contact info. ## View it live -https://friendly-pike-d9b647.netlify.app \ No newline at end of file +https://github-tracker-maria.netlify.app/