Pinar Demirel - GitHub Tracker w7#20
Open
pdetli wants to merge 6 commits into
Open
Conversation
dandeloid
reviewed
Oct 8, 2021
dandeloid
left a comment
dandeloid
left a comment
There was a problem hiding this comment.
Great job with the project!
The site works, looks good on mobile>desktop! I like the colors, look like GitHub but with your own personal touch.
Don’t have much constructive to add since it all works, left some minor comments in the code.
Overall good job!
Comment on lines
-3
to
+13
| Replace this readme with your own information about your project. | ||
|
|
||
| Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. | ||
| The assignment was to create a GitHub tracker site for the projects froked from Technigo, using fetch and API technologies from the GitHub database. | ||
|
|
||
| ## The problem | ||
|
|
||
| Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? | ||
| The challange was using GitHub APIs and collect the relevant information. It was a good practise to learn more about APIs and fetch function. | ||
| I tried to keep the design simple and as similar as the github website. | ||
| I have fulfilled all the blue requirements but if I had more time I would show the last commit message and language percentages of each project.. | ||
|
|
||
| ## View it live | ||
|
|
||
| Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. | ||
| https://github-tracker-pde.netlify.app/ |
| //Draw the chart here | ||
| const drawChart = (amount) => { | ||
| const config = { | ||
| type: "bar", |
There was a problem hiding this comment.
Like that you tried something else than the Doughnut :)
| <main id="projects"></main> | ||
| <header> | ||
| <p class="header"> | ||
| <a href="https://github.com/" target="blank"><i class="fa fa-github"></i></a> |
| <p class="footer-text">© 2021 Pinar Demirel</p> | ||
| <p class="footer-text"> | ||
| This page was made as a student project during the | ||
| <a class="technigo" target="blank" href="https://www.technigo.io/"> |
| repo.homepage | ||
| }" target="_blank" class="view-live" >View it Live ▶ </a> </p> | ||
| <span class="repo-language"></span> | ||
| <span class="language-name"> ${repo.language}</span> |
There was a problem hiding this comment.
nice with some extra fetched language info!
| } | ||
|
|
||
| /* ----- FOOTER SECTION ----- */ | ||
| .fa { |
There was a problem hiding this comment.
Can't figure out what 'fa' is referencing ;)
| fetch(myCommitsUrl) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| let commitMessage = data[0].commit.message |
There was a problem hiding this comment.
Doesn't look like this variable got used, leftover from trying to fetch commit messages maybe?
Comment on lines
+62
to
+71
| // display the most used language for each project and change the color depending on the language | ||
| const repoLanguage = document.querySelectorAll(".repo-language") | ||
|
|
||
| repoLanguage.forEach((span) => { | ||
| if (span.nextElementSibling.innerText === "JavaScript") { | ||
| span.style.backgroundColor = "#f1e05a" | ||
| } else if (span.nextElementSibling.innerText === "HTML") { | ||
| span.style.backgroundColor = "#e34c26" | ||
| } else if (span.nextElementSibling.innerText === "CSS") { | ||
| span.style.backgroundColor = "#664e88" |
There was a problem hiding this comment.
cool that you added some color change for extra details
Comment on lines
+46
to
+51
| <a class= "project-names-with-pr" href="${ | ||
| repo.html_url | ||
| }" target="_blank">${repo.name}</a> | ||
| <p> <a href="${ | ||
| repo.homepage | ||
| }" target="_blank" class="view-live" >View it Live ▶ </a> </p> |
There was a problem hiding this comment.
This looks weirdly formatted to me... prettier extension?😆
| margin: auto; | ||
| padding: 20px; | ||
| } | ||
| } |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
At the beginning I had a hard time following, but I learned a lot. I am most proud to met the blue level requirements.
https://github-tracker-pde.netlify.app/