Project 7 - GitHub tracker - EmmaBerg #106
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,9 @@ | ||
| # GitHub Tracker | ||
|
|
||
| This weeks project was to create a GitHub tracker using Javascript and the GitHub API. | ||
|
|
||
| ## The problem | ||
| I started the project with doing a list of all the things I wanted to fetch from the API. I then started to fetch that data. My main struggle this week was Javascript, I find it hard to know how to create more complex structure of it. To solve my problems I googled, used StackOverflow and programmed togheter with classmates. If I had more time I would like to fetch some more data to display on my page to practice to use Javascript more. | ||
|
|
||
| ## View it live | ||
| https://emmas-github-tracker.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
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,96 @@ | ||
| //DOM selectors | ||
| const profileInfo = document.getElementById('profile') | ||
| const allProjects = document.getElementById('projects') | ||
|
|
||
| const username = 'EmmaaBerg' | ||
| const API_PROFILE = `https://api.github.com/users/${username}` | ||
| const API_URL_REPOS = `https://api.github.com/users/${username}/repos` | ||
|
|
||
| //Function to get the username and profilepicture | ||
| const userProfile = () => { | ||
| fetch(API_PROFILE) | ||
| .then((res) => res.json()) | ||
| .then(profileData => { | ||
| profileInfo.innerHTML += ` | ||
| <img src = '${profileData.avatar_url}' alt='profile image of Emma Berg'> | ||
| <div class='profile-name'> | ||
| <h3> ${profileData.name}</h3> | ||
| <h4> <a href = ${profileData.html_url}>${profileData.login}</h4> | ||
| </div> | ||
| ` | ||
| }) | ||
| } | ||
|
|
||
| // Repos | ||
| const repositories = () => { | ||
| fetch(API_URL_REPOS) | ||
| .then((resp) => resp.json()) | ||
| .then((allRepos) => { | ||
| //A function for filtering out the forked projects from technigo. | ||
| //Repo is the "name for each object" in the array. Fork and name are two properties within | ||
| // the object | ||
| const forkedRepos = allRepos.filter((repo) => repo.fork && repo.name.startsWith('project-')) | ||
|
|
||
| forkedRepos.forEach((repo) => { | ||
| allProjects.innerHTML += ` | ||
| <div class='card'> | ||
| <hr> | ||
| <h3> <a href = ${repo.html_url}> ${repo.name}</a></h3> | ||
| <hr> | ||
| <ul> | ||
| <li> <p> Latest push: ${new Date(repo.pushed_at).toLocaleString('sv-SE', { dateStyle: 'short', })}</p> </li> | ||
|
There was a problem hiding this comment. Great to work with a list here! |
||
| <li><p> Default branch: ${repo.default_branch}</p></li> | ||
| <li><p id='pull-${repo.name}'></p></li> | ||
| <li><p id='commit-${repo.name}'>Commits: </p></li> | ||
| </ul> | ||
| </div> | ||
| ` | ||
| commits(repo.commits_url, repo.name) | ||
| }) | ||
| pullRequests(forkedRepos); | ||
| drawChart(forkedRepos.length); | ||
|
|
||
| }) | ||
| } | ||
|
|
||
| const pullRequests = (forkedRepos) => { | ||
| forkedRepos.forEach((repo) => { | ||
| const PULL_PR = `https://api.github.com/repos/Technigo/${repo.name}/pulls? | ||
| per_page=100` | ||
|
|
||
| fetch(PULL_PR) | ||
| .then((res) => res.json()) | ||
| .then((pullReqs) => { | ||
| let groupProject = true | ||
| pullReqs.forEach((pull) => { | ||
| if (pull.user.login === username) { | ||
| groupProject = false | ||
| document.getElementById(`pull-${repo.name}`).innerHTML = ` | ||
| <a href = ${pull.html_url}> Go to pull request </a> | ||
| ` | ||
| } | ||
| }) | ||
|
|
||
| if (groupProject === true) { | ||
| document.getElementById(`pull-${repo.name}`).innerHTML = ` | ||
| <p> No pull request, group project </p> | ||
| ` | ||
| } | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| //function to get commit number for each project | ||
| const commits = (myCommits, repoName) => { | ||
| let commitUrl = myCommits.replace('{/sha}', '') | ||
| fetch(commitUrl) | ||
| .then((res) => res.json()) | ||
| .then((commitNumber) => { | ||
| document.getElementById(`commit-${repoName}`).innerHTML += commitNumber.length; | ||
| }) | ||
| } | ||
|
|
||
| //Invok the userProfile function and repositorie fetch | ||
| userProfile() | ||
| repositories() | ||
|
|
||
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,166 @@ | ||
| /* Global CSS variables for colors */ | ||
| :root { | ||
| --primary: #F1FAEE; | ||
| --secondary: #A8DADC; | ||
|
There was a problem hiding this comment. Good to work with the colors in this way instead of writing them every time. |
||
| --tertiary:#1D3557; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| } | ||
|
|
||
| body { | ||
| background: var(--primary); | ||
| color: var(--tertiary); | ||
| font-family: 'Roboto', sans-serif; | ||
| } | ||
|
|
||
| /* Header styling */ | ||
| header { | ||
| background: var(--secondary); | ||
| color: var(--primary); | ||
| width: 100%; | ||
| min-height: 25vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| h1{ | ||
| font-size: 1.5rem; | ||
| text-transform: uppercase; | ||
| text-align: center; | ||
| margin-top: 2rem; | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| /* Main page */ | ||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* Profile section */ | ||
| .profile-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-top: 2rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| img { | ||
| border-radius: 50%; | ||
| max-width: 20vw; | ||
| border: 2px solid var(--secondary); | ||
| } | ||
|
|
||
| .profile-name h3{ | ||
| font-size: 1rem; | ||
| text-align: center; | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| .profile-name h4 { | ||
| font-size: 0.8rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .profil-name h4, a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .chart-container { | ||
| max-width: 20vh; | ||
| max-height: 20vh; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
|
|
||
| /* Styling of the project section */ | ||
| .projects { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin: 2rem; | ||
| } | ||
|
|
||
| .card { | ||
| background-color: var(--primary); | ||
| width: 60vw; | ||
| border: 2px solid var(--tertiary); | ||
| padding: 1.2rem; | ||
| margin: 0.5rem; | ||
| box-shadow: 4px 6px 6px #36454F; | ||
| } | ||
|
|
||
| .card h3 { | ||
| text-transform: uppercase; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .card:hover { | ||
| background-color: var(--tertiary); | ||
| color: var(--primary); | ||
| border: 5px solid var(--secondary); | ||
| } | ||
|
|
||
| .card a:hover { | ||
| color: var(--secondary); | ||
| } | ||
|
|
||
|
|
||
| /* Media query for tablet */ | ||
| @media screen and (min-width: 768px) { | ||
|
|
||
| h1{ | ||
| font-size: 3rem; | ||
| } | ||
|
|
||
| .profile-name h3{ | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| .profile-name h4 { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .profile-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-evenly; | ||
| } | ||
|
|
||
| .chart-container { | ||
| min-width: 20vw; | ||
| min-height: 20vh; | ||
| } | ||
|
|
||
| .projects { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| gap: 0.5rem; | ||
| place-items: center; | ||
| } | ||
|
|
||
| .card { | ||
| max-width: 40vw; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /* Media query for desktop */ | ||
| @media screen and (min-width:1024px) { | ||
| .projects { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-template-rows: (auto, 1fr); | ||
| gap: 0.2rem; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .card { | ||
| max-width: 30vw; | ||
| } | ||
| } | ||
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 comments on the code! Easy to follow and easy to understand.