Conversation
MarySnopok
left a comment
MarySnopok
left a comment
There was a problem hiding this comment.
A great project with a stylish design and easy to read code.
As I understood you decided to render only projects that were pulled by you. Correct me if I am mistaken.
Really enjoyed exploring the code , love the part that prevents the chart to redraw it self on each data change. It is cool that it is drawn once per session.
Requirements :
Blue
- A list of all repos that are forked from Technigo - DONE
- Your username and profile picture- DONE
- Most recent update (push) for each repo- DONE
- Name of your default branch for each repo- DONE
- URL to the actual GitHub repo- DONE
- Number of commits for each repo- DONE
- It should be responsive (mobile first)- DONE
- A visualisation, for example through a pie chart - DONE
🔴 Red Level (Intermediary Goals)
- Sort your list in different ways. - DONE
- Create the opportunity to filter the repos based on a condition - DONE
code/script.js
Outdated
| fetchPullRequests(forkedRepos) | ||
|
|
||
| //Only draw the chart once | ||
| if (!chartDrawn) { |
There was a problem hiding this comment.
This is very smart approach ! Great that it is drawn only once per session . Great job!
code/script.js
Outdated
| .then(res => res.json()) | ||
| .then((data) => { | ||
| const myPullRequest = | ||
| data.find(pull => pull.user.login === repo.owner.login) |
There was a problem hiding this comment.
Aha , you decided to work only with repos on what you made a pull request yourself . In this case it is a clear code and comments provide all the important highlights for the logic .
code/script.js
Outdated
| const filterLanguages = (event) => { | ||
| console.log(event) | ||
| const language = event.target.id | ||
| const checked = event.target.checked |
There was a problem hiding this comment.
This is super cool and fancy ) . Love the part with filtering according to the main language of the repo.
code/script.js
Outdated
| selectedLanguages.push(language) | ||
| //Removes language string in array if unchecked language is in array | ||
| } else if (!checked && selectedLanguages.includes(language)) { | ||
| for (let i = 0; i < selectedLanguages.length; i++) { |
There was a problem hiding this comment.
Great use of for loop also cool that you are implementing other methods (not only foreach) that we learned so far.
code/script.js
Outdated
| console.log("selectedLanguages[i]=", selectedLanguages[i]) | ||
| if (selectedLanguages[i] === language) { | ||
| selectedLanguages.splice(i, 1) | ||
| break |
There was a problem hiding this comment.
Interesting use of break , I had seen it within switch context only . Thank you for educational tip . I had googled and yep thats one of ways (https://stackoverflow.com/questions/4851657/call-break-in-nested-if-statements).
| height: 100vh; | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: cover; |
code/style.css
Outdated
| } | ||
|
|
||
| #project-business-site.repo, #project-chatbot.repo, #project-github-tracker.repo, #project-guess-who.repo, #project-news-site.repo, #project-weather-app.repo { | ||
| border: transparent; |
There was a problem hiding this comment.
interesting grouping for styling purposes
2 participants
This week's challenge was to make a github tracker website, which fetches the repositories from my github homepage. The challenge included filtering out the fetch requests in various ways, such as certain repos which were forked from specific master branch. I learned what is API and how is it used in fetching informations. The most challenging part was to understand each code's role in regard of its relations to endpoint. But I am very proud that I got to use many helps from StackOverFlow and google. If I had more time, I would have worked on rounding out the overall design of the page with CSS.
Check it out Live! :
https://github-tracker-ruruahn.netlify.app