Submitted over 3 years ago

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

Sean B• 340

@Sean-Bradbury

Preview site View code

This is a solution for...

REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi all, having a little bit of trouble removing the whitespace for the URLs for the country cards. Any help is appreciated!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 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)! 😁

Sean B• 340

@Sean-Bradbury

Posted over 3 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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 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). 😀

Abhik• 4,840

@abhik-b

Posted over 3 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 🚀

Sean B• 340

@Sean-Bradbury

Posted over 3 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.

Abhik• 4,840

@abhik-b

Posted over 3 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 🤞

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord