Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive github search app - fully working

@giobooo

Desktop design screenshot for the GitHub user search app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I wonder if there's a way to reduce this code (scss in particular)

Thanks.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Giovanni Brienza! 👋

I have a few suggestions for improving your solution.

  • Use radio inputs for the toggle button. The way it works is to hide the checked radio input visually. Hiding the checked radio input visually means it is still accessible by assistive technologies even though it can not be seen.
  • <input> element must have a label or accessible name. Use aria-label to label the search input.
  • Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.
  • For your information, it is okay to wrap the short text with <p> element. <p> element does not have to contain a paragraph or a long text.
  • Replace <a>@octocat</a> with <p>@octocat</p>. If you do not plan to make it a link—by adding a href attribute—then use <p> element.
  • Use a list element, <ul> for the user statistic instead of a <div class="user-stats">.
  • Always add focusable="false" to all <svg> elements. focusable="false" is used to ensure old browsers will not allow the Tab key to navigate into the SVG. Source: Contextually Marking up accessible images and SVGs
  • Decorative icons that are using inline SVG should have aria-hidden="true" to prevent them from getting pronounced by screen readers.

I recommend trying to display the date in a readable format.

Never use the HTML event handler attributes.

  • It is not a good idea to mix up HTML and JavaScript. It is best to keep them separated so that, you can apply JavaScript to multiple HTML documents.
  • It can make HTML and JavaScript hard to maintain. If there are a lot of event handlers, then the HTML starts looking messy.
  • It makes it hard to not break the functionality since both are mixed up together. So, whenever you want to refactor the HTML, there is a high chance that you need to break the functionality as well.

Learn more — Introduction to events - Learn web development | MDN #inline_event_handlers_—_dont_use_these

I hope this helps. Happy coding! 😄

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord