From 7849faf51f4b9eb34237b2c9191f9e2e43211333 Mon Sep 17 00:00:00 2001 From: isomoth Date: Tue, 28 Sep 2021 22:50:38 +0200 Subject: [PATCH 1/6] fetched name, picture, forked repos, pull requests --- code/chart.js | 31 +++++++++++++++++++- code/index.html | 39 +++++++++++++------------ code/script.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+), 19 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..70076b82 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,33 @@ //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 config = { + type: 'doughnut', + data: { + labels: [ + 'Finished Projects', + 'Projects Left', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 20-amount], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + ], + hoverOffset: 4 + }] + }, + }; + + const myChart = new Chart( + ctx, + config + ); + } + + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..94b8040e 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,24 @@ - - - - - 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..aca138d8 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,78 @@ +const USER = 'isomoth'; +const USER_URL = `https://api.github.com/users/${USER}`; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const projectsContainer = document.getElementById('projects'); + +const getUserProfile = () => { + fetch(USER_URL) + .then((response) => response.json()) + .then((data) => { + projectsContainer.innerHTML += ` +

User Name: ${data.login}

+ + `; + }); +}; + +getUserProfile(); + +const getPullRequests = (repos) => { + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + ) + .then((response) => response.json()) + .then((data) => { + const userPulls = data.filter( + (pull) => pull.user.login === repo.owner.login + ); + console.log('PULL: '); + console.log(userPulls); + userPulls.forEach((pull) => { + projectsContainer.innerHTML += ` +
+

${repo.name}

+
+ `; + }); + }); + }); +}; + +const getCommits = (repos) => { + repos.forEach((repo) => { + fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`) + .then((res) => res.json()) + .then((data) => { + let commitCounter = 0; + repos.forEach( + (commit) => + (projectsContainer.innerHTML += `

Commit: ${commit}

`), + (commitCounter = commitCounter++), + console.log('Commits: '), + console.log(data), + console.log('Commit count: ' + commitCounter) + ); + }); + }); +}; + +const getRepositories = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ); + forkedRepos.forEach( + (repo) => (projectsContainer.innerHTML += `

${repo.name}

`), + console.log('All of my Forked Technigo Repos: '), + console.log(forkedRepos), + getPullRequests(forkedRepos), + getCommits(forkedRepos) + ); + drawChart(forkedRepos.length); + }); +}; + +getRepositories(); From 60eed29e0014c94a4f69d2fb87b349967e760a84 Mon Sep 17 00:00:00 2001 From: isomoth Date: Wed, 29 Sep 2021 22:33:07 +0200 Subject: [PATCH 2/6] completed all fetches for the blue requirements --- code/chart.js | 6 +++--- code/script.js | 56 +++++++++++++++++++++++++++++--------------------- code/style.css | 6 ++++-- 3 files changed, 40 insertions(+), 28 deletions(-) diff --git a/code/chart.js b/code/chart.js index 70076b82..66532372 100644 --- a/code/chart.js +++ b/code/chart.js @@ -14,10 +14,10 @@ const ctx = document.getElementById('myChart').getContext('2d'); ], datasets: [{ label: 'My First Dataset', - data: [amount, 20-amount], + data: [amount, 19-amount], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(54, 162, 235)', + '#95EF87', + '#00DDB0', ], hoverOffset: 4 }] diff --git a/code/script.js b/code/script.js index aca138d8..0b4cce37 100644 --- a/code/script.js +++ b/code/script.js @@ -16,36 +16,33 @@ const getUserProfile = () => { getUserProfile(); -const getPullRequests = (repos) => { - repos.forEach((repo) => { - fetch( - `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` - ) +const getPullRequests = (allRepos) => { + allRepos.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + fetch(PULL_URL) .then((response) => response.json()) .then((data) => { - const userPulls = data.filter( + const userPullRequest = data.find( (pull) => pull.user.login === repo.owner.login ); - console.log('PULL: '); - console.log(userPulls); - userPulls.forEach((pull) => { - projectsContainer.innerHTML += ` -
-

${repo.name}

-
- `; - }); + if(userPullRequest){ + getCommits(userPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = 'No pull requests so far.'; + } }); }); }; -const getCommits = (repos) => { +/* const getCommits = (repos) => { repos.forEach((repo) => { fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`) .then((res) => res.json()) .then((data) => { let commitCounter = 0; - repos.forEach( + const userCommits = data.filter( + (commit) => commit.committer.login === `${USER}`); + userCommits.forEach( (commit) => (projectsContainer.innerHTML += `

Commit: ${commit}

`), (commitCounter = commitCounter++), @@ -55,22 +52,35 @@ const getCommits = (repos) => { ); }); }); +}; */ + +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); }; + const getRepositories = () => { fetch(REPOS_URL) .then((response) => response.json()) .then((data) => { const forkedRepos = data.filter( - (repo) => repo.fork && repo.name.startsWith('project-') + (repo) => repo.fork && repo.name.includes('project-') ); forkedRepos.forEach( - (repo) => (projectsContainer.innerHTML += `

${repo.name}

`), - console.log('All of my Forked Technigo Repos: '), - console.log(forkedRepos), - getPullRequests(forkedRepos), - getCommits(forkedRepos) + (repo) => { + projectsContainer.innerHTML += + `
+ ${repo.name} with default branch ${repo.default_branch} +

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

+

Amount of commits:

+
` + }, ); + getPullRequests(forkedRepos), drawChart(forkedRepos.length); }); }; diff --git a/code/style.css b/code/style.css index 7c8ad447..b4b4cc42 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,5 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #6576E8; +} + +/* Palettes to try tomorrow: https://mycolor.space/?hex=%231B84D5&sub=1 */ \ No newline at end of file From 664074cbd38d8d43f2e1659192cb859a56641b74 Mon Sep 17 00:00:00 2001 From: isomoth Date: Fri, 1 Oct 2021 23:53:48 +0200 Subject: [PATCH 3/6] Responsive grid and chart. Sorted projects after date. --- code/chart.js | 24 +++++++-- code/index.html | 24 ++++++--- code/script.js | 64 ++++++++++++----------- code/style.css | 131 +++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 201 insertions(+), 42 deletions(-) diff --git a/code/chart.js b/code/chart.js index 66532372..58fae0f4 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,8 +1,7 @@ -//DOM-selector for the canvas 👇 +// DOM-selector for the canvas const ctx = document.getElementById('myChart').getContext('2d'); -//"Draw" the chart here 👇 - +// Generate the chart based on the data fetched on script.js const drawChart = (amount) => { const config = { @@ -16,12 +15,27 @@ const ctx = document.getElementById('myChart').getContext('2d'); label: 'My First Dataset', data: [amount, 19-amount], backgroundColor: [ - '#95EF87', - '#00DDB0', + '#D365C8', + '#3aafc9', ], hoverOffset: 4 }] }, + options: { + // The first two options make the chart responsive + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + color: "white", + font: { + size: 20 + } + } + } + } + } }; const myChart = new Chart( diff --git a/code/index.html b/code/index.html index 94b8040e..495aaa64 100644 --- a/code/index.html +++ b/code/index.html @@ -5,20 +5,30 @@ Project GitHub Tracker + + + + + -

GitHub Tracker

-
-

Projects:

-
- - -
+
+

GitHub Tracker

+
+
+
+

Technigo Projects:

+
+
+ + +
+ diff --git a/code/script.js b/code/script.js index 0b4cce37..eb6bb48c 100644 --- a/code/script.js +++ b/code/script.js @@ -1,21 +1,34 @@ +// The strict mode in JavaScript prevents several bugs. For example, it won't let you use undeclared variables. +"use strict"; + +// Global variables const USER = 'isomoth'; const USER_URL = `https://api.github.com/users/${USER}`; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const userInfo = document.getElementById('user-info'); const projectsContainer = document.getElementById('projects'); +// Fetch user info and inject it into a div const getUserProfile = () => { fetch(USER_URL) .then((response) => response.json()) .then((data) => { - projectsContainer.innerHTML += ` -

User Name: ${data.login}

- + userInfo.innerHTML += ` + +

${data.bio}

`; }); }; getUserProfile(); +// Fetch all of the user's projects where a pull request has been made const getPullRequests = (allRepos) => { allRepos.forEach((repo) => { const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` @@ -25,62 +38,57 @@ const getPullRequests = (allRepos) => { const userPullRequest = data.find( (pull) => pull.user.login === repo.owner.login ); + // Filter out pull requests from other users and fetch commits from them if(userPullRequest){ getCommits(userPullRequest.commits_url, repo.name); } else { + // Catch exception when no pull request has been made document.getElementById(`commit-${repo.name}`).innerHTML = 'No pull requests so far.'; } }); }); }; -/* const getCommits = (repos) => { - repos.forEach((repo) => { - fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`) - .then((res) => res.json()) - .then((data) => { - let commitCounter = 0; - const userCommits = data.filter( - (commit) => commit.committer.login === `${USER}`); - userCommits.forEach( - (commit) => - (projectsContainer.innerHTML += `

Commit: ${commit}

`), - (commitCounter = commitCounter++), - console.log('Commits: '), - console.log(data), - console.log('Commit count: ' + commitCounter) - ); - }); - }); -}; */ - +//Fetch all commits from filtered projects const getCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) + fetch(myCommitsUrl) // this will be 'commits_url' from line 46 .then((res) => res.json()) .then((data) => { + // Count amount of commits document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; }); }; - +// Fetch all repositories that the user has forked from Technigo const getRepositories = () => { fetch(REPOS_URL) .then((response) => response.json()) .then((data) => { - const forkedRepos = data.filter( + let forkedRepos = data.filter( (repo) => repo.fork && repo.name.includes('project-') ); + // Sort repos based on date of creation ("created_at") + forkedRepos.sort( + (a, b) => new Date(b.created_at) - new Date(a.created_at) + ); + // Display them from earliest to latest + forkedRepos = forkedRepos.reverse(); + // Finally, use a loop to generate a card container for each project and fetch other relevant info about it forkedRepos.forEach( (repo) => { projectsContainer.innerHTML += - `
- ${repo.name} with default branch ${repo.default_branch} + `
+

${repo.name}

+ +

Default branch: ${repo.default_branch}

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

Amount of commits:

+

` }, ); getPullRequests(forkedRepos), + //Use the data above to generate the chart from chart.js, displaying elapsed vs. remaining projects drawChart(forkedRepos.length); }); }; diff --git a/code/style.css b/code/style.css index b4b4cc42..8e62039e 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,132 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +/* PALETTE + +Dark grey: #222a36 +Aquamarine: #3aafc9 +Light purple: #676cdb +Magenta: #D6434A + + +*/ + +/* ----------------------------------------------- */ +/* GLOBAL COMPONENTS */ +/* ----------------------------------------------- */ + body { - background: #6576E8; + + background: #222a36; + font-family: 'Martel Sans', Helvetica, Arial, sans-serif; + color: #fff; + margin: 1rem; + font-size: 16px; +} + +a { + color: #3aafc9; +} + +/* ----------------------------------------------- */ +/* USER INFO SECTION */ +/* ----------------------------------------------- */ + +.user-info { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; +} + +.user-names { + margin: 1rem; + display: inline-block; +} + + +.bio{ + margin-top: 1rem; +} + +.divider-title { + margin-top: 1rem; +} + +.user-image{ + width: 25%; + height: fit-content; + border-radius: 50%; + box-shadow: 0 0 0 0.1px; +} + +/* ----------------------------------------------- */ +/* PROJECT SECTION */ +/* ----------------------------------------------- */ + +#projects { + display: grid; + grid-template-columns: repeat(1, 1fr); +} + +.repo-card { + background: #676cdb; + margin-top: 1rem; + padding: 1rem; + border-style: solid; + border-width: 1px; + border-radius: 6px; +} + +.repo-link { + color: #D6434A; + font-size: 20px; +} + +/* ----------------------------------------------- */ +/* CHART */ +/* ----------------------------------------------- */ + +.chart-container { + margin-top: 2rem; + margin-left: auto; + margin-right: auto; + width:80vw; + height:40vh; +} + + + +/* ----------------------------------------------- */ +/* MEDIA QUERIES */ +/* ----------------------------------------------- */ + +@media screen and (min-width: 600px) { + #projects { + grid-template-columns: repeat(2, 1fr); + grid-gap: 30px; + }; +} + +@media screen and (min-width: 1024px) { + h1 { + font-size: 4em; + } + h2 { + font-size: 3em; + } + h3 { + font-size: 2em; + } + .bio { + font-size: 2em; + } + .repo-link { + font-size: 1.2em; + } } -/* Palettes to try tomorrow: https://mycolor.space/?hex=%231B84D5&sub=1 */ \ No newline at end of file From 9b2c9e6dc79447f71f6c4644def7988cb2ab4b0c Mon Sep 17 00:00:00 2001 From: isomoth Date: Sat, 2 Oct 2021 23:45:25 +0200 Subject: [PATCH 4/6] finished blue requirements --- README.md | 20 +++++++--- code/chart.js | 22 ++++++----- code/index.html | 20 +++++----- code/script.js | 18 +++++---- code/style.css | 101 +++++++++++++++++++++++++++++++++++++++--------- 5 files changed, 129 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..e2042429 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ # GitHub Tracker -Replace this readme with your own information about your project. +A site made to practice fetching from the GitHub API. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +## Features -## The problem +- Dynamic styling through DOM manipulation in JavaScript. +- Mobile-first styling. +- Data retrieved from GitHub's API: Basic user info, projects forked from Technigo (filtered by date of creation), number of commits, and whether there has been a pull request yet. +- Use of methods like filter, find, and sort to organize the data. +- A chart visualization of completed projects vs. projects left to do, using chart.js. -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? +## Challenges and Lessons learned -## View it live +- The biggest challenge in terms of fetching was the getCommits function, since the API didn't have a direct path to fetch each commit. The solution was to first fetch all repos, then filter the forked ones. Then get their pull requests, and finally invoke the getCommits function within a conditional (if the project had any pull requests). +- Dynamic CSS with JavaScript was also a challenge, since the styling mindset was purely based on the HTML document up to this point. I learned to check the dev tools more often, to make sure the dynamic structure of the document was still coherent. +- The responsiveness of the chart was tricky because of the quirky nature of chart.js. I used a combination of the library's documentation and Stack Overflow answers to get ahead. In the end, I decided to go for a bar graphic instead of a donut. Its rectangular forms matched my layout better. -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. +## Deployed version + +github-tracker-gonzalez.netlify.app diff --git a/code/chart.js b/code/chart.js index 58fae0f4..c622b8d4 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,17 +2,16 @@ const ctx = document.getElementById('myChart').getContext('2d'); // Generate the chart based on the data fetched on script.js - const drawChart = (amount) => { const config = { - type: 'doughnut', + type: 'bar', data: { labels: [ 'Finished Projects', 'Projects Left', ], datasets: [{ - label: 'My First Dataset', + label: 'Completed Projects', data: [amount, 19-amount], backgroundColor: [ '#D365C8', @@ -27,13 +26,16 @@ const ctx = document.getElementById('myChart').getContext('2d'); maintainAspectRatio: false, plugins: { legend: { - labels: { - color: "white", - font: { - size: 20 - } - } - } + display: false, + }, + tooltips: { + callbacks: { + label: function(tooltipItem) { + console.log(tooltipItem) + return tooltipItem.yLabel; + }, + }, + }, } } }; diff --git a/code/index.html b/code/index.html index 495aaa64..0ffad068 100644 --- a/code/index.html +++ b/code/index.html @@ -14,19 +14,19 @@ -
-

GitHub Tracker

-
-
-
-

Technigo Projects:

+
+
+
+
+
+

Technigo Projects

+
+
-
- -
+
-
+ diff --git a/code/script.js b/code/script.js index eb6bb48c..8c9a2391 100644 --- a/code/script.js +++ b/code/script.js @@ -6,7 +6,7 @@ const USER = 'isomoth'; const USER_URL = `https://api.github.com/users/${USER}`; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; const userInfo = document.getElementById('user-info'); -const projectsContainer = document.getElementById('projects'); +const projectsContainer = document.getElementById('project-grid'); // Fetch user info and inject it into a div const getUserProfile = () => { @@ -15,13 +15,15 @@ const getUserProfile = () => { .then((data) => { userInfo.innerHTML += ` -

${data.bio}

`; }); }; @@ -51,7 +53,7 @@ const getPullRequests = (allRepos) => { //Fetch all commits from filtered projects const getCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) // this will be 'commits_url' from line 46 + fetch(myCommitsUrl) // this will be 'commits_url' from line 45 .then((res) => res.json()) .then((data) => { // Count amount of commits diff --git a/code/style.css b/code/style.css index 8e62039e..c75a61a5 100644 --- a/code/style.css +++ b/code/style.css @@ -8,6 +8,7 @@ /* PALETTE Dark grey: #222a36 +Light grey: #D5CABD Aquamarine: #3aafc9 Light purple: #676cdb Magenta: #D6434A @@ -21,9 +22,9 @@ Magenta: #D6434A body { - background: #222a36; + background: #D5CABD; font-family: 'Martel Sans', Helvetica, Arial, sans-serif; - color: #fff; + color: #37888A; margin: 1rem; font-size: 16px; } @@ -37,44 +38,64 @@ a { /* ----------------------------------------------- */ .user-info { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - align-items: center; + display: block; + margin-top: 2rem; } .user-names { margin: 1rem; - display: inline-block; + display: block; + text-align: center; } - .bio{ margin-top: 1rem; + padding-left: 2rem; + padding-right: 2rem; +} + +.bio, +.public, +.twitter { + color: #474554; } .divider-title { - margin-top: 1rem; + padding: 0.5rem; + margin-bottom: 5px; + width: 100%; + background: #DDEBEB; + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; + border-style: solid; + border-width: 1px; + border-radius: 6px; } .user-image{ - width: 25%; + width: 50%; height: fit-content; border-radius: 50%; box-shadow: 0 0 0 0.1px; + display: block; + margin-left: auto; + margin-right: auto; } /* ----------------------------------------------- */ /* PROJECT SECTION */ /* ----------------------------------------------- */ -#projects { +#project-grid { display: grid; grid-template-columns: repeat(1, 1fr); } .repo-card { background: #676cdb; + color: #fff; margin-top: 1rem; padding: 1rem; border-style: solid; @@ -88,7 +109,7 @@ a { } /* ----------------------------------------------- */ -/* CHART */ +/* CHART */ /* ----------------------------------------------- */ .chart-container { @@ -106,27 +127,71 @@ a { /* ----------------------------------------------- */ @media screen and (min-width: 600px) { - #projects { + #project-grid { grid-template-columns: repeat(2, 1fr); grid-gap: 30px; }; + .user-image{ + width: 30%; + height: auto; + } +} + +@media screen and (min-width: 768px) { + .user-image{ + width: 40%; + height: auto; + } } @media screen and (min-width: 1024px) { + + .profile-container { + display: grid; + grid-template-columns: 1fr 3fr; + margin: 10rem; + } + + #project-grid { + grid-gap: 20px; + } + + .user-info { + flex-wrap: wrap; + justify-content: flex-start; + margin-top: 0; + } + + .user-image{ + width: 75%; + } + + .divider-title { + margin-bottom: 20px; + } + h1 { - font-size: 4em; + font-size: 3em; } h2 { - font-size: 3em; + font-size: 2em; } h3 { - font-size: 2em; + font-size: 1em; } .bio { - font-size: 2em; + font-size: 1em; } .repo-link { - font-size: 1.2em; + font-size: 1.5em; } } +@media screen and (min-width: 3840px) { + body { + max-width: 2000px; + } + .chart-container { + max-width:1500px; + } +} \ No newline at end of file From 08e6662874d8284c141d0f64562e8267d3822f7a Mon Sep 17 00:00:00 2001 From: isomoth Date: Sat, 2 Oct 2021 23:48:43 +0200 Subject: [PATCH 5/6] fixed chart height --- code/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/style.css b/code/style.css index c75a61a5..ba1db995 100644 --- a/code/style.css +++ b/code/style.css @@ -117,7 +117,7 @@ a { margin-left: auto; margin-right: auto; width:80vw; - height:40vh; + height:60vh; } From 529a58bc8095d8536d860cce66222dce99b250bd Mon Sep 17 00:00:00 2001 From: isomoth Date: Fri, 15 Oct 2021 21:02:56 +0200 Subject: [PATCH 6/6] fixed forkedRepos function and fixed indentation --- code/chart.js | 78 +++++++++++++++++++++---------------------------- code/index.html | 16 ++++++---- code/script.js | 48 +++++++++++++++--------------- code/style.css | 55 ++++++++++++++++------------------ 4 files changed, 93 insertions(+), 104 deletions(-) diff --git a/code/chart.js b/code/chart.js index c622b8d4..d0d688ff 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,49 +1,39 @@ -// DOM-selector for the canvas +// DOM-selector for the canvas const ctx = document.getElementById('myChart').getContext('2d'); // Generate the chart based on the data fetched on script.js - const drawChart = (amount) => { - const config = { - type: 'bar', - data: { - labels: [ - 'Finished Projects', - 'Projects Left', - ], - datasets: [{ - label: 'Completed Projects', - data: [amount, 19-amount], - backgroundColor: [ - '#D365C8', - '#3aafc9', - ], - hoverOffset: 4 - }] +const drawChart = (amount) => { + const config = { + type: 'bar', + data: { + labels: ['Finished Projects', 'Projects Left'], + datasets: [ + { + label: 'Completed Projects', + data: [amount, 19 - amount], + backgroundColor: ['#D365C8', '#3aafc9'], + hoverOffset: 4, + }, + ], + }, + options: { + // The first two options make the chart responsive + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + tooltips: { + callbacks: { + label: function (tooltipItem) { + return tooltipItem.yLabel; + }, }, - options: { - // The first two options make the chart responsive - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - }, - tooltips: { - callbacks: { - label: function(tooltipItem) { - console.log(tooltipItem) - return tooltipItem.yLabel; - }, - }, - }, - } - } - }; - - const myChart = new Chart( - ctx, - config - ); - } + }, + }, + }, + }; - \ No newline at end of file + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 0ffad068..acf57452 100644 --- a/code/index.html +++ b/code/index.html @@ -5,12 +5,18 @@ Project GitHub Tracker - - + + - - - + + + diff --git a/code/script.js b/code/script.js index 8c9a2391..c2be447e 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,5 @@ -// The strict mode in JavaScript prevents several bugs. For example, it won't let you use undeclared variables. -"use strict"; +// The strict mode in JavaScript prevents several bugs. For example, it won't let you use undeclared variables. +'use strict'; // Global variables const USER = 'isomoth'; @@ -33,7 +33,7 @@ getUserProfile(); // Fetch all of the user's projects where a pull request has been made const getPullRequests = (allRepos) => { allRepos.forEach((repo) => { - const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; fetch(PULL_URL) .then((response) => response.json()) .then((data) => { @@ -41,11 +41,12 @@ const getPullRequests = (allRepos) => { (pull) => pull.user.login === repo.owner.login ); // Filter out pull requests from other users and fetch commits from them - if(userPullRequest){ + if (userPullRequest) { getCommits(userPullRequest.commits_url, repo.name); } else { // Catch exception when no pull request has been made - document.getElementById(`commit-${repo.name}`).innerHTML = 'No pull requests so far.'; + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull requests so far.'; } }); }); @@ -53,15 +54,15 @@ const getPullRequests = (allRepos) => { //Fetch all commits from filtered projects const getCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) // this will be 'commits_url' from line 45 - .then((res) => res.json()) - .then((data) => { - // Count amount of commits - document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; - }); + fetch(myCommitsUrl) // this will be 'commits_url' from line 45 + .then((res) => res.json()) + .then((data) => { + // Count amount of commits + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); }; -// Fetch all repositories that the user has forked from Technigo +// Fetch all repositories that the user has forked from Technigo const getRepositories = () => { fetch(REPOS_URL) .then((response) => response.json()) @@ -71,27 +72,24 @@ const getRepositories = () => { ); // Sort repos based on date of creation ("created_at") forkedRepos.sort( - (a, b) => new Date(b.created_at) - new Date(a.created_at) + (b, a) => new Date(a.created_at) - new Date(b.created_at) ); - // Display them from earliest to latest - forkedRepos = forkedRepos.reverse(); // Finally, use a loop to generate a card container for each project and fetch other relevant info about it - forkedRepos.forEach( - (repo) => { - projectsContainer.innerHTML += - `
-

${repo.name}

+ forkedRepos.forEach((repo) => { + projectsContainer.innerHTML += `
+

${ + repo.name + }

Default branch: ${repo.default_branch}

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

Amount of commits:

-

` - }, - ); +

`; + }); getPullRequests(forkedRepos), - //Use the data above to generate the chart from chart.js, displaying elapsed vs. remaining projects - drawChart(forkedRepos.length); + //Use the data above to generate the chart from chart.js, displaying elapsed vs. remaining projects + drawChart(forkedRepos.length); }); }; diff --git a/code/style.css b/code/style.css index ba1db995..f29edc82 100644 --- a/code/style.css +++ b/code/style.css @@ -1,10 +1,9 @@ -*{ +* { margin: 0; padding: 0; box-sizing: border-box; } - /* PALETTE Dark grey: #222a36 @@ -21,10 +20,9 @@ Magenta: #D6434A /* ----------------------------------------------- */ body { - - background: #D5CABD; + background: #d5cabd; font-family: 'Martel Sans', Helvetica, Arial, sans-serif; - color: #37888A; + color: #37888a; margin: 1rem; font-size: 16px; } @@ -48,14 +46,14 @@ a { text-align: center; } -.bio{ +.bio { margin-top: 1rem; padding-left: 2rem; padding-right: 2rem; } -.bio, -.public, +.bio, +.public, .twitter { color: #474554; } @@ -64,8 +62,8 @@ a { padding: 0.5rem; margin-bottom: 5px; width: 100%; - background: #DDEBEB; - display: block; + background: #ddebeb; + display: block; margin-left: auto; margin-right: auto; text-align: center; @@ -74,12 +72,12 @@ a { border-radius: 6px; } -.user-image{ +.user-image { width: 50%; - height: fit-content; + height: fit-content; border-radius: 50%; box-shadow: 0 0 0 0.1px; - display: block; + display: block; margin-left: auto; margin-right: auto; } @@ -90,7 +88,7 @@ a { #project-grid { display: grid; - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(1, 1fr); } .repo-card { @@ -104,7 +102,7 @@ a { } .repo-link { - color: #D6434A; + color: #d6434a; font-size: 20px; } @@ -116,36 +114,33 @@ a { margin-top: 2rem; margin-left: auto; margin-right: auto; - width:80vw; - height:60vh; + width: 80vw; + height: 60vh; } - - /* ----------------------------------------------- */ /* MEDIA QUERIES */ /* ----------------------------------------------- */ @media screen and (min-width: 600px) { - #project-grid { + #project-grid { grid-template-columns: repeat(2, 1fr); grid-gap: 30px; - }; - .user-image{ + } + .user-image { width: 30%; height: auto; } } @media screen and (min-width: 768px) { - .user-image{ + .user-image { width: 40%; height: auto; } } @media screen and (min-width: 1024px) { - .profile-container { display: grid; grid-template-columns: 1fr 3fr; @@ -161,8 +156,8 @@ a { justify-content: flex-start; margin-top: 0; } - - .user-image{ + + .user-image { width: 75%; } @@ -172,12 +167,12 @@ a { h1 { font-size: 3em; - } + } h2 { font-size: 2em; } h3 { - font-size: 1em; + font-size: 1em; } .bio { font-size: 1em; @@ -192,6 +187,6 @@ a { max-width: 2000px; } .chart-container { - max-width:1500px; + max-width: 1500px; } -} \ No newline at end of file +}