My GitHub tracker #22
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 | ||
|
|
||
| The assigment was to create a Github tracker that shows all the github repos that is created in the Bootcamp. | ||
|
|
||
| ## The problem | ||
|
|
||
| First step was to get all the correct information from the Github API on the page. Using fetch and different APIs I was able to get all the info that I later styled using CSS. With dynamic ID I was able go get certain information from one fetch into another innerHTML in another fetch. | ||
|
|
||
| ## View it live | ||
|
|
||
| https://sad-jennings-8c6d22.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,33 @@ | ||
| //DOM-selector for the canvas 👇 | ||
| const ctx = document.getElementById("chart").getContext("2d"); | ||
|
|
||
| const drawChart = (amount) => { | ||
| const config = { | ||
| type: "doughnut", | ||
| data: { | ||
| labels: ["Finished Projects", "Projects Left"], | ||
| datasets: [ | ||
| { | ||
| label: ["Finished Projects", "Projects Left"], | ||
| data: [amount, 19 - amount], | ||
| backgroundColor: ["#76b5c5", "#eab676"], | ||
| hoverOffset: 4, | ||
| }, | ||
| ], | ||
| }, | ||
| options: { | ||
| plugins: { | ||
| legend: { | ||
| labels: { | ||
| font: { | ||
| size: 12, | ||
| family: "'Poppins',sans-serif", | ||
| color: "rgba(26, 26, 24, 0.849)", | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| const myChart = new Chart(ctx, 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Project GitHub Tracker</title> | ||
| <link rel="stylesheet" href="./style.css" /> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,600;1,100&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="header-wrapper"> | ||
| <h1>GitHub Tracker</h1> | ||
| <hr /> | ||
| </div> | ||
| <section class="user-container" id="user-information"></section> | ||
| <h2>Projects</h2> | ||
| <main id="projects" class="project-container"></main> | ||
| <h2>Project progress at Technigo Bootcamp</h2> | ||
| <section class="chart-container"> | ||
| <canvas id="chart"></canvas> | ||
| </section> | ||
|
|
||
| <script src="./script.js"></script> | ||
| <script src="./chart.js"></script> | ||
| </body> | ||
| </html> |
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,94 @@ | ||
| const username = "madeleinesvensson"; | ||
| const REPOS_URL = `https://api.github.com/users/${username}/repos`; | ||
| const USERS_URL = `https://api.github.com/users/${username}`; | ||
| const container = document.getElementById("projects"); | ||
| const userInformation = document.getElementById("user-information"); | ||
|
|
||
| //Takes away the - in the project name | ||
| const formattedRepoName = (name) => name.replace(/-/g, " "); | ||
|
|
||
| //Gets the forked repos from github. | ||
| const getRepos = () => { | ||
| fetch(REPOS_URL) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| const forkedRepos = data.filter( | ||
| (repo) => repo.fork && repo.name.startsWith("project-") | ||
| ); | ||
| //Fixes the date and time in last pushed. | ||
| forkedRepos.sort(function (a, b) { | ||
| return new Date(b.pushed_at) - new Date(a.pushed_at); | ||
| }); | ||
| forkedRepos.forEach((repo) => { | ||
| const pushedDate = new Date(repo.pushed_at).toLocaleDateString( | ||
| "en-GB", | ||
| { | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| weekday: "short", | ||
| year: "numeric", | ||
| month: "short", | ||
| day: "numeric", | ||
| } | ||
| ); | ||
|
|
||
| container.innerHTML += ` | ||
| <div class="repo-cards"> | ||
| <a href=${repo.html_url} target="_blank"><h3>${formattedRepoName( | ||
| repo.name | ||
| )}</h3></a> | ||
| <p>${repo.default_branch}</p> | ||
| <p>Latest update: ${pushedDate}</p> | ||
| <p id="commit-${repo.name}"> Commits: </p> | ||
| </div> | ||
| `; | ||
| }); | ||
| drawChart(forkedRepos.length); | ||
| getPullRequests(forkedRepos); | ||
| }); | ||
| }; | ||
|
|
||
| getRepos(); | ||
|
|
||
| const getPullRequests = (repos) => { | ||
| //Get all the PRs for each project. | ||
| repos.forEach((repo) => { | ||
| fetch( | ||
| `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` | ||
| ) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| const filteredPullrequests = data.find( | ||
| (pull) => pull.user.login === repo.owner.login | ||
| ); | ||
| if (filteredPullrequests) { | ||
| commits(filteredPullrequests.commits_url, repo.name); | ||
| } else { | ||
| document.getElementById(`commit-${repo.name}`).innerHTML = "No data"; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| //gets the commits in the project container. | ||
| const commits = (url, myRepoName) => { | ||
| fetch(url) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; | ||
| }); | ||
| }; | ||
|
|
||
| //Gets the user data. | ||
| fetch(USERS_URL) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| userInformation.innerHTML = ` | ||
| <img src="${data.avatar_url}"/> | ||
| <div class="user-information"> | ||
| <h3>${data.name}</h3> | ||
| <h4>${data.login}</h4> | ||
| <h4>Location: ${data.location}</h4> | ||
| <h4>Bio: ${data.bio}</h4> | ||
| </div> | ||
| `; | ||
| }); | ||
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,174 @@ | ||
| body { | ||
| background: #154c79; | ||
| font-family: "Poppins", sans-serif; | ||
| color: white; | ||
| } | ||
|
|
||
| hr { | ||
| height: 2px; | ||
| width: 80%; | ||
| background-color: #eab676; | ||
| border-radius: 10px; | ||
| margin-bottom: 20px; | ||
| } | ||
| .user-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
| .user-information { | ||
| max-width: 300px; | ||
| } | ||
| img { | ||
| border-radius: 50%; | ||
| box-shadow: 0px 0px 13px -2px #000000; | ||
| width: 250px; | ||
| justify-content: center; | ||
| border: 5px solid #eab676; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| font-size: 40px; | ||
| margin-bottom: 20px; | ||
| } | ||
| h2 { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| font-size: 30px; | ||
| font-weight: 200; | ||
| } | ||
| h3 { | ||
| font-size: 25px; | ||
| margin: 5px; | ||
| font-weight: 300; | ||
| text-align: center; | ||
| } | ||
| h4 { | ||
| font-size: 15px; | ||
| align-self: flex-start; | ||
| margin: auto; | ||
| padding: 4px; | ||
| font-weight: 100; | ||
| } | ||
| p { | ||
| font-size: 15px; | ||
| color: black; | ||
| margin: 3px; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| color: black; | ||
| justify-content: center; | ||
| } | ||
| .user-information { | ||
| max-width: 90%; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .repo-cards { | ||
| border-radius: 10px; | ||
| margin: 15px; | ||
| padding: auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: nowrap; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: white; | ||
| border: 3px solid #76b5c5; | ||
| } | ||
|
|
||
| canvas { | ||
| max-height: 100%; | ||
| max-width: 100%; | ||
| margin: 50px 0px; | ||
| } | ||
|
|
||
| /*TABLET*/ | ||
| @media (min-width: 768px) and (max-width: 991px) { | ||
| .repo-cards { | ||
| width: 45%; | ||
| } | ||
| .project-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| width: 100%; | ||
| justify-content: space-around; | ||
| } | ||
| canvas { | ||
| max-width: 400px; | ||
| max-height: 400px; | ||
| } | ||
| .chart-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| } | ||
|
|
||
| /* DESKTOP */ | ||
| @media (min-width: 992px) { | ||
| .repo-cards { | ||
| width: 30%; | ||
| } | ||
| .project-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| width: 100%; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| canvas { | ||
| max-width: 500px; | ||
| max-height: 500px; | ||
| } | ||
| .chart-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 100%; | ||
| } | ||
| h2 { | ||
| text-align: left; | ||
| margin-left: 30px; | ||
| } | ||
| h3 { | ||
| text-align: left; | ||
| } | ||
| .user-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: row; | ||
| align-content: center; | ||
| } | ||
| .user-information { | ||
| flex-direction: column; | ||
| margin-left: 50px; | ||
| max-width: 300px; | ||
| } | ||
| .header-wrapper { | ||
| justify-content: flex-start; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| h1 { | ||
| text-align: left; | ||
| margin-left: 50px; | ||
| } | ||
| hr { | ||
| height: 2px; | ||
| width: 90%; | ||
| border-style: solid #eab676; | ||
| border-radius: 10px; | ||
| background-color: #eab676; | ||
| margin-bottom: 20px; | ||
| justify-content: flex-start; | ||
| align-self: flex-start; | ||
| } | ||
| :hover.repo-cards { | ||
| box-shadow: 0px 0px 13px -2px #000000; | ||
| transform: translateY(-2px); | ||
| } | ||
| } | ||
|
There was a problem hiding this comment. Nice example of stylish but simple design. |
||
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.
I really like how you display date and time with your projects!