/github-rummage

Assessment for the role of mid-level frontend engineer at Buycoins

Primary LanguageHTML

Update token on this line

This repo...

is my solution to Buycoins midlevel Frontend Engineer role challenge, 2021.

Notable Features

  • Intuitive error message when a user doesn't exist on GitHub
  • Intuitive error message if internet gets disconnected when a user is trying to use the app
  • The text Pull Requests in the top navbar becomes Pulls when the user is on a screen at 868px or less
  • The title in website tab changes to the format [user]'s repositories
  • Hovering on the user's status emoji shows the status text/message

These are features I think would be easy to miss so I thought to mention them

Stack

  • HTML
  • CSS
  • Vanilla JavaScript

Assets

  • GitHub's logo
  • SVG Icons: where gotten by inspecting GitHub with Chrome developer tools. However, this icons can't work outside of the box so there was a need to tweak things.

Sample raw SVG from GitHub

<svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" height="16" width="16" class="octicon octicon-bell">
    <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
</svg>

Sample modified SVG

<svg aria-hidden="true" viewBox="0 0 16 16" version="1.1"  height="16" width="16" fill="white" >
                            <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
                        </svg>