Hello Coders!
Lots of learning with this one. If anyone cares to leave feedback look specifically for React, fetching, search-bar errors or optimization as these were the things i was most uncomfortable with.
Thanks for the attention. Happy coding!
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.
Hi Everyone, This project had some challenges but I went throw them. I have a question if someone knows how to deploy react vite app with routing to GitHub pages?
All answers and feedback are appreciated and welcomed.
Have a happy new year y'all
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.
I did this with React while still learning it, just to grasp my knowledge more on the basics. I have issues with implementing a notication on the cartIcon whenever a user addToCart. Anyone who can recommend me a solution to that please?.
And i actually did try my best to replicate all the designs and functionalities, due to the limitation of not having full access to all the resource. Pls feel free to to give your thought on any issue or suggestion.
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.
This is my solution to this challenge. It was build using Sass, specifically SCSS syntax and Vanilla JavaScript.
The only problem I'm encountering is that the advice that is displayed isn't refreshed on Firefox when the dice button is clicked and it even persists when the page is reloaded. I'm aware of the API's rate limiting and I'm sure that is not the problem since it works just fine on Chrome.
If anyone knows the solution to the problem I'm facing or other, general, suggestions please feel free to leave your feedback. Thanks! :)
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.
I'm having a hard time putting the dice button on the border of the advice "card", any tips? I was thinking of setting its position to absolute, but this way it wouldn't be able to re-position itself when the card resizes when there is a change in the advice text. Thanks
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.
Could I improve the fetch load of the request ?
I don’t think it needs an improvement. That’s about as simple as a fetch request can be.
