Skip to content
OverviewSolutions
10
Comments
6

Ibenyenwa Charles

@zubyCharlesNigeria330 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Ibenyenwa Charles•330
    @zubyCharles

    When you try to find a country by entering it’s name in the search bar, no result is returned unless the entire input is in lowercase. This is because the names of the countries are stored in lowercase in the json returned by the API call. So ensure you convert your input value to lowercase before comparing with the country.name.common property for the search functionality.

    Marked as helpful
  • Ibenyenwa Charles•330
    @zubyCharles

    Awesome project but there’s an issue I noticed. When using the search input to search for a particular country, the search only works if the name of the country to search is typed all in lowercase. If you type the first letter of the country in uppercase the search won’t work. I suppose it’s because all the country names are stored in lowercase on the database. So you need to convert the search query to lowercase before comparing.

  • Ibenyenwa Charles•330
    @zubyCharles

    That shouldnt be too difficult since you are making use of the context API. You just need to import your context where the cart icon is and take out the variable that represents the number of items in your cart then make the badge icon and put that variable inside it also make sure the value is only visible when the number of items in the cart is > 0; otherwise render null.

    Marked as helpful
  • Ibenyenwa Charles•330
    @zubyCharles

    I ran into the exact same problem when I did the challenge. Firefox kept returning the same advice object, worked well on chrome though. When I selected no-caching on my firefox browser settings it began working fine. So it’s a caching issue. I can see you’ve received help on how to solve this programmatically.

  • Ibenyenwa Charles•330
    @zubyCharles

    if the button is contained in its own container div, add this style to the div

     width: fit-content;
 margin: 0 auto;
 transform: translateY(xrem);
}

The first 2 lines centers the button horizontally, then you can use the translateY property to position it on the cards border.
  • Ibenyenwa Charles•330
    @zubyCharles

    I don’t think it needs an improvement. That’s about as simple as a fetch request can be.