marianneardin-githubtracker #98
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,20 @@ | ||
| # GitHub Tracker | ||
| Requirements: | ||
|
|
||
| - A list of all repos that are forked from Technigo | ||
| - Your username and profile picture | ||
| - Most recent update (push) for each repo | ||
| - Name of your default branch for each repo | ||
| - URL to the actual GitHub repo | ||
| - Number of commits for each repo | ||
| - It should be responsive (mobile first) | ||
| - A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/). | ||
|
|
||
|
|
||
| ## The problem | ||
|
|
||
| This project wasn't easy to get my head around. It took me a while to get all fetches to show. I also struggled a bit with the chart. | ||
|
|
||
| ## View it live | ||
|
|
||
| https://marianneardin-githubtracker.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 @@ | ||
| token.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,23 @@ | ||
| //DOM-selector for the canvas | ||
|
|
||
| //Chart showing completed and remaining projects | ||
|
|
||
| const drawChart = (numberOfProjects) => { | ||
| const ctx = document.getElementById('chart').getContext('2d') | ||
| const config = { | ||
| type: "pie", | ||
| data: { | ||
| labels: ["Projects completed", "Projects remaining"], | ||
| datasets:[{ | ||
| label: "Technigo Projects", | ||
| data: [numberOfProjects, 19 - numberOfProjects], | ||
| backgroundColor:["rgb(255,255,255)", "rgb(102,153,153)"], | ||
| hoverOffset: 4, | ||
| }] | ||
| } | ||
| } | ||
|
|
||
| const chart = new Chart(document.getElementById('chart'), | ||
| config); | ||
|
|
||
| } |
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,92 @@ | ||
| //DOM selectors// | ||
| const userContainer = document.getElementById('userContainer') | ||
|
|
||
| //APIs to fetch from | ||
| const username = 'MarianneArdin' | ||
| const API_URL = `https://api.github.com/users/${username}` | ||
| const REPOS_URL = `https://api.github.com/users/${username}/repos` | ||
| //const API_TOKEN = TOKEN || process.env.API_TOKEN | ||
| //const API_MY_PROFILE = 'https://api.github.com/users/MarianneArdin' | ||
|
|
||
|
|
||
| //option for authorization | ||
| const options = { | ||
| method: 'GET', | ||
| headers: { | ||
| Authorization: `token ${API_TOKEN}` | ||
| } | ||
| } | ||
| //FETCHES PROFILE FROM GITHUB// | ||
| const fetchProfile = () => { | ||
| fetch(API_URL, options) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| console.log(data) | ||
| userContainer.innerHTML += ` | ||
| <div id="profile" class="profile"> | ||
| <div class="profile-image"> | ||
| <a href="${API_URL}"> | ||
| <img src="${data.avatar_url}" alt="Avatar of ${data.login}"> | ||
| </a> | ||
| </div> | ||
| <a href="https://github.com/MarianneArdin"><h1 class="username">${data.login}<h1></a> | ||
| <h2>My projects</h2> | ||
| </div> | ||
| <div> | ||
| <p>Public repositories: ${data.public_repos}</p> | ||
| </div> | ||
| ` | ||
|
Comment on lines
+26
to
+38
There was a problem hiding this comment. Here I noticed that the last div containing the p tag public repositories is outside of the main div (starting from row 26). That means that the styling done with the class name profile isn't included into that div. Perhaps that was meant to be, just wanted to brought this up just in case :) |
||
| }) | ||
| } | ||
| fetchProfile() | ||
|
|
||
| //GET REPOS FROM GITHUB// | ||
| const getRepos = () => { | ||
| fetch(REPOS_URL, options) | ||
| .then((res) => res.json()) | ||
| .then((reposData) => { | ||
| console.log(reposData) | ||
| const forkedRepos = reposData.filter((repo) => repo.fork && repo.name.startsWith("project-")) | ||
| forkedRepos.forEach(repo => { | ||
| projectContainer.innerHTML += | ||
| ` | ||
| <a class="project-link" href="${repo.html_url}" target="_blank"> | ||
| <div class="forkedrepo-div"> | ||
| <h2 class="project-name"> ${repo.name}</h2> | ||
| <p class="project-info"> Default branch: ${repo.default_branch}</p> | ||
| <p class="project-info"> Recent push: ${new Date(repo.pushed_at).toDateString()}</p> | ||
| <p class="project-info" id="commits-${repo.name}"> Amount of commits: </p> | ||
| </div> ` | ||
| }) | ||
| getPullRequests(forkedRepos) | ||
|
|
||
| drawChart(forkedRepos.length) | ||
| }) | ||
| } | ||
| getRepos() | ||
|
|
||
| //GETS REPOS FROM GITHUB// | ||
| const getPullRequests = (repos) => { | ||
| repos.forEach(repo => { | ||
| fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) | ||
| .then(res => res.json()) | ||
| .then((pullData) => { | ||
| let myPullRequest = pullData.find((pull) => pull.user.login === repo.owner.login) | ||
| if (myPullRequest) { | ||
| getCommits(myPullRequest.commits_url, repo.name) | ||
| } else { | ||
| document.getElementById(`commits-${repo.name}`).innerHTML += `No pulls yet.` | ||
| } | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| //GET NUMBER OF COMMITS | ||
| const getCommits = (commitsUrl, repo) => { | ||
| fetch(commitsUrl, options) | ||
| .then(res => res.json()) | ||
| .then((data) => { | ||
| document.getElementById(`commits-${repo}`).innerHTML += `${data.length}` | ||
| console.log(data.length) | ||
| }) | ||
| } | ||
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,3 +1,77 @@ | ||
| body { | ||
| background: grey; | ||
| font-family: 'Bebas Neue', cursive; | ||
| margin: 1rem; | ||
| } | ||
|
|
||
| header { | ||
| background-color: lightgrey; | ||
| border-radius: 180%; | ||
| color: black; | ||
| text-align: center; | ||
|
|
||
| } | ||
|
|
||
| .flex { | ||
|
There was a problem hiding this comment. I wasn't able to find an element with this class name, is it used somewhere? |
||
| display: flex; | ||
|
|
||
| } | ||
|
|
||
| h1 { | ||
| font-size: 40px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 40px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /*Image*/ | ||
| img { | ||
| width: 200px; | ||
| border-radius: 50%; | ||
| padding: 2rem; | ||
| } | ||
|
|
||
| a { | ||
| color: black; | ||
| } | ||
|
|
||
| .profile | ||
| { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
|
There was a problem hiding this comment. I think these two rows you could combine using: margin: x auto. X (insert right number here) referring to top and bottom margin and auto referring to right and left margin :) |
||
| width: 50%; | ||
| } | ||
| .forkedrepo-div | ||
| { | ||
| border: black solid; | ||
| padding: 1rem; | ||
| margin: 2rem; | ||
| } | ||
| /* THE CHART SECTION */ | ||
|
|
||
| #chart-wrapper { | ||
| width: 90%; | ||
| margin: 20px auto 40px; | ||
| } | ||
|
Comment on lines
+64
to
+59
There was a problem hiding this comment. You're using the id chartwrapper here, but I couldn't find this id name from the code? You have a class name chart-container created for the element containing the chart (row 34 in html). It is good standard to use class names for styling, so maybe that class name could be used here instead? :) |
||
|
|
||
| #chart { | ||
|
There was a problem hiding this comment. Maybe here also would be better to use the class name instead of the id for the chart? |
||
| padding: 5%; | ||
| } | ||
|
|
||
| /* This is styling for the footer*/ | ||
| footer { | ||
| background-color: darkgrey; | ||
| text-align: center; | ||
| } | ||
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.
Uh oh!
There was an error while loading. Please reload this page.
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.
I'm not sure what this title or id is referring to? I didn't notice that it would print anything to the page and I didn't see that it was used in the script file either. Maybe it can be removed if unnecessary? :)