Conversation
ebbadelsol
left a comment
ebbadelsol
left a comment
There was a problem hiding this comment.
The website looks and functions very well. Great job!! The search-function and light/dark-mode is extra impressive. I also like that you fetched for individual and teams-projects.
Overall your code was really nice and easy to go thru since it was well formatted and you have added great descriptive comments. You have also succeeded in doing more advanced code. Great job!!
| "Individual Projects", | ||
| "Team Projects", |
There was a problem hiding this comment.
I really like that you added individual and team projects to you chart!
code/index.html
Outdated
| <!-- mobile nav --> | ||
| <nav class="nav-mobile"> | ||
| <img id="nav-sub" class="nav-menu" src="images/menu (1).png" alt="menu" /> | ||
| <div class="nav-links"> | ||
| <input | ||
| id="navInputMobile" | ||
| class="nav-input" | ||
| type="text" | ||
| placeholder="Search" | ||
| /> | ||
| <a href="#">Pulls</a> | ||
| <a href="#">Issues</a> | ||
| <a href="#">Marketplace</a> | ||
| <a href="#">Explore</a> | ||
| </div> | ||
| <a class="nav-icon" href="https://github.com/" target="_blank" | ||
| ><img src="images/GitHub-Mark-Light-32px.png" alt="github" | ||
| /></a> | ||
|
|
||
| <button id="btn-light-nav"> | ||
| <img class="nav-notif" src="images/notification.png" alt="bell" /> | ||
| </button> | ||
| </nav> | ||
|
|
||
| <!-- desktop nav --> | ||
| <nav class="nav-desktop"> | ||
| <a class="nav-icon" href="https://github.com/" target="_blank" | ||
| ><img | ||
| id="nav-github-img" | ||
| src="images/GitHub-Mark-Light-32px.png" | ||
| alt="github" | ||
| /></a> | ||
| <input id="navInput" class="nav-input" type="text" placeholder="Search" /> | ||
| <div class="nav-a"> | ||
| <a href="#">Pulls</a> | ||
| <a href="#">Issues</a> | ||
| <a href="#">Marketplace</a> | ||
| <a href="#">Explore</a> | ||
| </div> | ||
| <button id="btn-light"> | ||
| <img class="nav-notif" src="images/notification.png" alt="bell" /> | ||
| </button> | ||
| </nav> | ||
|
|
||
| <!-- main content --> | ||
| <main> | ||
| <!-- where the user info is --> | ||
| <section id="userInfo"></section> | ||
|
|
||
| <!-- where the repos are --> | ||
| <section id="projects"> | ||
| <h2 class="project-title">My Project Repositories with Technigo</h2> | ||
| <div id="project-box"></div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <!-- This will be used to draw the chart 👇 --> | ||
| <section class="canvas-box"><canvas id="chart"></canvas></section> | ||
|
|
||
| <footer><img src="images/mylogo.png" alt="logo" /></footer> | ||
|
|
||
| <script src="./script.js"></script> | ||
| <script src="./chart.js"></script> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
Great that you added descriptive comments to your code! Makes it really nice and easy to go thru.
code/script.js
Outdated
| const turnLightMode = document.getElementById("btn-light"); | ||
| const turnLightModeMobile = document.getElementById("btn-light-nav"); |
| // turns the light mode on | ||
| const toLightMode = () => { | ||
| document.body.classList.toggle("light"); | ||
| document.getElementById("userSpan").classList.toggle("user-span-light"); | ||
| document.getElementById("userSpanSub").classList.toggle("user-span-light"); | ||
| }; | ||
|
|
||
| turnLightMode.addEventListener("click", (e) => { | ||
| toLightMode(); | ||
| }); | ||
|
|
||
| turnLightModeMobile.addEventListener("click", (e) => { | ||
| toLightMode(); | ||
| }); |
code/style.css
Outdated
| body { | ||
| background: #FFECE9; | ||
| } No newline at end of file | ||
| @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Roboto&display=swap"); |
There was a problem hiding this comment.
I usually put the link to the fonts in the head of the html. Is there a specific reason for why you put it in the stylesheet or is it just a preference?
| padding: 5rem; | ||
| } | ||
|
|
||
| .nav-links > * { |
| .nav-menu { | ||
| grid-area: menu; | ||
| height: 2rem; | ||
| z-index: 10; |
There was a problem hiding this comment.
I think you only need to use z-index: 1; for this. Everything else should be on z-index 0.
| // event listener | ||
| input.addEventListener("keypress", (event) => { | ||
| if (event.key === "Enter" && input.value) { | ||
| let userName = ""; | ||
| userName = input.value; | ||
| getUserData(userName); | ||
| fetchRepos(userName); | ||
| } | ||
| }); | ||
|
|
||
| // for mobile input | ||
| inputMobile.addEventListener("keypress", (event) => { | ||
| if (event.key === "Enter" && inputMobile.value) { | ||
| let userName = ""; | ||
| userName = inputMobile.value; | ||
| getUserData(userName); | ||
| fetchRepos(userName); | ||
| toggleNav(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Awesome and inspiring that you did advanced level of code (by implementing a search field)!
2 participants
This project is both challenging and fun to do! Getting to use a more complex API like Github's made me realize that it can be very intimidating to use in the beginning. I would say that I really llike how my project turned out this week. I also got to really learn how to use grid. I also made a light and dark mode inspired by Github's page by using toggle.