Week 7 – Github Tracker – Emma Lindell #111
Conversation
| type: 'bar', | ||
| data: data, | ||
| options: { | ||
| responsive: true, |
There was a problem hiding this comment.
Did you want the chart to cover the page from side to side? Because the size of the chart is good for mobile size but displays quite big in desktop size.
There was a problem hiding this comment.
Thanks for noticing Ida! I thought about that too and want to change it for desktop. Do you know which element to add in that case?
There was a problem hiding this comment.
I found the instructions here: https://www.chartjs.org/docs/latest/configuration/responsive.html
There was a problem hiding this comment.
Oh, thanks! I got a 404 though :(
| @@ -0,0 +1,2 @@ | |||
| // .gitignore file | |||
| <title>Project GitHub Tracker for emmajosefina</title> | ||
| <link rel="stylesheet" href="./style.css" /> | ||
|
|
||
| <!-- GOOGLE FONT--> |
There was a problem hiding this comment.
I like that you explain what these do!
| <h2>Projects:</h2> | ||
| <main id="projects"></main> | ||
| <header class="navbar"> | ||
| <a href="https://github.com/emmajosefina"> |
There was a problem hiding this comment.
Smart and simple to put the profile name in html
|
|
||
| <footer> | ||
| <p> | ||
| <a href="https://www.linkedin.com/in/emmalindell4/" class="fa fa-linkedin fa-2x"></a> |
There was a problem hiding this comment.
Looks good! Maybe for accessibility make them easier for a screenreader to explain?
There was a problem hiding this comment.
Great thanks, will think about it for this week's project
code/script.js
Outdated
| <p class="username">${data.login}</p> | ||
| </section> | ||
| <div class="status-box"> | ||
| ${data.bio} 👩💻 |
| <div class="projectContainer"> | ||
| <p class="smallerContainer"> | ||
| <span class="header-project"> | ||
| ${repo.name.replace('project-', '').replace('-', ' ')} |
There was a problem hiding this comment.
Really nice removing "project" and the hyphens, I never got around to that myself. It also makes it more visible that the repos ar displayed alphabetically.
| </p> | ||
| <p class="smallerContainer"> | ||
| <span> Updated:</span> | ||
| <span> ${new Date(repo.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}</span> |
There was a problem hiding this comment.
Looks really good with the month as short
| } else { | ||
| document.getElementById( | ||
| `commit-${repo.name}`).innerHTML += `no commits visible, pull request unavailable.`; | ||
| } |
There was a problem hiding this comment.
Nicely done with displaying the pull requests!
| } | ||
|
|
||
| /* TABLET */ | ||
| @media only screen and (min-width: 768px) and (max-width: 1023px) { |
There was a problem hiding this comment.
Professional styling! Only one comment about the responsiveness of the page. The "boxes" with information about your repos are placed in one column on mobile size, tablet and desktop. Was it your intention not to place them next to each other on wider screens?
There was a problem hiding this comment.
Thanks, Ida! I started doing flex and grid for them but didn't have enough time so I skipped it. My intention was to place two or three in a row but didn't manage to fix that. I wasnt sure about if I had to do another container inside innerHTML in JavaScript or how I should do it, i struggled a bit with the structure. Did you create both the parent container and the child container in HTML?
There was a problem hiding this comment.
In the innerHTML I put a <div> and inside that I put a <form> with <ul> inside. So you should be able to out it all there I think.
idanaslund
left a comment
idanaslund
left a comment
There was a problem hiding this comment.
The styling of your page looks very professional. You have made a page that is functional and responsive and fulfills all requirements for blue level. Regarding responsiveness I have made som comments about how the page is displayed on desktop.
Great job with this project!
2 participants
https://github-tracker-emmajosefina.netlify.app/