Project GitHub tracker, Elin Diczfalusy w7 #19
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 |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| # GitHub Tracker | ||
|
|
||
| GitHub tracker to follow our forked projects from Technigo | ||
|
|
||
| ## The problem | ||
|
|
||
| REally challanged week for me because of sickness in family. Have spend half the time I use to. Javascript felt good as I often think, good practice fetch functions and API. Have better control of passing around arguments. Styling and CSS is the challange for me. Would really like to have more time to play around with info from API | ||
|
|
||
| ## View it live | ||
|
|
||
| https://ajliins-githubtracker.netlify.app/ |
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 |
|---|---|---|
| @@ -1,4 +1,33 @@ | ||
| //DOM-selector for the canvas 👇 | ||
| const ctx = document.getElementById('chart').getContext('2d') | ||
|
|
||
| //'Draw' the chart here 👇 | ||
| console.log('Pie chart is here') | ||
|
|
||
| const drawChart = (x) => { | ||
|
|
||
| const data = { | ||
| labels: [ | ||
| 'Done!', | ||
| 'Not done, yet!', | ||
|
|
||
| ], | ||
| datasets: [{ | ||
| label: 'My First Dataset', | ||
| data: [x, 19-x], | ||
| backgroundColor: [ | ||
| '#7B6079', | ||
| '#DE8971', | ||
|
|
||
| ], | ||
| hoverOffset: 4 | ||
| }] | ||
| }; | ||
|
|
||
| const config = { | ||
| type: 'doughnut', | ||
| data: data, | ||
| }; | ||
|
|
||
| let myChart = new Chart(ctx,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.
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.
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,92 @@ | ||
| const USER = `Ajliin` | ||
| const REPOS_URL = `https://api.github.com/users/${USER}/repos` | ||
|
|
||
| const firstContainer = document.getElementById('first') | ||
| const projectContainer = document.getElementById('projects') | ||
|
|
||
| // ------------FIRST FETCH FUNCTION------------ | ||
| const fetchRepos =() => { | ||
| fetch(REPOS_URL) | ||
| .then ((response) => { | ||
| return response.json() | ||
| }) | ||
| .then ((data) => { | ||
| repoInfo(data) | ||
| }) | ||
| } | ||
| fetchRepos() | ||
|
|
||
| // ------------function for first lines inside FIRST FETCH FUNCTION------------ | ||
|
|
||
| const repoInfo = ((data) =>{ | ||
| first.innerHTML = ` | ||
| <div> | ||
| <h1>Welcome to ${data[0].owner.login}s GitHub Tracker</h1> | ||
| <img class='profile-img' src='https://avatars.githubusercontent.com/u/84288114?v=4' alt='profile pic Ajliin'> | ||
| </div> | ||
| <div class=info-square> | ||
| <h2>Elin Diczfalusy</h2> | ||
| <p>User name: ${data[0].owner.login}</p> | ||
| <p>GitHub page: <a href='${data[0].owner.html_url}'>${data[0].owner.html_url}</a></p> | ||
| </div>` | ||
|
|
||
| // ------------function filters out the forked repos from Technigo | ||
| const forkedRepo = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) | ||
| // ------------function to chart.js on how many repos | ||
| drawChart(forkedRepo.length) | ||
| // ------------forEach repo --> send to innerHTML | ||
|
Comment on lines
+33
to
+37
There was a problem hiding this comment. Good job on the amount of comments on your code in general, so easy to follow and understand what everything does! :) |
||
| forkedRepo.forEach((repo) => { | ||
| let dateString = new Date(repo.pushed_at) | ||
|
|
||
| projectContainer.innerHTML += `<div class ='project'> | ||
| <p>Project name: ${repo.name}</p> | ||
| <p>Project url: <a href='${repo.html_url}'> ${repo.html_url}</a></p> | ||
| <p>Default branch: ${repo.default_branch}</p> | ||
|
|
||
| <p>Last push: ${dateString.toUTCString()} | ||
| <p id='commit-${repo.name}'>Commits amount: </p></div>` | ||
| }) | ||
|
|
||
| getProjectInfo(forkedRepo) | ||
|
|
||
| }) | ||
|
|
||
| getProjectInfo = (allRepositories) => { | ||
| allRepositories.forEach((project)=>{ | ||
| const PULL_API = `https://api.github.com/repos/technigo/${project.name}/pulls?per_page=100` | ||
|
|
||
| // ------------SECOND FETCH FUNCTION------------ | ||
| const fetchProjectinfo = (forkedRepo) => { | ||
| fetch(PULL_API) | ||
| .then ((response) => { | ||
| return response.json() | ||
| }) | ||
| .then ((json) => { | ||
| const myPullRequest = json.find((pull) => (pull.user.login === project.owner.login)) | ||
| // Första är alla användare, project.owner.login | ||
|
|
||
|
|
||
| if (myPullRequest) { | ||
| fetchCommits(myPullRequest.url, project.name) | ||
|
|
||
| }else{ | ||
| console.log('else part in function works', myPullRequest) | ||
|
|
||
| document.getElementById(`commit-${project.name}`).innerHTML += 'No pull request done yet' | ||
| } | ||
| }) | ||
| } | ||
| fetchProjectinfo() | ||
| }) | ||
| } | ||
| // ------------THRID FETCH FUNCTION------------ | ||
| const fetchCommits = ((commitUrl, projectName) => { | ||
| fetch(commitUrl) | ||
| .then ((response) => { | ||
| return response.json() | ||
| }) | ||
| .then ((data) => { | ||
| document.getElementById(`commit-${projectName}`).innerHTML += `${data.commits}` | ||
| }) | ||
|
|
||
| }) | ||
|
|
||
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,158 @@ | ||
| :root{ | ||
| --purple: #7B6079; | ||
| --orange:#DE8971; | ||
| --card-background: rgba(255, 255, 255, 0.531); | ||
| } | ||
|
|
||
| *{ | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| background-image: url(./img/background2.png); | ||
| font-family: raleway; | ||
| margin: 0; | ||
|
|
||
| } | ||
|
|
||
| h1 { | ||
| margin-top: 0; | ||
| text-align: center; | ||
| font-size: 34px; | ||
| line-height: 40px; | ||
| font-weight: 500; | ||
| margin-block-end:0.4em; | ||
| color: black; | ||
| } | ||
|
|
||
| h2 { | ||
| color:black; | ||
| margin-top: 0; | ||
| text-align: center; | ||
| font-size: 34px; | ||
| line-height: 40px; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| p{ | ||
| font-weight: 400; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| .main-container{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 0 auto; | ||
| padding: 2vh; | ||
| } | ||
|
|
||
| .first-coloumn{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| .profile-img{ | ||
| width: 70%; | ||
| border-radius: 50%; | ||
| border: 5px solid black; | ||
| margin: 1vh auto; | ||
|
|
||
| } | ||
| .info-square{ | ||
| background: var(--card-background); | ||
| border-radius: 10pt; | ||
| padding: 2vh; | ||
| width: 80%; | ||
| margin: 1vh auto; | ||
| border-left: 4px solid black; | ||
| border-right: 4px solid black; | ||
| } | ||
|
|
||
| .chart-container{ | ||
| width: 100%; | ||
| background-color: var(--card-background);; | ||
| border-radius: 10pt; | ||
| margin: 2vh auto; | ||
| width: 250px; | ||
| } | ||
|
|
||
| .projects-grid { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| } | ||
|
|
||
| .project{ | ||
| background-color: var(--card-background); | ||
| padding: 2vh; | ||
| border-radius: 12px; | ||
| margin: 2vh auto; | ||
| width:80%; | ||
| border-left: 4px solid black; | ||
| border-right: 4px solid black; | ||
| } | ||
|
|
||
|
|
||
| a{ | ||
| text-decoration: none; | ||
| color: black; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: var(--orange); | ||
| font-size: larger; | ||
| } | ||
|
|
||
| .footer{ | ||
| width: 100%; | ||
| background-color: rgba(255, 255, 255, 0.564); | ||
| height: auto; | ||
| padding: 2vh; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| padding: 1rem; | ||
|
|
||
| } | ||
|
|
||
| @media (min-width: 1000px){ | ||
|
|
||
| .main-container { | ||
| max-width: 1800px; | ||
| display: grid; | ||
| grid-template-columns: 1fr 3fr; | ||
| } | ||
|
|
||
| .first-coloumn{ | ||
| text-align: center; | ||
| } | ||
| .profile-img{ | ||
| width: 80%; | ||
|
|
||
| } | ||
| .info-square{ | ||
| width: 100%; | ||
|
|
||
| } | ||
|
|
||
| .projects-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-column-gap: 1rem; | ||
| grid-row-gap: 1rem; | ||
| margin: 4vh 2rem 0 2rem; | ||
| padding: 1vh 4vh 4vh 4vh; | ||
| row-gap: 20px; | ||
| grid-auto-rows: max-content; | ||
|
|
||
| } | ||
|
|
||
| .project{ | ||
| min-width:300px; | ||
| margin: 0; | ||
| width:100%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
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.
Console log left in code :)