Week 7 project-github-tracker #100
There are no files selected for viewing
Binary file not shown.
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 @@ | ||
| 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,13 +1,12 @@ | ||
| # GitHub Tracker | ||
| Assignment to fetch Technigo Projects with name and URL + number of commits via pull requests. | ||
| Also calculate projects made comparing to projects remaining. | ||
|
|
||
| ## The problem | ||
| I started with the Js file - trying one API fetch at a time - console logging and then positioning the data in InnerHTML before declaring and invoking next function. After all information i needed was fetched I did the styling. Last I made the chart and the token. | ||
| I googled, used SO for checking other people questions regarding this project. | ||
| If I had more time I would have added more information like commit comments. | ||
|
|
||
| ## View it live | ||
|
|
||
| https://ecstatic-wing-3740de.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 |
|---|---|---|
| @@ -1,4 +1,29 @@ | ||
| //DOM-selector for the canvas | ||
| const ctx = document.getElementById('chart').getContext('2d') | ||
|
|
||
| const activateChart = (projects) => { | ||
|
|
||
| const labels = [ | ||
| 'Projects completed', | ||
| 'Projects in pipeline', | ||
| ]; | ||
|
|
||
| const data = { | ||
| labels: labels, | ||
| datasets: [{ | ||
| data: [projects, 19-projects], | ||
| backgroundColor: ['rgb(255, 99, 132)','rgb(255, 69, 0)'], | ||
| borderColor: ['rgb(255, 99, 132)','rgb(255, 69, 0)'], | ||
| }] | ||
| }; | ||
|
|
||
| const config = { | ||
| type: 'doughnut', | ||
| data: data, | ||
| }; | ||
|
|
||
| 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.
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,102 @@ | ||
| //DOM selectors | ||
| const userContainer = document.getElementById ('userContainer') | ||
| const projectContainer = document.getElementById ('projectContainer') | ||
|
|
||
| //Global selectors | ||
| const user = 'josse79' | ||
| const API_USER = `https://api.github.com/users/${user}` | ||
| const API_REPOS_LIST = `https://api.github.com/users/${user}/repos` | ||
|
|
||
| //The TOKEN function | ||
| const options = { | ||
| method: 'GET', | ||
| headers: { | ||
| Authorization: 'API_KEY' | ||
| } | ||
| } | ||
|
|
||
| //1st function and fetch to get the user details | ||
| const getUser = () => { | ||
| fetch(API_USER, options) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| userContainer.innerHTML = ` | ||
| <img class='user-image' src='${data.avatar_url}'/> | ||
| <h2 class='user-name'> ${data.login}</h2>` | ||
| }) | ||
| getRepos () | ||
| } | ||
| //2nd function and fetch to get the repo list | ||
| const getRepos = () => { | ||
| fetch(API_REPOS_LIST, options) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| //Filtering out the forked repos & repos starting with project | ||
| const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project')) | ||
| forkedRepos.forEach((repo) => { | ||
| //Positioning the information in HTML also with dynamic ID repo.name | ||
| projectContainer.innerHTML += ` | ||
| <div class='repos' id=${repo.name}> | ||
| <h1>${repo.name}</h1> | ||
| <a href='${repo.html_url}' target='_blank'>${repo.html_url}</a> | ||
| <p>Default branch ${repo.default_branch}</p> | ||
| <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p> | ||
| </div>` | ||
| }) | ||
| //Passing the filtered repos to next function | ||
| getPullRequests(forkedRepos) | ||
| //Passing the filtered repos length to chartfunction in chart.js | ||
| activateChart(forkedRepos.length) | ||
| }) | ||
|
|
||
| //3rd function and fetch to get all the pulls with help of repo.name | ||
| 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(data => { | ||
| //Filter my own pulls by comparing user login and repo owner | ||
| const filteredPulls = data.find((pull) => pull.user.login === repo.owner.login) | ||
| //Passing the filtered pulls to next functions | ||
| if (filteredPulls) { | ||
| //Passing the commits_url and review_comments_url as arguments to next functions | ||
| //Also passing along the dynamic ID repo.name to be able to positioning in HTML | ||
| getCommits(filteredPulls.commits_url, repo.name) | ||
| getReview(filteredPulls.review_comments_url, repo.name) | ||
| } else { | ||
| document.getElementById(`${repo.name}`).innerHTML += ` | ||
| <p>No pull request made</p>` | ||
| } | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| //4th function and fetch. Fetch (commits_url declared in getPullRequests function | ||
| //therefore activated by argument URL and repoName | ||
| const getCommits = (URL, repoName) => { | ||
| fetch(URL, options) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| //Positioning by dynamic ID repoName | ||
| document.getElementById(repoName).innerHTML += ` | ||
| <p>Number of commits: ${data.length}</p>` | ||
| }) | ||
| } | ||
|
|
||
| //5th function and fetch. Fetch (commits_url declared in getPullRequests function | ||
| //therefore activated by argument URL and repoName | ||
| const getReview = (URL, repoName) => { | ||
| fetch(URL, options) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| //If any review made - positioning data by dynamic ID repoName | ||
| if (`${data[0].user.login} == ''`) { | ||
| document.getElementById(repoName).innerHTML += ` | ||
| <p>Review made by: ${data[0].user.login}</p>` | ||
|
Comment on lines
+92
to
+95
There was a problem hiding this comment. Impressive to add the username of the code reviewer |
||
| } else { | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| //Invoking first function | ||
| getUser () | ||
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,114 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| -webkit-font-smoothing: antialiased; | ||
| text-rendering: optimizeLegibility; | ||
| font-family: "Roboto", sans-serif | ||
| } | ||
|
|
||
| h1 { | ||
| max-height: 5vh; | ||
| min-height: 2vh; | ||
| font-weight: 500; | ||
| padding-bottom: 1vh; | ||
| margin-bottom: 1vh | ||
| } | ||
|
|
||
| p { | ||
| padding: 0.5vh | ||
| } | ||
|
|
||
| a { | ||
| color: rgb(255, 69, 0) | ||
| } | ||
|
|
||
| .hero-image { | ||
| background-image: url("hero-grafitti2.jpg"); | ||
| width: 100vw; | ||
| height: 30vh; | ||
| background-position: center; | ||
| background-size: cover; | ||
| background-repeat: no-repeat | ||
| } | ||
|
|
||
| body { | ||
| color: black; | ||
| } | ||
|
|
||
| .user-container { | ||
| position: relative; | ||
| text-align: center; | ||
| bottom: 12vh | ||
| } | ||
|
|
||
| .user-image { | ||
| border-radius: 50%; | ||
| width: 25vh; | ||
| filter: grayscale(100%) | ||
| } | ||
|
|
||
| .project-container { | ||
| display: grid; | ||
| margin-top: -5vh; | ||
| justify-content: center; | ||
| text-align: center; | ||
| } | ||
| .repos { | ||
| padding-bottom: 5vh; | ||
| font-weight: 300; | ||
| margin-bottom: 5vh; | ||
| padding: 1vh; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .project-container :hover { | ||
| background: linear-gradient(90deg, #D1D1D1, #e6e6e6 50%, #e6e6e6 50%, #e6e6e6 50%, #D1D1D1); | ||
|
There was a problem hiding this comment. Didn't notice the hover gradient at first but so nice with a subtle and minimal gradient. Have to try this out on a future project! |
||
| } | ||
|
|
||
| .chart-section { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 7vh 0 15vh; | ||
| } | ||
| .chart-container { | ||
| max-width: 50vw; | ||
| min-width: 50vw | ||
| } | ||
|
|
||
| /*media queries*/ | ||
| @media screen and (min-width: 668px) { | ||
| .hero-image { | ||
| height: 35vh | ||
| } | ||
| .user-container { | ||
| bottom: 15vh | ||
| } | ||
| .user-image { | ||
| width: 30vh | ||
| } | ||
| .project-container { | ||
| grid-template-columns: 1fr 1fr | ||
| } | ||
| h1 { | ||
| margin-bottom: 2vh | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 1025px) and (orientation: landscape) { | ||
| .hero-image { | ||
| height: 55vh | ||
| } | ||
| .user-container { | ||
| bottom: 18vh | ||
| } | ||
| .user-image { | ||
| width: 35vh | ||
| } | ||
| .project-container { | ||
| margin-left: 12vw; | ||
| margin-right: 12vw | ||
| } | ||
| } | ||
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.
Ah smart solution for "removing" the border on the chart!