Github User Search App - HTML5/SASS with Partials/vanillaJS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, DanielK! 👋

  Regarding your JavaScript questions:

  • I used a lot of if..else statements too. But the way I wrote them was by separating them into small functions. I would recommend you do the same so that it is much more maintainable and also makes your code much easier to understand. It's because, with functions, you can name the function which means you can give descriptive name to help others to understand your code.
  • I also showed Octocat's profile with HTML. But to answer your question, you can make the document object listen to the DOMContentLoaded. Then, fetch Octocat's GitHub profile.
  • For the color scheme, my browser's color scheme preference is set to dark. But, when I first load the site, the website shows a light color preference. Then, when I switch my browser's color scheme preference to light, the website becomes dark mode. Also, I can't switch the theme of the site.

  About Sass, I think the purpose of Sass is to help us organize our CSS by having multiple Sass files. For me, it helps me separate the styling for each component. So, I have no problem with jumping from one file to another file. Also, Sass has @mixin and @function which really helps me write CSS. For example, I created rem() function to convert px to rem unit.

  So, to answer your question, I took a look at the compiled code and I would say that you have used it accordingly. The common mistake that I did when I started using Sass was to nest selectors unnecessarily. It is bad practice because it produces high specificity stylesheet. But, you don't do it, so great! 👍

  Some suggestions:

  • I would recommend reading "A Theme Switcher | Inclusive Components" and "Toggle Buttons | Inclusive Components" articles to create accessible theme switcher. Currently, it is not an interactive element which means the screenreaders will not know that it is an interactive element.
  • Always specify the type of the button. In this case, set the type of the search button as type="submit". It will prevent the button from behaving unexpectedly.
  • Put the script tag above the ending body tag. I recommend taking a look at the StackOverflow discussion about this.
  • I would recommend taking a look at the page without any styling. Then, see if you could understand the page content. If you are not able to understand the page content then there might be something wrong with the HTML. For example, the profile__stats should be a list, and the category of the statistic (Repos, Followers, and Following) should not be a heading.

  That's it! I hope you find this useful! 🙂

  0