/github-user-search-app

Primary LanguageSCSS

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

Overview

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. Hint: Research prefers-color-scheme in CSS.

Links

My process

Built with

  • HTML5 markup
  • SCSS
  • Mobile-first workflow
  • Vanilla JavaScript

What I learned

Some new things I learned in this project was how to have the correct color scheme chosen based on the users computer preferences.I also learned how to change the color of placeholder text in firefox and I learned how to reformat a date.

See code snippets below:

@media (prefers-color-scheme: dark) {
}
::-moz-placeholder {
  color: $light-mode-text;
  opacity: 1;
}
let date = new Date(jsonResponse.created_at);
let dtFormat = new Intl.DateTimeFormat("en-GB", {
  day: "2-digit",
  month: "short",
  year: "numeric",
});
console.log(dtFormat.format(date));

Continued development

In future projects, I would like to focus on how to save the selected color scheme in local storage.

Edit - LocalStorage has now been implemented

Useful resources

  • YouTube - This helped me with reformatting dates.
  • MDN Web Docs - Here you can find the appropriate syntax for formatting a date to the correct style based on country, i.e 'en-GB'
  • Stack overflow - This is a good thread on how to override css prefers-color-scheme setting. What I have taken from this is how write a condition based on the computers color preferences using window.matchmedia.

Author