diff --git a/README.md b/README.md index 1613a3b0..195a6a18 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # 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. +The assignment was to create a tracker of our GitHub repositories, using their API. Flesh it out with profile name & avatar, commits per repo and a chart among a few more things. ## 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? +We had to fetch the data from the GitHub API, parse it and present it on our page. With a lot of repositories and objects in general, we had to apply a few filters in order to find the ones we want to use. + +The Rate Limit of the API (60 per hour) had me frustrated more than once. However, it was good practice to be more thorough when coding; to rely less on the Live Server output showing you small changes. DevTools is a good alternative to try iterative type of improvements. + +Had the Rate Limit not been such a time sink, I would've spent more time pulling different types of data in & presenting it, sorting of the projects, and styling. ## 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. +Cheers https://jolly-kirch-bd4816.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..ca48a905 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,36 @@ -//DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const technigoProjects = 21 -//"Draw" the chart here 👇 +const drawBarChart = (repos) => { + new Chart(ctx, { + type: 'doughnut', + data: { + labels: [ + 'Projects to do', + 'Finished projects' + ], + datasets: [ + { + data: [ + technigoProjects - repos.length, + repos.length, + ], + backgroundColor: [ + '#d5a7b6', + '#5c7fe9' + ] + } + ] + }, + options: { + plugins: { + legend: { + display: true, + labels: { + color: 'rgb(0, 0, 0)' + } + } + }, + }, + }) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b69ee605 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,43 @@ + - Project GitHub Tracker + + Project Four: Ziko's GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
- - +
+

Ziko's GitHub Tracker

+
+ +
+ +
+ +

"Project" repos:

+
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..4d046ab8 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,77 @@ +let USER = 'vrill' + +const USER_URL = `https://api.github.com/users/${USER}` +const USER_REPOS_URL = `${USER_URL}/repos` + +const profileContainer = document.getElementById('profile-wrapper') +const projectsContainer = document.getElementById('projects') + +const fetchProfile = () => { + fetch(USER_URL) + .then((response) => response.json()) + .then((data) => { + profileContainer.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

Amount of public repositories: ${data.public_repos}.

+
+ ` + }) +} +fetchProfile() + +const fetchRepos = () => { + fetch(USER_REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const technigoRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ) + technigoRepos.forEach((repo) => { + projectsContainer.innerHTML += ` +
+

${repo.name} (${repo.default_branch})

+

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

+

Number of commits:

+

Main language: ${repo.language}

+
+ ` + }) + fetchPullRequestsArray(technigoRepos) + drawBarChart(technigoRepos) + }) +} + + /* This URL only seems to work for open pull requests, closed ones do not show up. */ + const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((response) => response.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit_${repo.name}`) + .innerHTML = 'Pull request unavailable, or closed.'; + } + }) + }) + } + + const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit_${myRepoName}`).innerHTML += data.length + }) + } + +fetchRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..804caa6b 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,98 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito'); + +html { + scroll-behavior: smooth; +} + body { - background: #FFECE9; + background: rgb(130, 60, 60); + font-family: 'Nunito', sans-serif; + margin: 0 auto; +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.2rem; + text-align: center; +} + +h3 { + text-align: center; + background-color: rgba(130, 60, 60, 0.2); + border-radius: 0.4rem; + margin-top: 0; + padding: 1rem 0rem; +} + +#profile-wrapper { + display: block; + text-align: center; +} + +#profile { + display: inline-block; + justify-content: center; +} + +.profile-image { + display: inline-block; + width: 160px; + height: 160px; + border-radius: 50%; + border: 2px solid whitesmoke; + overflow: hidden; + margin-bottom: 0; +} + +.profile-image > a > img { + width: 100%; +} + +#projects { + display: flex; + flex-flow: row wrap; + justify-content: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.projects-card { + width: 320px; + background-color: #f2f2f2; + box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem; + border-radius: 0.4rem; + padding: 1rem; +} + +#chart-wrapper { + width: 90vw; + max-width: 512px; + margin: 0 auto; +} + +header { + position: sticky; + top: 0; +} + +footer { + margin-top: 1rem; +} + +header, footer { + background-color: #f2f2f2; + text-align: center; + padding: 1rem 0rem; + width: 100%; +} + +footer, a { + color: rgb(130, 60, 60) +} + +footer > p > a { + text-decoration: none; } \ No newline at end of file