From 0c7fbeb86b3caebd38b16535b6ce14a64d564093 Mon Sep 17 00:00:00 2001 From: Ida Halling Date: Fri, 25 Feb 2022 13:31:17 +0100 Subject: [PATCH 1/4] everything at ones --- .gitignore | 26 +++++++++ code/chart.js | 65 +++++++++++++++++++++- code/index.html | 30 ++++++++-- code/script.js | 142 ++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 109 ++++++++++++++++++++++++++++++++++++- 5 files changed, 362 insertions(+), 10 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..2f3ca25c --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +// .gitignore file code/secret.js + +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +​ +​ +# Ignore Mac system files +.DS_store +​ +# Ignore node_modules folder +node_modules +​ +# Ignore all text files +*.txt +​ +# Ignore files related to API keys +.env +​ +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* +​ +# other +code/secret.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..5f4db5a4 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,63 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('myChart').getContext('2d') -//"Draw" the chart here 👇 + +const drawChart = (amount) => { +const labels = [ +'Completet projects', +'Projects left' +]; + +const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['rgb(105, 137, 175)','rgb(250, 245, 205)'], + borderColor: 'rgb(238, 226, 185)', + data: [amount, 19 - amount], + }] +}; + +const config = { + type: 'doughnut', + data: data, + options: {} +}; + + +const myChart = new Chart( + ctx,config) +} + +// //DOM-selector for the canvas 👇 +// const ctx = document.getElementById('chart').getContext('2d') + +// //"Draw" the chart here 👇 +// //https://www.chartjs.org/docs/latest/getting-started/ + +// const drawChart = (amount) => { + +// const labels = [ +// 'Finished projects', +// 'Projects left', +// ] + +// const data = { +// labels: labels, +// datasets: [{ +// label: 'My First dataset', +// backgroundColor: ['rgb(255, 99, 132)', 'rgb(90, 50, 132)'], +// borderColor: 'rgb(255, 99, 132)', +// data: [amount, 19 - amount], +// }] +// } + + +// } +// const config = { +// type: 'doughnut', +// data: data, +// options: options + +// } + +// const myChart = new Chart(ctx,config) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..6380b00a 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,34 @@ Project GitHub Tracker + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+
+ + + +
+ + + +
+
+
- +
+ +
- + + + + + - \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..8bc665c9 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,142 @@ +const username = 'id4h4lling' +let reponame = '' + +const API_GIT_URL = `https://api.github.com/users/${username}/repos` +const API_GIT_USER = `https://api.github.com/users/${username}` //Maybe use to get picture? + +const userInfo = document.getElementById('userInfo') +const projects = document.getElementById('projects') + + + +const options = { + method: 'GET', + // headers: { + // Authorization: `token ${API_TOKEN}` + // } +} + +fetch (API_GIT_USER, options) + .then(res => res.json()) + .then(user => { + console.log(user) + userInfo.innerHTML += ` +
+ +

${username}

${user.name}

+

${user.bio}

+ +
+ ` + }) + + +//fetch user and repos a function sabbotage the whole api? +const getRepos = () =>{ + +fetch (API_GIT_URL, options) + .then(res => res.json()) + .then(data => { + console.log(data) + console.log(username) + + //collect user data from fetch here and put in a function below somehow + // userInfo.innerHTML += ` + //

${username}

repo.fork && repo.name.startsWith("project-")) + console.log(forkedRepos) + + // //filter out and only show the forked ones + // let forkedRepos = data.filter(element => element.fork === true) + // console.log(forkedRepos) + // //filter out Technigo projects + // let projects = data.filter(project => project.name.startsWith('project')) + // console.log(projects) + + forkedRepos.forEach((repo) => { + projects.innerHTML+= + `
+ +

${repo.name}

+

Default branch: ${repo.default_branch}

+

Commits amount: ??

+

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

+ +
` + }) + + fetchPullRequests(forkedRepos) + + drawChart(forkedRepos.length) + }) +} + getRepos() + + +const fetchPullRequests = (repos) => { + + repos.forEach((repo => { + fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then(res => res.json()) + .then(data => + { + const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) + console.log('my pull requests:', myPullRequests) + // console.log(myPullRequests[0].commits.url) + + + if (myPullRequests.length>0) { + + fetchCommits(myPullRequests.commit_url, repo.name) + + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + `No pull request or commits done` + } + }) + }) + )} + +//how does this work? +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + console.log(`${data.length}`) + }) +} + + + + +// const getRepos = () =>{ +// fetch (USER_INFO_URL, options) +// .then(res => res.json()) +// .then(data => { +// const getRepositories = data.filter( +// (repo) => repo.name.includes('project-') && repo.fork +// ) +// getRepositories.forEach((repo) => { +// projects.innerHTML += + + + +// }) +// console.log(data) +// projects.innerHTML += ` +// ${data[11].name} +// ` +// } + +// const API_REPO = `https://api.github.com/repos/Technigo/${reponame}/pulls` +// // 'https://api.github.com/repos/technigo/' + repo.name + '/pulls' samma som ovan? + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..920281ed 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,110 @@ body { - background: #FFECE9; + background: rgb(238, 226, 185); +} + +.title { + font-size: 20px; + text-align: center; + padding: 30px 0px 0px 0px; + color: rgb(255, 255, 255); +} + +h2 { + font-size: 30px; +} + +p { + font-size: 20px; +} + +.header{ + display: flex; + justify-content: center; +} + +.profile-img { + width: 300px; + height: 300px; + border-radius: 50%; +} + +.main-container { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 2px; + +} + +.user-info { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + margin: 0px; + padding-top: 20px; + color: white; +} + + +.projects{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + column-gap: 1rem; + row-gap: 1rem; + margin: 30px 0px 30px 0px; +} + +.card { + background: rgb(240, 240, 240); + text-align:center; + padding: 1.5rem; + box-shadow: 0 0.1rem 1.2rem rgba(22, 23, 23, 0.2); + transform: translateY(0); + position: relative; + padding: 5px, 10px, 5px, 30px; + margin: 10px; + /* border: solid 2px rgb(187, 206, 241); */ + border-radius: 5px; +} + +a { + color: rgb(105, 137, 175); +} + +a:hover { + color: pink; +} + +.my-chart{ + display: grid; + grid-column: span 6; + justify-items: center; + margin: 5% auto; + width: 500px; +} + +/* ---------- media queries desktop ---------- */ + +@media (min-width: 1025px) { + .user-info { + display: flex; + flex-direction: column; + justify-content: center; + } + + .projects { + grid-template-columns: repeat(auto-fit, minmax(400px, 2fr)); + max-width: 80%; + align-self: center; + margin-top: 60px; + } + + .my-chart{ + margin: 5% auto; + width: 700px; + } + } \ No newline at end of file From ea38fe446c2035d83c334461a1b948c700043f59 Mon Sep 17 00:00:00 2001 From: Ida Halling Date: Fri, 25 Feb 2022 14:59:01 +0100 Subject: [PATCH 2/4] read me --- README.md | 9 +++-- code/script.js | 96 ++++++++++++++------------------------------------ 2 files changed, 31 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..40a9bdfb 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ # 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. +Create a tracker for my progress as a student at Technigo bootcamp. ## 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 with getting the fetches, trying to remember everything from last weeks project. Hade some trouble with (a lot) but "small things" like remembering to pass along the filtered repos and calling functions. This project was intense but I pulled through (pun intended). +With more time I would tried harder to get the token to work. And as always more time on styling. ## 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. + diff --git a/code/script.js b/code/script.js index 8bc665c9..136fc7ca 100644 --- a/code/script.js +++ b/code/script.js @@ -2,20 +2,21 @@ const username = 'id4h4lling' let reponame = '' const API_GIT_URL = `https://api.github.com/users/${username}/repos` -const API_GIT_USER = `https://api.github.com/users/${username}` //Maybe use to get picture? +const API_GIT_USER = `https://api.github.com/users/${username}` //to get a hold of profilepicture const userInfo = document.getElementById('userInfo') const projects = document.getElementById('projects') - +// paus for now, try token another time. const options = { method: 'GET', - // headers: { - // Authorization: `token ${API_TOKEN}` - // } + headers: { + // Authorization: `token ${API_TOKEN}` + } } +//User info fetch (API_GIT_USER, options) .then(res => res.json()) .then(user => { @@ -26,47 +27,31 @@ fetch (API_GIT_USER, options)

${username}

${user.name}

${user.bio}

- ` }) -//fetch user and repos a function sabbotage the whole api? +//fetch repos const getRepos = () =>{ fetch (API_GIT_URL, options) .then(res => res.json()) .then(data => { console.log(data) - console.log(username) - - //collect user data from fetch here and put in a function below somehow - // userInfo.innerHTML += ` - //

${username}

repo.fork && repo.name.startsWith("project-")) console.log(forkedRepos) - // //filter out and only show the forked ones - // let forkedRepos = data.filter(element => element.fork === true) - // console.log(forkedRepos) - // //filter out Technigo projects - // let projects = data.filter(project => project.name.startsWith('project')) - // console.log(projects) - forkedRepos.forEach((repo) => { projects.innerHTML+= - `
- + `

${repo.name}

Default branch: ${repo.default_branch}

-

Commits amount: ??

-

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

- -
` +

Commits Done:

+

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

+
` }) fetchPullRequests(forkedRepos) @@ -84,59 +69,32 @@ const fetchPullRequests = (repos) => { .then(res => res.json()) .then(data => { - const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) - console.log('my pull requests:', myPullRequests) - // console.log(myPullRequests[0].commits.url) - - - if (myPullRequests.length>0) { - - fetchCommits(myPullRequests.commit_url, repo.name) + //filter out pr + const pulls = data.find((pull) => pull.user.login === repo.owner.login); - } else { - document.getElementById(`commit-${repo.name}`).innerHTML = - `No pull request or commits done` - } + if (pulls) { + fetchCommits(pulls.commits_url, repo.name) + } + else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'Commits Done: (Pull request unavailable)' + } }) }) )} -//how does this work? const fetchCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) - .then((res) => res.json()) + fetch(myCommitsUrl, options) + .then((res) => { + return res.json() + }) .then((data) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length - console.log(`${data.length}`) + console.log("data", data) }) } - - -// const getRepos = () =>{ -// fetch (USER_INFO_URL, options) -// .then(res => res.json()) -// .then(data => { -// const getRepositories = data.filter( -// (repo) => repo.name.includes('project-') && repo.fork -// ) -// getRepositories.forEach((repo) => { -// projects.innerHTML += - - - -// }) -// console.log(data) -// projects.innerHTML += ` -// ${data[11].name} -// ` -// } - -// const API_REPO = `https://api.github.com/repos/Technigo/${reponame}/pulls` -// // 'https://api.github.com/repos/technigo/' + repo.name + '/pulls' samma som ovan? - - From 537380a9907dc86c5cd54448d48941a1326cd320 Mon Sep 17 00:00:00 2001 From: Ida Halling Date: Fri, 25 Feb 2022 15:15:20 +0100 Subject: [PATCH 3/4] your commit message --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 40a9bdfb..5bd8778f 100644 --- a/README.md +++ b/README.md @@ -8,5 +8,5 @@ I started with getting the fetches, trying to remember everything from last week With more time I would tried harder to get the token to work. And as always more time on styling. ## View it live - +https://id4h4lling.netlify.app/ From 511436641999ce8e4f306c1e1fa0e53ff6af1879 Mon Sep 17 00:00:00 2001 From: Ida Halling Date: Fri, 25 Feb 2022 19:32:27 +0100 Subject: [PATCH 4/4] styling --- README.md | 4 ++-- code/chart.js | 35 ----------------------------------- code/index.html | 5 ++--- code/script.js | 3 +-- code/style.css | 9 +++++---- 5 files changed, 10 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 5bd8778f..ec617caf 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ Create a tracker for my progress as a student at Technigo bootcamp. ## The problem -I started with getting the fetches, trying to remember everything from last weeks project. Hade some trouble with (a lot) but "small things" like remembering to pass along the filtered repos and calling functions. This project was intense but I pulled through (pun intended). -With more time I would tried harder to get the token to work. And as always more time on styling. +I started with getting the fetches, trying to remember everything from last weeks project. Had some trouble with (a lot) but "small things" like remembering to pass along the filtered repos and calling functions. This project was intense but I pulled through (pun intended). +With more time I would try harder to get the token to work. And as always more time on styling. ## View it live https://id4h4lling.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 5f4db5a4..9b5d38a0 100644 --- a/code/chart.js +++ b/code/chart.js @@ -23,41 +23,6 @@ const config = { options: {} }; - const myChart = new Chart( ctx,config) } - -// //DOM-selector for the canvas 👇 -// const ctx = document.getElementById('chart').getContext('2d') - -// //"Draw" the chart here 👇 -// //https://www.chartjs.org/docs/latest/getting-started/ - -// const drawChart = (amount) => { - -// const labels = [ -// 'Finished projects', -// 'Projects left', -// ] - -// const data = { -// labels: labels, -// datasets: [{ -// label: 'My First dataset', -// backgroundColor: ['rgb(255, 99, 132)', 'rgb(90, 50, 132)'], -// borderColor: 'rgb(255, 99, 132)', -// data: [amount, 19 - amount], -// }] -// } - - -// } -// const config = { -// type: 'doughnut', -// data: data, -// options: options - -// } - -// const myChart = new Chart(ctx,config) diff --git a/code/index.html b/code/index.html index 6380b00a..cb4085b0 100644 --- a/code/index.html +++ b/code/index.html @@ -7,6 +7,8 @@ Project GitHub Tracker + +
@@ -28,9 +30,6 @@

GitHub Tracker

- - - diff --git a/code/script.js b/code/script.js index 136fc7ca..7ec11268 100644 --- a/code/script.js +++ b/code/script.js @@ -24,8 +24,7 @@ fetch (API_GIT_USER, options) userInfo.innerHTML += ` ` diff --git a/code/style.css b/code/style.css index 920281ed..676c19f8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,6 @@ body { background: rgb(238, 226, 185); + font-family: Roboto; } .title { @@ -26,6 +27,8 @@ p { width: 300px; height: 300px; border-radius: 50%; + align-self: center; + } .main-container { @@ -41,25 +44,23 @@ p { .user-info { display: flex; flex-direction: column; - justify-content: center; text-align: center; margin: 0px; padding-top: 20px; color: white; } - .projects{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 1rem; row-gap: 1rem; - margin: 30px 0px 30px 0px; + margin: 30px 0px 50px 0px; } .card { background: rgb(240, 240, 240); - text-align:center; + text-align:left; padding: 1.5rem; box-shadow: 0 0.1rem 1.2rem rgba(22, 23, 23, 0.2); transform: translateY(0);