Github tracker by Jakob Lindström#30
Conversation
JohannaMJ
left a comment
JohannaMJ
left a comment
There was a problem hiding this comment.
Jakob! Your GitHub-tracker is really nice, I am impressed by your coding skills and you should be proud!
The tracker works fine in mobile, tablet and desktop view, so good job with the responsive design! The API-data is fetched correctly and all the links work! You have followed the guidelines for the project and completed all blue requirements, amazing job! Also, you've added extra features like the spinner and the button that makes the project look really cool! I can see that you also added the latest commit message (red level), neat!!
Overall, I am so impressed by your project being week 7! The code is well structured and I could easily understand the different parts of the code. It has been a pleasure to review it! I have learnt a lot and am really inspired by the start-button, spinner and the way you fetched the commit-message! Well done Jakob, keep up the good work! :D
| <div class="spinner"> | ||
| <div class="spinner spinner2"> | ||
| <div class="spinner spinner3"></div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
So amazed by the spinner, look forward to see what the style looks like in css!
| const projects = document.getElementById('projects') | ||
| const personData = document.getElementById('personData') | ||
| const USER = 'jakobxlindstrom' | ||
| const USER_URL = `https://api.github.com/users/${USER}` | ||
| const tracerBtn = document.getElementById('tracerBtn') |
There was a problem hiding this comment.
nice and relevant naming of the variables!
| filtered.forEach((repo) => { | ||
| const pushedDate = new Date(repo.pushed_at).toLocaleDateString( | ||
| 'en-se', | ||
| { | ||
| hour: '2-digit', | ||
| minute: '2-digit', | ||
| weekday: 'short', | ||
| year: 'numeric', | ||
| month: 'short', | ||
| day: 'numeric', | ||
| } | ||
| ) |
There was a problem hiding this comment.
This is new to me, how you can display the date and time! It provides you with more ability and freedom to chose how the time of the latest push is displayed. Cool, will definitely try it out myself!
| fetch(url) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| let commitMessage = data[data.length - 1].commit.message |
There was a problem hiding this comment.
Ah, nice that you managed to get and display the latest commit message!!
| // This addEventListener makes it possible to view the fetched data by a button click under the userdata | ||
| tracerBtn.addEventListener('click', (event) => { | ||
| event.preventDefault() | ||
| getRepos() | ||
| }) |
There was a problem hiding this comment.
Love this extra feature! Really good job adding the button and the click-event to display all the information about the repos, it looks professional!
| a.button1:hover { | ||
| color: #000000; | ||
| background-color: #ffffff; | ||
| } |
| @media all and (max-width: 30em) { | ||
| a.button1 { | ||
| display: block; | ||
| margin: 0.4em auto; |
There was a problem hiding this comment.
cool that you used the margin auto to make it move when you change the responsive view, just learned about this and it looks really neat.
| display: flex; | ||
| grid-column: span 2; | ||
| flex-direction: row; |
There was a problem hiding this comment.
cool that you use both grid and flexbox! will definitely learn how to do that myself!
| display: grid; | ||
| grid-column: span 1; | ||
| height: 10vh; | ||
| width: 30vw; |
There was a problem hiding this comment.
So I knew you were trying to change so that part of the chart is not hidden when hovering on it. Wierd that it still happens. Have you tried adding some padding to the chart? And maybe also remove border-box (I saw you used it earlier but I dont know if it then applies to the whole code)?
| .spinner { | ||
| position: static; | ||
| border-style: solid; | ||
| /* margin: auto; */ | ||
| height: 100px; | ||
| width: 100px; | ||
| border-radius: 50%; | ||
| border-bottom: none; | ||
| border-left: none; | ||
| animation: spin 4.5s infinite linear reverse; | ||
| } | ||
| .spinner2 { | ||
| margin: 25px auto; | ||
| height: 50px; | ||
| width: 50px; | ||
| animation: spin 2s infinite linear; | ||
| } | ||
|
|
||
| .spinner3 { | ||
| margin: 25px auto; | ||
| height: 20px; | ||
| width: 20px; | ||
| animation: spin 1s infinite linear reverse; | ||
| } | ||
|
|
||
| @keyframes spin { | ||
| 100% { | ||
| transform: rotate(360deg); | ||
| } |
There was a problem hiding this comment.
yay! spinner-time! This is so cool, I have tried to understand the code and it is so skilled, love that you've used this in you project, really inspiring! Also, how come every border "fades" in the beginning and end?
2 participants
Hello!
In this pull request you will find my weeks 7 project, a Github tracker.
I built this simple SPA with fetch functions gathering and displaying my Github user data, repos, pull requests and commits.
I added a chart to show how many projects I have finished until today which will update as we move forward through the course.
I styled my page very simply with a gradient background and putting my focus on that the fetched data would be displayed properly and clear through all viewports.
I focused on meeting the blue requirements but maybe even touched upon the red also.
Here is a link to my project
https://githubtrace.netlify.app/
/Jakob