Design comparison
Solution retrospective
Hi, this is my take on this challenge.
I've added loader and error message bar which was not mentioned in challenge instructions.
If you have some questions or comments, please ask freely.
Community feedback
- @tedikoPosted over 3 years ago
Hello, Konrad! 👋
Well done on this challenge! I am actually fighting with this one too so great to see someone else's solution. There is a problem on Firefox tho. Console throws an
CORS
errorCross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https (Reason: CORS request did not succeed)
. I encountered this problem too. Read about this error. The fix is to send your request to a proxy. A proxy acts as an intermediary between a client and server. The proxy server operates in between the frontend web app making the request, and the server that responds with data. Addhttps://cors.bridged.cc/
to any URL you’re fetching from. In your example it will be:https://cors.bridged.cc/https://geo.ipify.org/api/v1?apiKey=yourapikey
.Kudos for adding these popup message bars. I like when someone adds something from themselves to the project. I ended up with similar popups in my todo project.
Good luck with that, have fun coding! 💪
1@KonradOlechPosted over 3 years ago@tediko Thank you very much for pointing this problem. This solution however causing problem when trying to fetch users location (API recives proxy IP) but this is the best what We can achieve w/o backend I think
0
Please log in to post a comment
Log in with GitHubJoin 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