REST Countries API with color theme switcher - REACT, JS, HTML, CSS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hi there, Sean B! 👋

  Well done on this challenge! 👍 Your solution looks good and works pretty well! 🙌

  A few things I suggest are,

  • Adding cursor: pointer to the region selector (and the options in the drop-down menu) in the top-right corner of the page.
  • Adding overflow-x: hidden to the body (or something similar) to prevent a horizontal scroll bar from appearing along the bottom of the page in the desktop layout. 😉

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Sean B•340

  @Sean-BradburyPosted almost 4 years ago

  @ApplePieGiraffe thank you soo much for your feedback to suggestions make complete sense to me and I have implemented them.

  Can you offer any advice to clear the HTML issues coming up in the report?

  Thanks again Sean

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @Sean-Bradbury

  Hey, Sean! I'm not very familiar with React (yet), but I think following abhik-b's advice might help (replacing the white space with - or _ might help because of what the solution report says). 😀

  0
• 

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Hi Sean B 👋, Fantastic job on this challenge 🙌

  • it looks amazing, I loved the box-shadows, filter transitions, search based filter
  • your site is very responsive , great job here 💯
  • giving some align-items: center; to .head-content can make it look nicer
  • for small screens , giving the filter div width:100% can make it look a lot nicer
  • idk which whitespace you were talking about, I liked those cards

  I took some inspirations from your site, Happy Coding 😇 and *Keep contributing these fantastic * solutions 🚀

  1

  ---

  

  Sean B•340

  @Sean-BradburyPosted almost 4 years ago

  Hi, @abhik-b thanks for your feedback. By whitespace I just mean the empty spaces within the image URL I get back from the API to display the image. I'm getting errors back and would like to clear the HTML issues.

  0

  

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  @Sean-Bradbury Since you are using jsx , the easiest way to fix that might be

  <img className="country-flag" src={props.flag.trim()} alt="" srcset={props.flag}/>
  

  However I checked the report and it seems the problem is also elsewhere ( country details links ) href='/country/Åland Islands'>

  Aland Islands can be replaced with Aland_Islands, Bolivia (Plurinational State of) can be replaced with Bolivia_Plurinational_State_of

  Then before fetching doing something like below can be helpful

  match.params.id.replace('_',' ')
  

  **Just a update ** I saw you actually encode your url , so that might fix the issues , without following my solution , so have you regenerated the reports ?

  Hope this Helps 🤞

  0