From ebf477ba9d50d31790e1d30d4af0ee35ac7adc3e Mon Sep 17 00:00:00 2001 From: AschwinSiaila Date: Fri, 1 Oct 2021 03:45:04 +0200 Subject: [PATCH 1/5] repos and commits --- code/index.html | 36 +++++++++++++++++----------------- code/script.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 18 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..3ecf8cdb 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,21 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + +

GitHub Tracker

+

Projects:

+
- - - - - - - \ No newline at end of file + + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..1543feab 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,51 @@ +const USER = "AschwinSiaila"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const projectsContainer = document.getElementById("projects"); + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo.name.includes("project-") && repo.fork + ); + + console.log(technigoRepositories); + + technigoRepositories.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ href="${repo.name} with default branch ${repo.default_branch}" +

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

+

Commits amount:

+
+ `; + }); + + fetchPullRequestArray(technigoRepositories); + }); +}; + +const fetchPullRequestArray = (allRepositories) => { + allRepositories.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + console.log(); + + fetchCommits(myPullRequest.commits_url, repo.name); + }); + }); +}; +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; +fetchRepositories(); From c05c2c361272666769f7d005e77d1d98359d1c5f Mon Sep 17 00:00:00 2001 From: AschwinSiaila Date: Fri, 1 Oct 2021 05:50:36 +0200 Subject: [PATCH 2/5] name and picture --- code/index.html | 6 ++++-- code/script.js | 23 ++++++++++++++++++++++- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index 3ecf8cdb..6dc8c83b 100644 --- a/code/index.html +++ b/code/index.html @@ -9,12 +9,14 @@

GitHub Tracker

+

Name and Picture:

+

Projects:

- - + . + diff --git a/code/script.js b/code/script.js index 1543feab..d4199a80 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,28 @@ const USER = "AschwinSiaila"; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; - +const nameAndPicture = document.getElementById("nameandpicture"); const projectsContainer = document.getElementById("projects"); +const getUsernameAndPicture = () => { + const usernamePictureAndBioApi = `https://api.github.com/users/${USER}`; + fetch(usernamePictureAndBioApi) + .then((res) => res.json()) + .then((data) => { + global__UserData = data; + }) + .then(() => renderUsernameAndPicture()); +}; + +const renderUsernameAndPicture = () => { + const picture = global__UserData.avatar_url; + + nameAndPicture.innerHTML += ` + Picture of gitHub-user +
+
${USER}
+
`; +}; + const fetchRepositories = () => { fetch(REPOS_URL) .then((res) => res.json()) @@ -48,4 +68,5 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; }); }; +getUsernameAndPicture(); fetchRepositories(); From 4a4ed9ed63b831cfa1b3e3e74335901970c49cb4 Mon Sep 17 00:00:00 2001 From: AschwinSiaila Date: Sun, 3 Oct 2021 02:11:18 +0200 Subject: [PATCH 3/5] chart, responsive and styling --- code/chart.js | 24 +++++++++++- code/index.html | 20 +++++++--- code/script.js | 40 ++++++++++--------- code/style.css | 100 +++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 156 insertions(+), 28 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..362088d5 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,24 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 +const drawProgressChart = (repos) => { + const completedProjects = repos.length; + const totalProjects = 20; + + const labels = repos.map((repo) => repo.name); + const data = repos.map((repo) => repo.size); + + const chart = new Chart(ctx, { + type: "doughnut", + data: { + labels: ["Completed Projects", "Projects left to build"], + datasets: [ + { + data: [completedProjects, totalProjects - completedProjects], + backgroundColor: ["blue", "red"], + hoverOffset: 4, + }, + ], + }, + }); +}; diff --git a/code/index.html b/code/index.html index 6dc8c83b..9aa9fdd4 100644 --- a/code/index.html +++ b/code/index.html @@ -4,19 +4,27 @@ - Project GitHub Tracker + + + + Project GitHub Tracker + -

GitHub Tracker

-

Name and Picture:

-
+

GitHub Tracker Aschwin Siaila

+

Name and Picture:

+
+

Projects:

- . - +

Diagram:

+ diff --git a/code/script.js b/code/script.js index d4199a80..30bda134 100644 --- a/code/script.js +++ b/code/script.js @@ -3,24 +3,23 @@ const REPOS_URL = `https://api.github.com/users/${USER}/repos`; const nameAndPicture = document.getElementById("nameandpicture"); const projectsContainer = document.getElementById("projects"); -const getUsernameAndPicture = () => { - const usernamePictureAndBioApi = `https://api.github.com/users/${USER}`; - fetch(usernamePictureAndBioApi) +const NameandPicture = () => { + const personal_ID = `https://api.github.com/users/${USER}`; + fetch(personal_ID) .then((res) => res.json()) .then((data) => { global__UserData = data; }) - .then(() => renderUsernameAndPicture()); + .then(() => NameAndPicture()); }; -const renderUsernameAndPicture = () => { +const NameAndPicture = () => { const picture = global__UserData.avatar_url; nameAndPicture.innerHTML += ` - Picture of gitHub-user -
-
${USER}
-
`; + Picture of gitHub-user +
${USER}
+ `; }; const fetchRepositories = () => { @@ -35,28 +34,32 @@ const fetchRepositories = () => { technigoRepositories.forEach((repo) => { projectsContainer.innerHTML += ` -
- href="${repo.name} with default branch ${repo.default_branch}" -

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

-

Commits amount:

+
+ href="${ + repo.name + } with default branch ${repo.default_branch}" +

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

+

Commits amount:

+
`; }); fetchPullRequestArray(technigoRepositories); + drawProgressChart(technigoRepositories); }); }; -const fetchPullRequestArray = (allRepositories) => { - allRepositories.forEach((repo) => { +const fetchPullRequestArray = (allrepositories) => { + allrepositories.forEach((repo) => { fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) .then((res) => res.json()) .then((data) => { const myPullRequest = data.find( (pull) => pull.user.login === repo.owner.login ); - console.log(); - fetchCommits(myPullRequest.commits_url, repo.name); }); }); @@ -68,5 +71,6 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; }); }; -getUsernameAndPicture(); + +NameandPicture(); fetchRepositories(); diff --git a/code/style.css b/code/style.css index 7c8ad447..c70afa32 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,99 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #d6c5c2; +} + +#nameandpicture { + position: relative; + max-width: 100%; + height: auto; +} + +/* #projects { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); + gap: 1rem; +} */ + +.profile-pic { + border-radius: 30px; + max-width: 100%; + height: auto; +} + +.profile-name { + font-size: 100%; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + background-color: rgb(56, 172, 88); + color: white; + padding: 20px; + max-width: 100%; + height: auto; +} + +.project-info { + /* max-width: 100%; + height: auto; */ + border: 2px solid black; + /* padding: 10px; */ + background-color: rgb(130, 110, 109); +} + +.project-links { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: white; + padding: 20px; + max-width: 100%; + height: auto; + /* border: 2px solid black; */ +} + +.push { + padding: 20px; + max-width: 100%; + height: auto; + border: 2px solid black; +} + +.commits { + padding: 20px; + max-width: 100%; + height: auto; + border: 2px solid black; +} + +@media (min-width: 768px) { + .profile-name { + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + background-color: rgb(56, 172, 88); + color: white; + position: absolute; + top: 8px; + left: 16px; + font-size: 20px; + } + + #projects { + display: grid; + grid-template-columns: auto auto auto auto; + gap: 10px; + padding: 10px; + } +} +@media (min-width: 992px) { + .profile-name { + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + background-color: rgb(56, 172, 88); + color: white; + position: absolute; + top: 8px; + left: 16px; + font-size: 20px; + } + + #projects { + display: grid; + grid-template-columns: auto auto auto auto; + gap: 10px; + padding: 10px; + } +} From cebfcb5c810662df97357768c29e2c456bbc28ef Mon Sep 17 00:00:00 2001 From: AschwinSiaila Date: Sun, 3 Oct 2021 16:42:17 +0200 Subject: [PATCH 4/5] make links and styling --- code/script.js | 18 +++++------------- code/style.css | 14 ++++++++------ 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/code/script.js b/code/script.js index 30bda134..0cf64d65 100644 --- a/code/script.js +++ b/code/script.js @@ -26,22 +26,16 @@ const fetchRepositories = () => { fetch(REPOS_URL) .then((res) => res.json()) .then((data) => { - const technigoRepositories = data.filter( - (repo) => repo.name.includes("project-") && repo.fork - ); + const technigoRepositories = data.filter((repo) => repo.name.includes("project-") && repo.fork); console.log(technigoRepositories); technigoRepositories.forEach((repo) => { projectsContainer.innerHTML += `
- href="${ - repo.name - } with default branch ${repo.default_branch}" -

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

-

Commits amount:

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

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

+

Commits amount:

`; @@ -57,9 +51,7 @@ const fetchPullRequestArray = (allrepositories) => { fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) .then((res) => res.json()) .then((data) => { - const myPullRequest = data.find( - (pull) => pull.user.login === repo.owner.login - ); + const myPullRequest = data.find((pull) => pull.user.login === repo.owner.login); fetchCommits(myPullRequest.commits_url, repo.name); }); }); diff --git a/code/style.css b/code/style.css index c70afa32..8f60de81 100644 --- a/code/style.css +++ b/code/style.css @@ -31,23 +31,24 @@ body { } .project-info { - /* max-width: 100%; - height: auto; */ + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: white; + max-width: 100%; + height: auto; border: 2px solid black; - /* padding: 10px; */ + padding: 10px; background-color: rgb(130, 110, 109); } .project-links { - font-family: Verdana, Geneva, Tahoma, sans-serif; color: white; - padding: 20px; + font-size: 12px; max-width: 100%; height: auto; - /* border: 2px solid black; */ } .push { + background-color: teal; padding: 20px; max-width: 100%; height: auto; @@ -55,6 +56,7 @@ body { } .commits { + background-color: turquoise; padding: 20px; max-width: 100%; height: auto; From 09673a4a50817accd4bbe5d5b082c200c7eb523b Mon Sep 17 00:00:00 2001 From: AschwinSiaila Date: Sun, 3 Oct 2021 17:41:14 +0200 Subject: [PATCH 5/5] readme filled in --- README.md | 8 +++----- code/style.css | 10 +++++----- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..9e13b3f4 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. +This week was quite a challenge because I was traveling. Got a lot of help from the recorded videos. So thank God for this week! ## 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? +to understand which and what data comes from where or what. Using console.log(data) explained alot. ## 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://practical-fermi-1dc0a6.netlify.app/ diff --git a/code/style.css b/code/style.css index 8f60de81..3069b53b 100644 --- a/code/style.css +++ b/code/style.css @@ -8,11 +8,11 @@ body { height: auto; } -/* #projects { +#projects { display: grid; - grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); - gap: 1rem; -} */ + grid-template-columns: auto; + gap: 10px; +} .profile-pic { border-radius: 30px; @@ -76,7 +76,7 @@ body { #projects { display: grid; - grid-template-columns: auto auto auto auto; + grid-template-columns: auto auto; gap: 10px; padding: 10px; }