diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..226a27ee --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +token.js +process.txt diff --git a/README.md b/README.md index 1613a3b0..b0f691d3 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. - -## 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? +The assignment was to work with GitHub's REST API to build a GitHub tracker that consists of: +- Username and profile picture +- Information for each repository forked from Technigo +- A chart of completed projects +- Working with authentification ## 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. +Link to my project live: https://githubtracker-ari.netlify.app/ \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..e8ef9f37 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,49 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const renderChart = ((completedProjects) => { -//"Draw" the chart here 👇 + const data = { + labels: [''], + datasets: [{ + data: [completedProjects], + label: 'completed', + backgroundColor: 'rgb(63, 103, 126)', + }, { + data: [19-completedProjects], + label: 'remaining', + backgroundColor: 'rgb(63, 203, 226, 0.1)', + }] + }; + + const config = { + type: 'bar', + data: data, + options: { + indexAxis: 'y', + scales: { + x: { + stacked: true, + grid: { + display: true, + }, + }, + y: { + stacked: true, + grid: { + display: true, + } + } + }, + plugins: { + title: { + display: true, + text: `Technigo projects completed: ${completedProjects} of 19`, + position: 'top', + }, + legend: { + display: false, + position: 'top', + } + } + } + }; + new Chart(document.getElementById('chart'), config); +}); \ No newline at end of file diff --git a/code/images/github_icon.png b/code/images/github_icon.png new file mode 100644 index 00000000..182a1a3f Binary files /dev/null and b/code/images/github_icon.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..6d27f827 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,17 @@ Project GitHub Tracker +

GitHub Tracker

-

Projects:

-
- - - +
+
+ +
+
+ diff --git a/code/script.js b/code/script.js index e69de29b..5615e974 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,69 @@ +const OPTIONS = { + method: 'GET', + headers: { + Authorization: TOKEN + } +} + +const USER = 'ariallahyar'; + +const url = { + user: 'https://api.github.com/users/ariallahyar', + repo: 'https://api.github.com/users/ariallahyar/repos', + pulls: (repoName) => {return `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`}, + commits: (repoName) => {return `https://api.github.com/repos/ariallahyar/${repoName}/commits?per_page=100`} +} + +const fetcher = (url, token, callback) => { + fetch(url, token) + .then((response) => { + return response.json(); + }) + .then((data) => { + callback(data); + }) + .catch((error) => { + console.log(error); + }) +}; + +fetcher (url.user, OPTIONS, ((userProfile) => { + document.getElementById('profile').innerHTML += ` + profile-pic +

${userProfile.name}

+

${userProfile.login}

+

${userProfile.bio}

+ `; +})); + +fetcher(url.repo, OPTIONS, ((repositories) => { + let forkedReps = repositories.filter((repo) => { + return repo.fork === true && repo.name.startsWith("project-") + }); + + renderChart(forkedReps.length); + + forkedReps.forEach((rep) => { + + document.getElementById('projects').innerHTML += ` +
+

${rep.name.replace('project-', '').replace('-', ' ')}

+ + ${rep.name} +

Updated: ${new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}

+

Default branch: ${rep.default_branch}

+
+ `; + + fetcher(url.commits(rep.name), OPTIONS, ((commits) => { + document.getElementById(rep.name).innerHTML += `

Number of commits: ${commits.length}

` + })); + + fetcher(url.pulls(rep.name), OPTIONS, ((pullRequests) => { + const myPulls = pullRequests.filter((pull) => { + return pull.user.login === USER; + }) + document.getElementById(rep.name).innerHTML += `

Pull requests: ${myPulls.length}

` + })); + }); +})); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..b26373cd 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,81 @@ +* { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + body { - background: #FFECE9; + background: white; + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem 0rem; +} + +.profile-wrapper { + text-align: center; +} + +.profile-pic { + max-height: 40vh; + border-radius: 50%; + padding: 1rem 0rem; +} + +.profile-name { + font-weight: bolder; +} + +.profile-username { + font-weight: lighter; +} + +.profile-bio { + max-width: 20rem; + padding: 1rem 0rem; +} +.chart-wrapper { + width: 20rem; +} + +.project-wrapper { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + justify-content: center; + width: 100%; + padding: 1rem 0rem; +} + +.project { + background-color: rgb(63, 203, 226, 0.15); + padding: 1rem 1rem; + margin: 1rem; + line-height: 22px; +} + +.project-name { + text-transform: capitalize; + font-size: 18px; +} + +.project-url { + color: rgb(63, 103, 126); + font-weight: bold; + text-decoration: none; +} + +.project-url:hover { + font-weight: bolder; + text-decoration: underline; +} + +.github { + height: 12px; +} + + +@media (min-width: 667px) { + .profile-bio { + max-width: 40rem; + } } \ No newline at end of file