Vue 3, typescript, sass

Community feedback

• 

  Emmanuel Oloke•320

  @EmmanuelOloke

  Posted over 2 years ago

  Hello Mateo, trust you're doing great. Great job on completing this project, it looks really clean and professional, kudos.

  I do have some observations that I wish to bring to your attention;

  1. When a user clicks on a country card to show more details about the country and then refreshes the country details page, the user is taken back to the Home page as opposed to still being on the country details page that they refreshed on.

  2. On the country details page, there's no state to handle when the country has no Border Countries to display, you can have a div with a text that says "No Border Countries" for example.

  3. Also on the country details page, for countries with Border Countries, the design from Frontend Mentor did show that the country names be displayed in full and also be clickable in order to navigate to the corresponding country, but at the moment only the acronyms of the countries present in the "borders" property returned by the API are being displayed.

  I also had this problem while attempting this challenge some weeks back. A way I was able to solve the issue was to loop over allCountries and also loop over the "borders" property array and check where the borderCountry matches the allCountries.cca3 property, then you can now return the allCountries.name.common value for that country in a separate array. Then use that array to display the border countries.

  That worked for me, you can then go on to add a link to the div that navigates to that particular country's details page. This will fulfill the original design specifications.

  Just thought to bring these to your notice and also share my experience building the same challenge. Hope this has been helpful. Enjoy!

  00

  Marked as helpful