From 1e7cd77fed23e76fe4cafc4d7bd5c829813696ba Mon Sep 17 00:00:00 2001 From: Marianne Ardin <55622908+MarianneArdin@users.noreply.github.com> Date: Sun, 27 Feb 2022 16:35:53 +0100 Subject: [PATCH 1/4] new project --- README.md | 15 +++++--- code/.gitignore | 1 + code/chart.js | 25 +++++++++++-- code/index.html | 37 ++++++++++++++++--- code/script.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 82 ++++++++++++++++++++++++++++++++++++++++-- 6 files changed, 243 insertions(+), 13 deletions(-) create mode 100644 code/.gitignore diff --git a/README.md b/README.md index 1613a3b0..c564ca8f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,20 @@ # GitHub Tracker +Requirements: -Replace this readme with your own information about your project. +- A list of all repos that are forked from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commits for each repo +- It should be responsive (mobile first) +- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/). -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## 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 project wasn't easy to get my head around. It took me a while to get all fetches to show. I also struggled a bit with the chart. ## 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/.gitignore b/code/.gitignore new file mode 100644 index 00000000..1c453411 --- /dev/null +++ b/code/.gitignore @@ -0,0 +1 @@ +token.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..0acaedd5 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,23 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +//DOM-selector for the canvas -//"Draw" the chart here 👇 +//Chart showing completed and remaining projects + +const drawChart = (numberOfProjects) => { + const ctx = document.getElementById('chart').getContext('2d') + const config = { + type: "pie", + data: { + labels: ["Projects completed", "Projects remaining"], + datasets:[{ + label: "Technigo Projects", + data: [numberOfProjects, 19 - numberOfProjects], + backgroundColor:["rgb(255,255,255)", "rgb(102,153,153)"], + hoverOffset: 4, + }] + } + } + +const chart = new Chart(document.getElementById('chart'), +config); + +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..4ded4b97 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,44 @@ Project GitHub Tracker + + + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+

+
+ +
+
+
+
+
+
+
+
+
+
+
+ - +
+ +
+ + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..9d4cb48f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,96 @@ +//DOM selectors// +// const fullName = document.getElementById('full-name') +// const reponame = document.getElementById('repoName') +const userContainer = document.getElementById('userContainer') +//const projectContainer = document.getElementById('projectContainer') +//const avatar = document.getElementById('avatar') + +//APIs to fetch from +const username = 'MarianneArdin' +const API_URL = `https://api.github.com/users/${username}` +const REPOS_URL = `https://api.github.com/users/${username}/repos` +//const API_TOKEN = TOKEN || process.env.API_TOKEN +//const API_MY_PROFILE = 'https://api.github.com/users/MarianneArdin' + + +//option for authorization +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } + } +//FETCHES PROFILE FROM GITHUB// +const fetchProfile = () => { + fetch(API_URL, options) + .then((response) => response.json()) + .then((data) => { + console.log(data) + userContainer.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

My projects

+
+
+

Public repositories: ${data.public_repos}

+
+ ` + }) +} +fetchProfile() + +//GET REPOS FROM GITHUB// +const getRepos = () => { + fetch(REPOS_URL, options) + .then((res) => res.json()) + .then((reposData) => { + console.log(reposData) + const forkedRepos = reposData.filter((repo) => repo.fork && repo.name.startsWith("project-")) + forkedRepos.forEach(repo => { + projectContainer.innerHTML += + ` + +
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

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

+

Amount of commits:

+
` + }) + getPullRequests(forkedRepos) + + drawChart(forkedRepos.length) + }) +} +getRepos() + +//GETS REPOS FROM GITHUB// +const getPullRequests = (repos) => { + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then((pullData) => { + let myPullRequest = pullData.find((pull) => pull.user.login === repo.owner.login) + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commits-${repo.name}`).innerHTML += `No pulls yet.` + } + }) + }) +} + +//GET NUMBER OF COMMITS +const getCommits = (commitsUrl, repo) => { + fetch(commitsUrl, options) + .then(res => res.json()) + .then((data) => { + document.getElementById(`commits-${repo}`).innerHTML += `${data.length}` + console.log(data.length) + }) +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..356387c8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,81 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: grey; + font-family: 'Bebas Neue', cursive; + margin: 1rem; +} + +header { + background-color: lightgrey; + border-radius: 180%; + color: black; + text-align: center; + +} + +.flex { + display: flex; + +} + +h1 { + font-size: 40px; + text-align: center; +} + +h2 { + font-size: 40px; + text-align: center; +} + +h3 { + font-size: 20px; + text-align: center; +} + +/*Image*/ +img { + width: 200px; + border-radius: 50%; + padding: 2rem; +} + +a { + color: black; +} + +.profile + { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-left: auto; + margin-right: auto; + width: 50%; +} +.forkedrepo-div +{ + border: black solid; + padding: 1rem; + margin: 2rem; +} +/* THE CHART SECTION */ + +#chart-wrapper { + width: 90%; + margin: 20px auto 40px; +} + +#chart { + padding: 5%; +} +/* MEDIA QUERIES +@media (min-width: 768px) + + + +/* This is styling for the footer*/ +footer { + background-color: darkgrey; + text-align: center; +} From 6ec49072585937cd0a21ecf6ab03b68256d6585b Mon Sep 17 00:00:00 2001 From: Marianne Ardin <55622908+MarianneArdin@users.noreply.github.com> Date: Sun, 27 Feb 2022 16:48:00 +0100 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c564ca8f..efcab786 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,4 @@ This project wasn't easy to get my head around. It took me a while to get all fe ## View it live - +https://marianneardin-githubtracker.netlify.app/ From 5b81367bd938e06771e9af99d459afaafd744d1d Mon Sep 17 00:00:00 2001 From: Marianne Ardin <55622908+MarianneArdin@users.noreply.github.com> Date: Sun, 27 Feb 2022 16:58:50 +0100 Subject: [PATCH 3/4] clean up code --- code/index.html | 3 +-- code/script.js | 4 ---- code/style.css | 4 ---- 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/code/index.html b/code/index.html index 4ded4b97..ebfa0202 100644 --- a/code/index.html +++ b/code/index.html @@ -17,8 +17,7 @@

GitHub Tracker

- -
+
diff --git a/code/script.js b/code/script.js index 9d4cb48f..25143f4f 100644 --- a/code/script.js +++ b/code/script.js @@ -1,9 +1,5 @@ //DOM selectors// -// const fullName = document.getElementById('full-name') -// const reponame = document.getElementById('repoName') const userContainer = document.getElementById('userContainer') -//const projectContainer = document.getElementById('projectContainer') -//const avatar = document.getElementById('avatar') //APIs to fetch from const username = 'MarianneArdin' diff --git a/code/style.css b/code/style.css index 356387c8..d9599a14 100644 --- a/code/style.css +++ b/code/style.css @@ -69,10 +69,6 @@ a { #chart { padding: 5%; } -/* MEDIA QUERIES -@media (min-width: 768px) - - /* This is styling for the footer*/ footer { From 5aa29f4c46d1ede9355f153dabd18e607b47f72b Mon Sep 17 00:00:00 2001 From: Marianne Ardin <55622908+MarianneArdin@users.noreply.github.com> Date: Fri, 8 Apr 2022 13:25:16 +0200 Subject: [PATCH 4/4] fixes after code review --- code/chart.js | 36 ++++++++++----------- code/index.html | 83 ++++++++++++++++++++++++------------------------- code/style.css | 78 +++++++++++++++++++++------------------------- 3 files changed, 93 insertions(+), 104 deletions(-) diff --git a/code/chart.js b/code/chart.js index 0acaedd5..d1b6a82a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,23 +1,23 @@ -//DOM-selector for the canvas +//DOM-selector for the canvas //Chart showing completed and remaining projects const drawChart = (numberOfProjects) => { - const ctx = document.getElementById('chart').getContext('2d') - const config = { - type: "pie", - data: { - labels: ["Projects completed", "Projects remaining"], - datasets:[{ - label: "Technigo Projects", - data: [numberOfProjects, 19 - numberOfProjects], - backgroundColor:["rgb(255,255,255)", "rgb(102,153,153)"], - hoverOffset: 4, - }] - } - } + const ctx = document.getElementById('chart').getContext('2d'); + const config = { + type: 'pie', + data: { + labels: ['Projects completed', 'Projects remaining'], + datasets: [ + { + label: 'Technigo Projects', + data: [numberOfProjects, 19 - numberOfProjects], + backgroundColor: ['rgb(255,255,255)', 'rgb(102,153,153)'], + hoverOffset: 4, + }, + ], + }, + }; -const chart = new Chart(document.getElementById('chart'), -config); - -} \ No newline at end of file + const chart = new Chart(document.getElementById('chart'), config); +}; diff --git a/code/index.html b/code/index.html index ebfa0202..b33709c2 100644 --- a/code/index.html +++ b/code/index.html @@ -1,49 +1,46 @@ - - - - - Project GitHub Tracker - - - - - + + + + + Project GitHub Tracker + + + + + + + +
+

GitHub Tracker

+

+
+
- - -
-

GitHub Tracker

-

-
-
-
+
+
-
-
-
-
-
-
-
-
-
- - -
- -
+ +
+ +
- - + + - - - - - - - \ No newline at end of file + + + + + + + diff --git a/code/style.css b/code/style.css index d9599a14..259450c4 100644 --- a/code/style.css +++ b/code/style.css @@ -1,77 +1,69 @@ body { - background: grey; - font-family: 'Bebas Neue', cursive; - margin: 1rem; + background: grey; + font-family: 'Bebas Neue', cursive; + margin: 1rem; } header { - background-color: lightgrey; - border-radius: 180%; - color: black; - text-align: center; - + background-color: lightgrey; + border-radius: 180%; + color: black; + text-align: center; } -.flex { - display: flex; - -} - -h1 { - font-size: 40px; - text-align: center; +h1 { + font-size: 40px; + text-align: center; } h2 { - font-size: 40px; - text-align: center; + font-size: 40px; + text-align: center; } h3 { - font-size: 20px; - text-align: center; + font-size: 20px; + text-align: center; } /*Image*/ img { - width: 200px; - border-radius: 50%; - padding: 2rem; + width: 200px; + border-radius: 50%; + padding: 2rem; } a { - color: black; + color: black; } -.profile - { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - margin-left: auto; - margin-right: auto; - width: 50%; +.profile { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-left: auto; + margin-right: auto; + width: 50%; } -.forkedrepo-div -{ - border: black solid; - padding: 1rem; - margin: 2rem; +.forkedrepo-div { + border: black solid; + padding: 1rem; + margin: 2rem; } /* THE CHART SECTION */ #chart-wrapper { - width: 90%; - margin: 20px auto 40px; + width: 90%; + margin: 20px auto 40px; } #chart { - padding: 5%; + padding: 20%; } /* This is styling for the footer*/ footer { - background-color: darkgrey; - text-align: center; + background-color: darkgrey; + text-align: center; }