github-user-search-app

Community feedback

• Account deletedPosted almost 3 years ago

  Hello Kent, I do really like how you worked this project. I checked the JavaScript logic noticing the following:

  Line 91 to 132 contains code that could be optimized, I like how you used the .slice() method to get the dates, but the switch structure seems a little bit hardcoded. The create__at string value, can be passed as an argument to a Date object, then the .toLocaleString() method allows you to pull out the values that you specify in different formats and return them as a string value.

   // created_at: '2011-01-25T18:44:36Z'
   let creationDate = new Date(created_at); 
   let joinDate = creationDate.toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric'});
   // joinDate: '25 Jan 2011'
  

  Good job and I see you around, happpy coding!

  11

  Marked as helpful
• 

  Jason Moody•300

  @MoodyJW

  Posted about 3 years ago

  Hi Kent! Excellent job on the challenge. I noticed a few issues that might help you improve.

  • definitely take a look at the HTML report, you have a number of accessibility issues regarding missing landmark elements.
  • you have a styling issue in the links section at the bottom, here's a screenshot

  When the text is longer as seen in the image, it's going to force the other elements to the right and it gets a bit sloppy. However, this is pretty easy to fix. There are a lot of ways to handle long strings, but my favorite is to just truncate and add an ellipsis.

  On the container div, the links wrapper, add overflow: hidden to your sass. Then on the p element, add overflow: hidden; width: 100%; text-overflow: ellipsis. That's it!

  The icons are also a bit clipped, but that's also easy enough to fix! If you open the svg file for the icon, there should be a width and height. Simply set the same width and height on the container div and it should be perfect.

  Great job, keep it up!

  11

  Marked as helpful