GitHub Tracker Week 7 Louisa#91
Conversation
…n forks and projects from Technigo
…od to get my pull requests
mathildakarlsson
left a comment
mathildakarlsson
left a comment
There was a problem hiding this comment.
Hi Louisa!
I'm so impressed with how you took on this project and the finished result you got! All of your code-files looks very clean, professional and are easy to follow with great explanations. This project was so hard and you managed to make it work in an amazing way, with a great, structured code. Very very well done!!
| And connect the chart to the pullrequests length instead of the forked projects length. | ||
|
|
||
| ## View it live | ||
| https://github-tracker-lo.netlify.app/ |
There was a problem hiding this comment.
What a nicely written ReadMe! Good explanation of the assignment and which techniques you used! Also, it looks really professional with the name of the deployed link since it's not the default one but one that you've created specific for this project!
|
|
||
| const myChart = new Chart(document.getElementById('chart'),config); | ||
| } | ||
|
No newline at end of file |
There was a problem hiding this comment.
Very nice doughnut-chart! I love your choice of colors
| <script src="./secret.js"></script> | ||
| <script src="./script.js"></script> | ||
| <script src="./chart.js"></script> | ||
| </body> |
There was a problem hiding this comment.
The HTML-file looks clean and easy to follow!
| <!-- This will be used to draw the chart 👇 --> | ||
| <canvas id="chart"></canvas> | ||
| <div class="chart-container"> | ||
| <canvas class="chart" id="chart"></canvas> |
There was a problem hiding this comment.
This is just a very small thing, but you can if you want make an indentation at line 25 since the canvas is inside the div-element, and also an indentation for lines 20 to 26 which are within the main-element
| const username = 'Kras053' | ||
| const USER_URL =`https://api.github.com/users/${username}` | ||
| const REPOS_URL =`https://api.github.com/users/${username}/repos` | ||
| const repoContainer = document.querySelector('.repo-container') | ||
| const userContainer = document.querySelector('.user-container') |
There was a problem hiding this comment.
It looks very neat with these variables at the top of the file :D
| if (myPullRequests) { | ||
| document.getElementById(`${repo.name}`).innerHTML += | ||
| `<a href="${myPullRequests.html_url}"> Pull request</a>` | ||
| } else { | ||
| document.getElementById(`${repo.name}`).innerHTML += | ||
| `<p> Pull request made by teammate</p>` | ||
| } |
There was a problem hiding this comment.
Awesome that you included your pull requests and put them in conditionals!
| //here is a first step to get the commits for each PR, and we add the dynamic id to pass on | ||
| // or default message that teammate did the commits |
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: content-box; | ||
| -webkit-font-smoothing: antialiased; | ||
| text-rendering: optimizeLegibility; | ||
| } |
There was a problem hiding this comment.
Great thing that you're adding this, it feel professional :D
| .chart-container { | ||
| display: grid; | ||
| place-items: center; | ||
| margin-top: 25px; | ||
| } |
There was a problem hiding this comment.
Very nice positioning of the chart! I struggled with this a lot and your solution looks perfect!
| @media (min-width: 668px) { | ||
| .repo-container { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| justify-items: center; | ||
| place-items: center; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .repo-container { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| } | ||
|
|
||
| .user-container a:hover { | ||
| background-color: black; | ||
| color: rgb(217, 96, 152); | ||
| } | ||
| .user-container img:hover { | ||
| border-color:rgb(217, 96, 152); | ||
| } | ||
|
|
||
| .repo-container a:hover { | ||
| background-color: black; | ||
| color: rgb(217, 96, 152); | ||
| } |
There was a problem hiding this comment.
I'm very impressed with how you used media queries to get such a good responsiveness! I've written a lot of unnecessary code in these and it just won't look good! Your solution with grid is amazing!
2 participants
No description provided.