Week 7 – Github Tracker – Emma Lindell #111
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| # GitHub Tracker 📊 | ||
|
|
||
| This weeks project was to create a GitHub tracker using JavaScript and GitHub API. | ||
|
|
||
| ## The problem | ||
|
|
||
| I started the project by fetching the data and filtered the repositories I wanted to show on my site. My main struggle this week was JavaScript, I found it hard to create more structure of it. To solve my problem I discussed a lot with my team and asked questions in StackOverflow. If I had more time I would like to fetch more data to display on my page, and also make it even more responsive. | ||
|
|
||
| ## View it live | ||
|
|
||
| https://github-tracker-emmajosefina.netlify.app/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // .gitignore file | ||
| secret.js | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,34 @@ | ||
| const ctx = document.getElementById('chart').getContext('2d') | ||
|
|
||
| const renderChart = (completedProjects) => { | ||
|
|
||
|
|
||
| const labels = [ | ||
| 'Projects done', | ||
| 'Projects left to do' | ||
| ]; | ||
|
|
||
| const data = { | ||
| labels: labels, | ||
| datasets: [{ | ||
| backgroundColor: 'rgb(217, 169, 165)', | ||
| label: 'Technigo Projects', | ||
| borderColor: 'rgb(192, 113, 106)', | ||
| data: [completedProjects, 19-completedProjects], | ||
| }] | ||
| }; | ||
|
|
||
| const config = { | ||
| type: 'bar', | ||
| data: data, | ||
| options: { | ||
| responsive: true, | ||
|
There was a problem hiding this comment. Did you want the chart to cover the page from side to side? Because the size of the chart is good for mobile size but displays quite big in desktop size.
Author
There was a problem hiding this comment. Thanks for noticing Ida! I thought about that too and want to change it for desktop. Do you know which element to add in that case? There was a problem hiding this comment. I found the instructions here: https://www.chartjs.org/docs/latest/configuration/responsive.html
Author
There was a problem hiding this comment. Oh, thanks! I got a 404 though :( |
||
| } | ||
| }; | ||
|
|
||
|
|
||
| new Chart( | ||
| document.getElementById('chart'), | ||
| config | ||
| )} | ||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| // Token | ||
| const options = { | ||
| method: 'GET', | ||
| headers: { | ||
| Authorization: `TOKEN ${API_TOKEN}` | ||
| } | ||
| } | ||
|
|
||
| // DOM selectors | ||
| const projectInfo = document.getElementById('projectInfo') | ||
| const userInfo = document.getElementById('userInfo') | ||
| const aboutUser = document.getElementById('aboutUser') | ||
| const profilePicture = document.getElementById('profilePicture') | ||
| const mainContent = document.getElementById('mainContent') | ||
|
|
||
|
|
||
| // Github API | ||
| const username = 'emmajosefina' | ||
| const API_URL = `https://api.github.com/users/${username}/repos` | ||
| const API_USER = `https://api.github.com/users/${username}` | ||
|
|
||
|
|
||
|
|
||
| //------------------ FIRST FETCH - USER PROFILE -----------------------// | ||
| const getProfile = () => { | ||
| fetch(API_USER, options) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| mainContent.innerHTML += | ||
| ` | ||
| <section class="profile-box"> | ||
| <img src="${data.avatar_url}" id="profilePicture" class="profile-picture" /> | ||
| <p class="full-name">${data.name}</p> | ||
| <p class="username">${data.login}</p> | ||
| </section> | ||
| <div class="status-box"> | ||
| <p class="status-text">${data.bio} 👩💻</p> | ||
| </div> | ||
| `; | ||
| }); | ||
| }; | ||
| getProfile(); | ||
|
|
||
|
|
||
| //------------------ SECOND FETCH - ALL REPOS -----------------------// | ||
| const findingAllRepos = (repos) => { | ||
| fetch(API_URL, options) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
|
|
||
|
|
||
|
|
||
| // Fetches only repositories from Technigo // | ||
| const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) | ||
|
|
||
|
|
||
| forkedRepos.forEach((repo) => | ||
| projectInfo.innerHTML += | ||
|
|
||
| ` | ||
| <div class="projectContainer"> | ||
| <p class="smallerContainer"> | ||
| <span class="header-project"> | ||
| ${repo.name.replace('project-', '').replace('-', ' ')} | ||
|
There was a problem hiding this comment. Really nice removing "project" and the hyphens, I never got around to that myself. It also makes it more visible that the repos ar displayed alphabetically. |
||
| </span> | ||
| </p> | ||
| <p class="smallerContainer"> | ||
| <span> Updated:</span> | ||
| <span> ${new Date(repo.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}</span> | ||
|
There was a problem hiding this comment. Looks really good with the month as |
||
| </p> | ||
| <p class="smallerContainer"> | ||
| <span> | ||
| Default branch: </span> | ||
| <span>${repo.default_branch}</span> | ||
| </p> | ||
| <p class="smallerContainer" id="commit-${repo.name}"> | ||
| <span> | ||
| Number of commits: | ||
| </span> | ||
| </p> | ||
| <p class="smallerContainer" id="pull-request-${repo.name}"> | ||
| <span>Pull requests: </span> | ||
| </p> | ||
| <p class="smallerContainer"> | ||
| <img src="images/github-logo-extra-big.png" alt="github-logo" width="15px" /> | ||
| <span><a class="project-url" href="${repo.svn_url}"> | ||
| ${repo.name}</span> | ||
| </a> | ||
| </p> | ||
| </div> | ||
| ` | ||
| ) | ||
| getPullRequest(forkedRepos) | ||
| renderChart(forkedRepos.length) | ||
| }) | ||
| } | ||
| findingAllRepos() | ||
|
|
||
|
|
||
|
|
||
| const getCommits = (myCommitsUrl, myRepoName) => { | ||
| fetch(myCommitsUrl, options) | ||
| .then((res) => { | ||
| return res.json() | ||
| }) | ||
| .then((data) => { | ||
|
|
||
| document.getElementById(`commit-${myRepoName}`).innerHTML += data.length | ||
| }) | ||
| } | ||
|
|
||
| //------------------ THIRD FETCH - PULL REQUESTS -----------------------// | ||
| const getPullRequest = (repos) => { | ||
| repos.forEach((repo) => { | ||
| fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
|
|
||
| //Filter out pullrequests | ||
| const pulls = data.find((pull) => pull.user.login === repo.owner.login) | ||
| const myPullRequests = data.filter((pullRequest) => { | ||
| return pullRequest.user.login === username | ||
| }) | ||
| document.getElementById(`pull-request-${repo.name}`).innerHTML = `Pull Request: ${myPullRequests.length}` | ||
| if (pulls) { | ||
| getCommits(pulls.commits_url, repo.name) | ||
| } else { | ||
| document.getElementById( | ||
| `commit-${repo.name}`).innerHTML += `no commits visible, pull request unavailable.`; | ||
| } | ||
|
There was a problem hiding this comment. Nicely done with displaying the pull requests! |
||
| }); | ||
|
|
||
| }); | ||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job with gitignore!