diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..9d9e578f Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..de84106d 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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. +Project making a GitHub tracker that tracks my profile repositories data with the help of GitHub API's and presents it on a page. ## 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? +Watched the online lectures and resources to get an idea how to approach the task at hand. Tried to make it look sort of similar to GitHub. +Used a lot of fetch of APIs and tried to figure out which data that was relevant to use and how to add it on the page in a good way. +If I had more time I would've wanted to grab more data and charts adding more content. ## 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://quizzical-fermi-01d0aa.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..2837c136 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..b96e95db 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') -//"Draw" the chart here 👇 +//Doughnut chart for projects +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished', + 'Not Finished', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 20-amount], + backgroundColor: [ + 'rgb(87, 166, 255)', + 'rgb(128, 128, 128)', + ], + hoverOffset: 2, + borderWidth: 0, + }] + }, + }; + const myChart = new Chart (ctx, config) +} + diff --git a/code/github-icon-black.svg b/code/github-icon-black.svg new file mode 100644 index 00000000..bdf7b7a0 --- /dev/null +++ b/code/github-icon-black.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..85d8f0e1 100644 --- a/code/index.html +++ b/code/index.html @@ -5,15 +5,30 @@ Project GitHub Tracker + + + -

GitHub Tracker

-

Projects:

-
- - +
+ +

GitHub Tracker

+
+ +

Projects

+
+ +
+ +
+ +
+ + diff --git a/code/script.js b/code/script.js index e69de29b..afd9cc02 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,109 @@ +const USER = 'dandeloid' +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const profileContainer = document.getElementById('profile') +const projectsContainer = document.getElementById('projects') +const pullContainer = document.getElementById('pullRequests') + +//Fetch for profile name and profile picture +const getProfile = () => { +fetch (`https://api.github.com/users/${USER}`) + .then(response => response.json()) + .then(data => { + profileContainer.innerHTML = ` + +
+ + ${data.login} +
+

"${data.bio}"

+

Location - ${data.location}

+ ` + }) +} +getProfile() + +//Fetch for Technigo forked repos +const getRepos = () => { + 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} +

Branch: ${repo.default_branch}

+

Last push: ${repo.pushed_at.slice(0, 10)} - ${repo.pushed_at.slice(11, 16)}

+

Commits:

+

Last comments:

+

+

+

+
+ ` + }) + drawChart(forkedRepos.length) + fetchPulls(forkedRepos) + commitComments(forkedRepos) + }) +} + +//Fetch pull request +const fetchPulls = (allRepositories) => { + allRepositories.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 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 = 'Commits: 0' + } + }) + }) +} + +//Fetch nr of commits +const fetchCommits = (myCommitsUrl, RepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit-${RepoName}`).innerHTML += data.length + }) + } + +//Fetch last commit messages +const commitComments = (forkedRepos) => { + forkedRepos.forEach((repo) => { + const COM_URL = `https://api.github.com/repos/dandeloid/${repo.name}/commits` + fetch(COM_URL) + .then((response) => response.json()) + .then((data) => { + + if (data[0].author.login === 'dandeloid'){ + const commitDate1 = new Date (data[0].commit.committer.date).toDateString() + document.getElementById(`comment1-${repo.name}`).innerHTML += `${commitDate1}: "${data[0].commit.message}"` + } + if (data[1].author.login === 'dandeloid'){ + const commitDate2 = new Date (data[1].commit.committer.date).toDateString() + document.getElementById(`comment2-${repo.name}`).innerHTML += `${commitDate2}: "${data[1].commit.message}"` + } + if (data[2].author.login === 'dandeloid'){ + const commitDate3 = new Date (data[2].commit.committer.date).toDateString() + document.getElementById(`comment3-${repo.name}`).innerHTML += `${commitDate3}: "${data[2].commit.message}"` + } + else{ + document.getElementById(`comment1-${repo.name}`).innerHTML += `No comments atm` + } + + }) + }) +} + +//Start fetching repository data +getRepos() + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..0e8f09e1 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,107 @@ +:root { + --gblue: rgb(87, 166, 255); +} body { - background: #FFECE9; -} \ No newline at end of file + background: black; + color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +.content { + max-width: 300px; + margin: auto; +} +.title { + text-align: center; +} +.profile-picture { + width: 100%; + border-radius: 100%; + padding: 20px 0; +} +.profile-name { + display: flex; + justify-content: center; +} +.profile-title { + text-decoration: none; + color: white; + font-size: 1.8rem; + margin: 20px 0; +} +.github-icon { + border-radius: 100%; + width: 30px; + margin-right: 10px; +} +.bio, +.location { + text-align: center; + padding-bottom: 20px; +} +.projects-title { + border-top: 1px solid grey; + padding: 40px 0 10px 0; + text-align: center; +} +.repo-name { + font-size: 1.3rem; + color: var(--gblue); + text-decoration: none; +} +.single-project { + border: 1px solid grey; + border-radius: 5px; + padding: 10px 10px 10px 20px; + margin: 10px 10px; +} +a:hover { + text-decoration: underline; +} +.last-push { + font-size: 0.8rem; + color: grey; +} +.comment-text { + font-size: 0.8rem; + color: grey; +} +.chart { + width: 300px; + margin: 20px 0; +} +footer { + border: 1px solid grey; + border-radius: 5px; + width: 300px; + margin: auto; + padding: 10px; + margin-top: 50px; + text-align: center; + font-size: 0.8rem; +} + +/* Tablet > */ +@media (min-width: 768px) { + .content { + max-width: none; + } + .profile-picture { + display: block; + margin-left: auto; + margin-right: auto; + width: 300px; + } + .projects { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + .chart { + display: block; + margin-left: auto; + margin-right: auto; + width: 300px; + } + footer { + width: auto; + } +}