Frontend Mentor - GitHub user search app solution

This is a solution to the GitHub user search app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• The challenge
• Screenshot
• Links
• Built with
• What I learned
• Author

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Search for GitHub users by their username
• See relevant user information based on their search
• Switch between light and dark themes
• Bonus: Have the correct color scheme chosen for them based on their computer preferences.

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: live site

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• vanilla JS
• Styled Components - For styles

What I learned

I learned that you can use the || operator in template literals to display the null values differently

  <a href="http://twitter.com/${data.twitter_username}">${data.twitter_username || 
    `<div class='not-aval'>Not Available</div>`
    }</a>

Author

• Frontend Mentor - @Eileenpk