Good practice using Sass, JavaScript, API and Grid

Community feedback

• 

  Tuan Ngo•95

  @tuanngo1993Posted about 3 years ago

  Great job! It would be nice if you challenge yourself with bonus requirement that is to keep theme being like previous state by using localStorage(). For example, your theme is light mode at the beginning then you switch it to dark and it should be dark after refreshing page as well

  Enjoy your journey :D

  Marked as helpful

  0
• 

  FocusCookie•350

  @FocusCookiePosted about 3 years ago

  You can change the color of an svg with the fill attribute of the svg path like this:

  .btn--text:hover > #theme-icon path { color: var(--btn--text-color--hover); fill: var(--btn--text-color--hover); }

  The Button issue within the search box can be fixed by applying a width of 100% to the input.

  Marked as helpful

  0

  ---

  

  Nick Carlisi•180

  @nickcarlisiPosted about 3 years ago

  @FocusCookie Thanks so much! Both of your suggestions worked! I initially had the svgs as images, but changed them to inline svgs and was able to change the color that way.

  0
• 

  Nazeer Haidari•895

  @Nazeer2020Posted about 3 years ago

  Nice work!

  Marked as helpful

  0
• 

  Nick Carlisi•180

  @nickcarlisiPosted about 3 years ago

  One more thing I forgot to ask about is the 'joined' date. The API gives it to you in the ISO format, but the design has the month as "Jan" instead of 01, for example. Anyone know how to convert the month to text like that? Thanks again!

  0

  ---

  

  FocusCookie•350

  @FocusCookiePosted about 3 years ago

  @nickcarlisi

  I solved it this way. ''' const event = new Date(date); const options = { year: "numeric", month: "short", day: "numeric" };

  return Joined ${event.toLocaleDateString("en-US", options)}.replace( ",", "" '''

  You could also use moment.js which is a very handy library for this type of matter.

  Marked as helpful

  0

  

  Nick Carlisi•180

  @nickcarlisiPosted about 3 years ago

  @FocusCookie Awesome! I ended up doing this and it worked...

  const date = data.created_at; const dateJoined = new Date(date); const day = dateJoined.getDate(); const month = dateJoined.toLocaleString("en-us", { month: "short" }); const year = dateJoined.getFullYear();

  <p class="joined">Joined ${day} ${month} ${year}</p>

  I'll give your method a shot too. Thanks again for the help!

  1