From f2da2e5db83d5c61dca20425289323cc480e5bb1 Mon Sep 17 00:00:00 2001 From: molbimien <43146046+molbimien@users.noreply.github.com> Date: Fri, 1 Oct 2021 13:56:18 +0200 Subject: [PATCH 1/3] setup of project and addition of blue level (minimum) requirements except for styling --- code/chart.js | 25 +++++++++++++- code/index.html | 5 +-- code/script.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 3 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..ca8df53b 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,27 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects left', + ], + datasets: [{ + label: 'My Technigo projects', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + ], + hoverOffset: 4 + }] + }, + }; + + const projectsChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..3e42e461 100644 --- a/code/index.html +++ b/code/index.html @@ -6,11 +6,12 @@ Project GitHub Tracker + -

GitHub Tracker

+

Projects:

-
+
diff --git a/code/script.js b/code/script.js index e69de29b..6b1ce38b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,86 @@ +const USER = 'molbimien'; +const PROFILE_URL = `https://api.github.com/users/${USER}` +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const profileContainer = document.getElementById('profile-container') +const projectsContainer = document.getElementById('projects'); + +const fetchProfile = () => { + fetch(PROFILE_URL) + .then(res => res.json()) + .then(profileData => { + profileContainer.innerHTML += ` + +

${profileData.login}

+ ` + }); + } + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const technigoRepositories = data.filter((repo) => + repo.name.includes('project-') && repo.fork + ); + + technigoRepositories.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ ${repo.name} with default branch ${repo.default_branch} +

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

+

Commits amounts:

+
+ `; + }); + + // Approach number 2 + fetchPullRequestsArray(technigoRepositories); + + // Draw chart with technigoRepos data + drawChart(technigoRepositories.length); + }); +}; + +//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) => { + // console.log(`Mother repo for project ${repo.name}`, 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 + // console.log(myPullRequest); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull reguest yet done :('; + } + + }); + }); +}; + + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + // .then((data) => console log.(data)); + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + + }); +}; + +fetchProfile(); +fetchRepositories(); From d52b2cc099f28db47f7c75d0ac9752812a929250 Mon Sep 17 00:00:00 2001 From: molbimien <43146046+molbimien@users.noreply.github.com> Date: Sun, 3 Oct 2021 22:36:47 +0200 Subject: [PATCH 2/3] added styling --- code/chart.js | 10 ++-- code/index.html | 106 +++++++++++++++++++++++++++++++-- code/script.js | 16 +++-- code/style.css | 151 +++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 265 insertions(+), 18 deletions(-) diff --git a/code/chart.js b/code/chart.js index ca8df53b..0750fdd3 100644 --- a/code/chart.js +++ b/code/chart.js @@ -8,18 +8,18 @@ const drawChart = (amount) => { type: 'doughnut', data: { labels: [ - 'Finished projects', - 'Projects left', + 'Projects done', + 'Projects left to do', ], datasets: [{ label: 'My Technigo projects', data: [amount, 19-amount], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(54, 162, 235)', + 'rgb(219,57,141)', + 'rgb(0,255,255)', ], hoverOffset: 4 - }] + }], }, }; diff --git a/code/index.html b/code/index.html index 3e42e461..48e6d2e9 100644 --- a/code/index.html +++ b/code/index.html @@ -4,19 +4,113 @@ - Project GitHub Tracker + Technigo Boot Camp GitHub Tracker + -
-

Projects:

-
+ + - +
+
+ +

project-business-site

+

Default branch: master

+

Most recent push: 2021-09-05

+

Number of commits: 30

+ +
+ +
+ +

project-chatbot

+

Default branch: main

+

Most recent push: 2021-09-12

+

Number of commits: 12

+ +
+ +
+ +

project-github-tracker

+

Default branch: main

+

Most recent push: 2021-10-01

+

This was a group project. No pull requests were done by molbimien.

+ +
+ +
+ +

project-guess-who

+

Default branch: main

+

Most recent push: 2021-09-20

+

Number of commits: 16

+ +
+ +
+ +

project-news-site

+

Default branch: master

+

Most recent push: 2021-08-30

+

Number of commits: 13

+ +
+ +
+ +

project-weather-app

+

Default branch: master

+

Most recent push: 2021-09-08

+

This was a group project. No pull requests were done by molbimien.

+ +
+
+ --> + + + + + + +
+

Technigo Boot Camp GitHub Tracker

+
+
+ +
+ +
+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 6b1ce38b..3ccf658c 100644 --- a/code/script.js +++ b/code/script.js @@ -11,7 +11,8 @@ const fetchProfile = () => { .then(profileData => { profileContainer.innerHTML += ` -

${profileData.login}

+

${profileData.name}

+

${profileData.login}

` }); } @@ -26,10 +27,13 @@ const fetchRepositories = () => { technigoRepositories.forEach((repo) => { projectsContainer.innerHTML += ` -
- ${repo.name} with default branch ${repo.default_branch} -

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

-

Commits amounts:

+
+ +

${repo.name}

+

Default branch: ${repo.default_branch}

+

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

+

Number of commits:

+
`; }); @@ -64,7 +68,7 @@ const fetchPullRequestsArray = (allRepositories) => { fetchCommits(myPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - 'No pull reguest yet done :('; + 'This was a group project. No pull requests made by molbimien.'; } }); diff --git a/code/style.css b/code/style.css index 7c8ad447..61c825b8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,152 @@ body { - background: #FFECE9; + background: #f7f7f7; + font-size: 1rem; + font-family: 'Open Sans', sans-serif; +} + +h1 h2 h3 { + font-family: 'Merriweather', serif; +} + +header { + text-align: center; + font-size: 1.6em; +} + +.page-container { + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + align-items: center; + width: 95%; +} + +.profile-container { + font-size: 1.1rem; + display: grid; + grid-column: span 6; + justify-items: center; + text-align: center; +} + +.profile-img { + border-radius: 50%; + max-width: 250px; + align-content: center; +} + +.profile-container h2 { + margin-top: 1rem; + margin-bottom: 0; +} + +.canvas-container { + display: grid; + grid-column: span 6; + justify-items: center; + margin: 5% auto; + width: 300px; +} + +.projects-container { + display: grid; + grid-column: span 6; + grid-gap: 20px; + margin: 50px auto; +} + +.card { + background: #fff; + text-align:left; + padding: 2rem; + box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); + transform: translateY(0); + position: relative; +} + +.card a { + text-decoration: none; + color: inherit; +} + +.card h3 { + font-size: 1.8rem; +} + +.card:hover, +.card:focus, +.card:active { + filter: none; + top: -0.25rem; + box-shadow: 0 4px 5px rgba(0,0,0,0.2); + color: #DB398D; +} + +footer { + display: flex; + flex-direction: column; + text-align: center; + height: 64px; + padding-top: 16px; + border-top: 1px dotted #DB398D; + text-transform: uppercase; + font-size: 0.8rem; +} + +a, a > span { + position: relative; + color: inherit; + text-decoration: none; +} +a:before, a:after, a > span:before, a > span:after { + content: ''; + position: absolute; + transition: transform .5s ease; +} + +.hover:before { + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #DB398D; + transform: scaleX(0); +} + +.hover:hover:before { + transform: scaleX(1); +} + +footer a:link { + color: #DB398D; +} + +footer a:visited { + color: grey; +} + +footer a:active { + background-color: cyan; +} + +/* styling for tablet and desktop */ + +@media only screen and (min-width: 768px) { + .profile-container { + grid-column: span 3; + } + + .canvas-container { + grid-column: span 3; + } + + .projects-container { + grid-template-columns: 1fr 1fr; + } +} + +@media only screen and (min-width: 992px) { + .projects-container { + grid-template-columns: 1fr 1fr 1fr; + } } \ No newline at end of file From 3ae9650ad6d06b5832fed529a0e17a84a63074b4 Mon Sep 17 00:00:00 2001 From: molbimien <43146046+molbimien@users.noreply.github.com> Date: Sun, 3 Oct 2021 23:34:58 +0200 Subject: [PATCH 3/3] updated ReadMe and cleaned code from console.logs and dummy code for styling --- .DS_Store | Bin 0 -> 6148 bytes README.md | 12 ++++--- code/chart.js | 4 +-- code/index.html | 93 ++++-------------------------------------------- code/script.js | 9 ++--- code/style.css | 2 +- 6 files changed, 19 insertions(+), 101 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..72a188b1e78b03b70a9d6751718f2098f0158871 GIT binary patch literal 6148 zcmeH~JqiLr422WjLa^D=avBfd4F=H@cmdJ16SffhIl3=D2(H#5@&d^>$xK-G6+0Ud z(d~WMi1Z?|fE#6PVPcBBle3I6$Yr>lucvXm=9yX2&cJ(_?B_N?1*iZOpaN8Y3jB}) zc5lNL%OE2apaN9jsepYS3fx$eE$E*P1Rnvw4rMp2eU<==6~LNoK~!KGtzfjOk0Dm~ zcCh5Rnry*n7tP^A^T}#c3{0b4v><_Lbudr?Dlk!C9(ix~{~rEn{-3lkr2 { type: 'doughnut', data: { labels: [ - 'Projects done', - 'Projects left to do', + 'Completed projects', + 'Projects left to build', ], datasets: [{ label: 'My Technigo projects', diff --git a/code/index.html b/code/index.html index 48e6d2e9..0194f8a0 100644 --- a/code/index.html +++ b/code/index.html @@ -10,100 +10,19 @@ - - - - - - - - -
-

Technigo Boot Camp GitHub Tracker

-
-
- -
- -
- -
- -
-
+
diff --git a/code/script.js b/code/script.js index 3ccf658c..e618544e 100644 --- a/code/script.js +++ b/code/script.js @@ -5,6 +5,7 @@ const REPOS_URL = `https://api.github.com/users/${USER}/repos`; const profileContainer = document.getElementById('profile-container') const projectsContainer = document.getElementById('projects'); +// fetchProfile function const fetchProfile = () => { fetch(PROFILE_URL) .then(res => res.json()) @@ -17,6 +18,7 @@ const fetchProfile = () => { }); } + // fetchRepositories function const fetchRepositories = () => { fetch(REPOS_URL) .then((res) => res.json()) @@ -38,7 +40,6 @@ const fetchRepositories = () => { `; }); - // Approach number 2 fetchPullRequestsArray(technigoRepositories); // Draw chart with technigoRepos data @@ -46,7 +47,6 @@ const fetchRepositories = () => { }); }; -//Approach number 2 const fetchPullRequestsArray = (allRepositories) => { allRepositories.forEach((repo) => { const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; @@ -54,7 +54,6 @@ const fetchPullRequestsArray = (allRepositories) => { fetch(PULL_URL) .then((res) => res.json()) .then((data) => { - // console.log(`Mother repo for project ${repo.name}`, data) const myPullRequest = data.find( (pull) => pull.user.login === repo.owner.login ); @@ -62,7 +61,6 @@ const fetchPullRequestsArray = (allRepositories) => { // Detect if we have pull request or not. // If yes - call fetchCommits function // If no - inform user that no pull request was yet done - // console.log(myPullRequest); if (myPullRequest) { fetchCommits(myPullRequest.commits_url, repo.name); @@ -75,11 +73,10 @@ const fetchPullRequestsArray = (allRepositories) => { }); }; - +// fetchCommits function const fetchCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) .then((res) => res.json()) - // .then((data) => console log.(data)); .then((data) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; diff --git a/code/style.css b/code/style.css index 61c825b8..cd209bc6 100644 --- a/code/style.css +++ b/code/style.css @@ -147,6 +147,6 @@ footer a:active { @media only screen and (min-width: 992px) { .projects-container { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: repeat(3, 1fr); } } \ No newline at end of file