Conversation
… making them fetch the correct data
brunsant
left a comment
brunsant
left a comment
There was a problem hiding this comment.
The page works perfectly fetching all the required information through the API and updating the website automatically. The design is also responsive and well thought for the different devices/sizes.
The code itself is very clean and easy to understand, with comments on the JavaScript part that separate and identify the different functions.
The classes names are something I want to single out. They are really descriptive and easy to understand even at first sight. It was clear their functions even when looking only at the CSS. Great job with those!!!
I got really inspired by your project!! AMAZING job Emelie!!!!
| datasets: [ | ||
| { | ||
| label: "My First Dataset", | ||
| data: [amount, 20 - 6], |
There was a problem hiding this comment.
Since the page will continue to update constantly, you can change the code to:
data: [amount, 20 - amount],
so the graph updates also automatically.
| ## 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://waliem-github-tracker.netlify.app/ |
There was a problem hiding this comment.
Great job with the responsiveness! The layout for all different sizes looks really nice and clean. Loved also your icon and color palette.
| <body> | ||
| <header> | ||
| <h1>GITHUB TRACKER</h1> | ||
| <img class="github-icon" src="./octocat.png" /> | ||
| </header> | ||
|
|
||
| <section id="user-info"></section> | ||
|
|
||
| <main id="projects"></main> | ||
|
|
||
| <div class="chart-box"><canvas id="chart"></canvas></div> | ||
|
|
||
| <script src="./script.js"></script> | ||
| <script src="./chart.js"></script> |
| .then((data) => { | ||
| userContainer.innerHTML += ` | ||
| <img class="profile-img" src="https://avatars.githubusercontent.com/u/84201089?v=4" alt="User profile picture"> | ||
| <span id="profile-name"> <a class="usr-name" href="https://github.com/waliem"><h2>${data.login}</h2></a> <h3>Front end developer student</h3><h3>Based in Gothenburg</h3></span>` |
There was a problem hiding this comment.
You could also fetch this info (the ones you have on your GitHub) through the API - ex. data.html_url for the profile link.
| <a style="font-weight:bold" href="${repo.html_url}"> ${ | ||
| repo.name | ||
| } </a> <p>Default branch: ${repo.default_branch}</p> | ||
| <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p> |
There was a problem hiding this comment.
Great that you used the new Date approach! Looks really clean and easy to understand.
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| document.getElementById(`commit-${myRepoName}`).innerHTML += data.length | ||
| console.log("my commits!", data) |
There was a problem hiding this comment.
We have a console.log survivor haha. I saw you probably erased the other ones and this escaped.
| .github-icon { | ||
| width: 20%; | ||
| height: auto; | ||
| } |
There was a problem hiding this comment.
This icon is super cute!!! Really loved it.
|
|
||
| #projects { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
There was a problem hiding this comment.
This is a solution that would have solved all my grid issues for the project. Will save it for my next ones!
| .project-box:hover { | ||
| background-color: #bf3d39; | ||
| -webkit-transition: 0.3s ease-in-out; | ||
| transition: 0.3s ease-in-out; | ||
| -moz-box-shadow: none; | ||
| -webkit-box-shadow: none; | ||
| box-shadow: none; | ||
| } |
|
|
||
| .usr-name:hover { | ||
| color: #ff5c58; | ||
| text-transform: lowercase; |
There was a problem hiding this comment.
This lowercase effect was mind blowing for me! It's such a delicate and nice touch!!!
2 participants
No description provided.