From 2ecf92fecc3a8d3c80fe71b9407b1d520d252cbc Mon Sep 17 00:00:00 2001 From: vanhaj Date: Thu, 24 Feb 2022 09:11:15 +0100 Subject: [PATCH 1/4] first step --- code/script.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..efb4ae77 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,24 @@ +const username = 'vanhaj'; +const projects = document.getElementById('projects'); +// let reponame; +const API_URL = `https://api.github.com/users/${username}/repos`; + +fetch(API_URL) + .then((res) => res.json()) + .then((data) => { + console.log(data); + + reponame = data[2].name; + + const API_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; + + fetch(API_PR) + .then((res) => res.json()) + .then((data) => { + console.log(data); + + let hej = `

${username} +

${reponame}

`; + return (projects.innerHTML = hej); + }); + }); From 8daaa504b9b5548e01575ea3e4c3a187e663d448 Mon Sep 17 00:00:00 2001 From: vanhaj Date: Sun, 27 Feb 2022 17:25:32 +0100 Subject: [PATCH 2/4] site without styling --- .gitignore | 1 + code/chart.js | 26 +++++++++++- code/index.html | 48 +++++++++++++-------- code/script.js | 110 ++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 153 insertions(+), 32 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c80900c9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..b63e828b 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,28 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 + +const labels = ['January', 'February', 'March', 'April', 'May', 'June']; + +const data = { + labels: labels, + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgb(255, 99, 132)', + borderColor: 'rgb(255, 99, 132)', + data: [0, 10, 5, 2, 20, 30, 45], + }, + ], +}; + +const config = { + type: 'doughnut', + data: data, + options: {}, +}; + +const chart = new Chart(ctx, config); + +//const myChart = new Chart(document.getElementById('chart'), config); diff --git a/code/index.html b/code/index.html index 2fb5e0ae..6ace6a3d 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,35 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + +
+
+
+
+ +
+
- - +
+
+
- - - - \ No newline at end of file +

GitHub Tracker

+

Projects:

+
+ + + + + + + + + diff --git a/code/script.js b/code/script.js index efb4ae77..c1a76ccb 100644 --- a/code/script.js +++ b/code/script.js @@ -1,24 +1,106 @@ -const username = 'vanhaj'; -const projects = document.getElementById('projects'); +const username = 'vanhaj', + API_USER = `https://api.github.com/users/${username}`, + API_URL = `https://api.github.com/users/${username}/repos`, + userDisplay = document.getElementById('userDisplay'), + projects = document.getElementById('projects'); // let reponame; -const API_URL = `https://api.github.com/users/${username}/repos`; -fetch(API_URL) - .then((res) => res.json()) - .then((data) => { - console.log(data); +// token +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}`, + }, +}; +console.log(API_TOKEN); - reponame = data[2].name; +// username and profile picture +const myProfile = () => { + fetch(API_USER, options) + .then((res) => res.json()) + .then((data) => { + console.log(data, 'min user'); - const API_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; + userDisplay.innerHTML += ` + image of user +

${data.login}

+ `; + }); +}; +myProfile(); - fetch(API_PR) +// repositories +const myRepos = () => { + fetch(API_URL, options) + .then((res) => res.json()) + .then((data) => { + console.log(data, 'without filter'); + + //filtering out only those that starts with projects + const filteredProject = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ); + console.log(filteredProject, 'my repos'); + + // img code here? + filteredProject.forEach((repo) => { + console.log(repo.name, 'hejhej'); + projects.innerHTML += ` +

name of my repo: ${repo.name}

 +

Default branch: ${repo.default_branch}

+

Last push: ${new Date(repo.pushed_at).toLocaleString()} +

Number of commits:

+ `; + }); + + getPullRequests(filteredProject); + drawChart(forkedRepos.length); + }); +}; + +//fetches 100 pulls +const getPullRequests = (filteredProject) => { + //Get all the PRs for each project + filteredProject.forEach((repo) => { + fetch( + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, + options + ) .then((res) => res.json()) .then((data) => { - console.log(data); + const myPS = data.find((pull) => pull.user.login === repo.owner.login); - let hej = `

${username} -

${reponame}

`; - return (projects.innerHTML = hej); + // console.log(repo.name, 'detta'); + + // if PS was made by user -> getting the commits (getCommits) + if (myPS) { + getCommits(myPS.commits_url, repo.name); + } else { + document.getElementById( + (`${repo.name}`.innerHTML += 'No pull request was done by the user') + ); + } + // const myCommits = myPS.commits_url; + // const myRepoName = repo.name; + // getCommits(myCommits, myRepoName); + // console.log(data, 'is this working'); }); }); +}; + +// Getting the commits +const getCommits = (myCommits, myRepoName) => { + fetch(myCommits) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`${myRepoName}`).innerHTML += data.length; + //`Number of commits: ${data.length}`; + // console.log('nu då?'); + }); +}; + +myRepos(); +//------ + +// if you have time, get the comments +// also dont forget the token step when deploying to netlify From 1d5e64550524b93d2652b4c7056dba6abdc83b0a Mon Sep 17 00:00:00 2001 From: vanhaj Date: Sun, 27 Feb 2022 22:40:44 +0100 Subject: [PATCH 3/4] added styling --- code/chart.js | 36 ++++++++++------------ code/index.html | 19 ++++++------ code/script.js | 52 +++++++++++++------------------- code/style.css | 79 +++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 123 insertions(+), 63 deletions(-) diff --git a/code/chart.js b/code/chart.js index b63e828b..b27061fb 100644 --- a/code/chart.js +++ b/code/chart.js @@ -3,26 +3,22 @@ const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 -const labels = ['January', 'February', 'March', 'April', 'May', 'June']; - -const data = { - labels: labels, - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgb(255, 99, 132)', - data: [0, 10, 5, 2, 20, 30, 45], +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: ['My completed projects', 'Projects left to do'], + datasets: [ + { + label: 'Dataset', + data: [amount, 19 - amount], + backgroundColor: ['#ddbea9', '#b7b7a4'], + borderColor: '#22223b', + }, + ], }, - ], -}; - -const config = { - type: 'doughnut', - data: data, - options: {}, + }; + const myChart = new Chart(document.getElementById('chart'), config); }; -const chart = new Chart(ctx, config); - -//const myChart = new Chart(document.getElementById('chart'), config); +// const chart = new Chart(ctx, config); diff --git a/code/index.html b/code/index.html index 6ace6a3d..1052165e 100644 --- a/code/index.html +++ b/code/index.html @@ -9,24 +9,23 @@ -
-
-
-
-
- -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+

Projects:

+
- +
+ +
+ +
diff --git a/code/script.js b/code/script.js index c1a76ccb..d70c92b6 100644 --- a/code/script.js +++ b/code/script.js @@ -3,7 +3,6 @@ const username = 'vanhaj', API_URL = `https://api.github.com/users/${username}/repos`, userDisplay = document.getElementById('userDisplay'), projects = document.getElementById('projects'); -// let reponame; // token const options = { @@ -12,18 +11,19 @@ const options = { Authorization: `token ${API_TOKEN}`, }, }; -console.log(API_TOKEN); // username and profile picture const myProfile = () => { fetch(API_USER, options) .then((res) => res.json()) .then((data) => { - console.log(data, 'min user'); - userDisplay.innerHTML += ` - image of user -

${data.login}

+
+ image of user + +
`; }); }; @@ -38,52 +38,46 @@ const myRepos = () => { //filtering out only those that starts with projects const filteredProject = data.filter( - (repo) => repo.fork && repo.name.startsWith('project-') + (repo) => repo.fork && repo.name.startsWith('project') ); - console.log(filteredProject, 'my repos'); - // img code here? filteredProject.forEach((repo) => { - console.log(repo.name, 'hejhej'); projects.innerHTML += ` -

name of my repo: ${repo.name}

 -

Default branch: ${repo.default_branch}

-

Last push: ${new Date(repo.pushed_at).toLocaleString()} -

Number of commits:

+
+ +

Repo name: ${repo.name}

+ +

Default branch: ${repo.default_branch}

+

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

Number of commits:

+
`; }); getPullRequests(filteredProject); - drawChart(forkedRepos.length); + drawChart(filteredProject.length); }); }; //fetches 100 pulls -const getPullRequests = (filteredProject) => { +const getPullRequests = (repos) => { //Get all the PRs for each project - filteredProject.forEach((repo) => { + repos.forEach((repo) => { fetch( - `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, - options + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` ) .then((res) => res.json()) .then((data) => { const myPS = data.find((pull) => pull.user.login === repo.owner.login); - // console.log(repo.name, 'detta'); - // if PS was made by user -> getting the commits (getCommits) if (myPS) { getCommits(myPS.commits_url, repo.name); } else { document.getElementById( - (`${repo.name}`.innerHTML += 'No pull request was done by the user') - ); + `${repo.name}` + ).innerHTML = `No pull request was done`; } - // const myCommits = myPS.commits_url; - // const myRepoName = repo.name; - // getCommits(myCommits, myRepoName); - // console.log(data, 'is this working'); }); }); }; @@ -100,7 +94,3 @@ const getCommits = (myCommits, myRepoName) => { }; myRepos(); -//------ - -// if you have time, get the comments -// also dont forget the token step when deploying to netlify diff --git a/code/style.css b/code/style.css index 7c8ad447..5aea16bd 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,78 @@ +/* * { +} */ + body { - background: #FFECE9; -} \ No newline at end of file + background: #edede9; + font-family: 'Times New Roman', Times, serif; +} + +.profile { + display: flex; + flex-direction: column; + align-items: center; +} + +.user-img { + border-radius: 50%; + width: 200px; +} + +/* .user-info { +} */ + +a { + color: rgb(0, 0, 0); + text-decoration: none; + font-size: 20px; +} + +a:hover { + color: rgb(161, 138, 114); +} + +.header { + display: grid; + justify-items: center; +} + +h1 { + margin-bottom: 0px; +} + +h2 { + margin-top: 10px; +} + +.chart { + height: 300px; + width: 300px; + margin: auto; +} + +.repo-card { + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: #ffe8d6; + border-radius: 10px; + width: 300px; + margin: auto; + margin-top: 20px; + border-style: solid; +} + +/* tablet */ +@media (min-width: 426px, max-width: 768px) { + .projects { + display: flex; + flex-wrap: wrap; + } +} + +/* desktop */ +@media (min-width: 769px) { + .projects { + display: flex; + flex-wrap: wrap; + } +} From f7e3d18ab3eedac6aa48da87f4f1ea3e3775d055 Mon Sep 17 00:00:00 2001 From: vanhaj Date: Sun, 27 Feb 2022 22:56:08 +0100 Subject: [PATCH 4/4] added netlify link --- README.md | 8 +++----- code/style.css | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..7ba7bc2a 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +More learnings about APIs ## 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 was very challenging, and with too little knowledge to tackle this weeks project. ## 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://pedantic-goldwasser-9663c7.netlify.app/ diff --git a/code/style.css b/code/style.css index 5aea16bd..4fbe050d 100644 --- a/code/style.css +++ b/code/style.css @@ -62,7 +62,7 @@ h2 { } /* tablet */ -@media (min-width: 426px, max-width: 768px) { +@media (min-width: 426px) and (max-width: 768px) { .projects { display: flex; flex-wrap: wrap;