Submitted about 4 years ago

REST Countries API with color theme switcher

Sami ur Rahman•370

@qsrahman

Preview site View code

This is a solution for...REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

Design comparison

SolutionDesign

Solution retrospective

One problem which I could not solve is in the flag image size for some countries in CountryDetail react component when object-fit: cover is used. For some countries e.g the image is cropped I tried everything but could not succeed resolving it. The relevant CSS is .flag-detail { flex: 1 1 0;

  @media (max-width: 1024px) {
    width: 100%;
  }

  img {
    display: block;
    width: 87.5%;
    height: 400px;
    /* object-fit: cover; */

    @media (max-width: 1024px) {
      width: 100%;
      height: auto;
    }
  }
}

Any suggestion/help in this regard will be highly appriciated.

Community feedback

Matt Studdert•13,611
@mattstuddertPosted about 4 years ago
Hey Sami, you've done a really good job on this challenge. Your solution matches up to the design well and scales up/down nicely for different screen sizes.

To answer your question about the flags, I'd actually say don't worry about it too much. Working with different images each with their own aspect ratios is always going to be tricky if you're trying to achieve a uniform presentation. Using object-fit: cover and having some crop isn't a problem. Or you could use object-fit: contain and just have them slightly different sizes. Either way would work.

I've seen a couple of areas where you could make some improvements in your code as well:

Be sure to add a main element to your pages. This marks the main content on any page.

Don't nest your selectors too deeply. You're using Styled Components, so either break declarations out into new styled-components or reduce the nesting. For example, your selector for the .detail-lists is currently .dSfxDO .detail-main .detail-content .detail-lists when it could be its own styled-component or at least reduced to just .dSfxDO .detail-lists inside that component.

How did you get on with this project? Did you learn anything new while building it?

Keep up the great work! 👍
1
Sami ur Rahman•370
@qsrahmanPosted about 4 years ago
@mattstudder thanks for the helpful suggestions. ✌️
0
Matt Studdert•13,611
@mattstuddertPosted about 4 years ago
@qsrahman you're welcome!
0
Marco Pérez•15
@marcodamianperezPosted about 4 years ago
Hi, I find your solution quite good. Although I haven't walk through your code I find one small functionality issue. When you filter by region, let's say Europe and THEN you search for a country in the input field, let's say Argentina, it shouldn't show that country given it's not currently listed on screen. Sorry about my english.
1
Sami ur Rahman•370
@qsrahmanPosted about 4 years ago
@marcodamianperez please check the app now.
0
Sami ur Rahman•370
@qsrahmanPosted about 4 years ago
Thanks for the feedback @marcodamianperez. I think you have found a logic bug in app 😱 will fix it.
0

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