Skip to content
OverviewSolutions
3
Comments
5
Jesse Ohanugo
@J-e-s-se

All comments

  • Eduardo•910
    @KTrick01Submitted about 2 years ago

    Hi, In this challenge I learned a lot about working with async data, and my conclusion is that dealing with them gives you a headache some times! But at least it was fun. There is a thing that I wasn't able to do, in the original design the buttons of the border countries have their full common names, but the API just gives you their abreviations, so i just left them that way, why? Because the only way that i can think for displaying their full names is that i have to fetch again the api using the abreviations of their names, and i think that is a waste of resources and unnecessarily complicated for just that purpose, so if anyone knows a better/simpler way of doing it please share your knowledge with this peasant!

    (There's no more free advanced challenges so im sad now, when i really feel that im learning is when i do these challenges 😥)

    REST Countries API | Vue.js 3, SASS

    3
    Jesse Ohanugo•110
    @J-e-s-sePosted about 2 years ago

    You don't need to re-query the api. Here's a function from my solution on how to get a country name using it's abbreviation.

    const getCountryName = (a3code: string) => { const country = countries.find((c) => c.alpha3Code === a3code) return country ? country.name : '' }

    const name = getCountryName('ALB') console.log(name) // albania

    Marked as helpful
    1
  • Jesse Ohanugo•110
    @J-e-s-sePosted over 2 years ago

    Congratulations on completing this challenge! You did a great job. I'll share a tip I learned from completing this challenge.

    I suggest you should use "min-height: 100vh" instead of "height: 100vh" in the "h-screen" class. This allows your page content to have a minimum height of the viewport height as well as grow if the page content is longer than the viewport height. "height: 100vh" makes your page content fixed to the viewport height

    Here's what I mean:

    .h-screen { height: 100vh; // good min-height: 100vh; // better }

    This blog may help you understand better. https://greggod.medium.com/css-do-not-put-height-100-on-the-body-html-e36bda3551b3

    0
  • Jesse Ohanugo•110
    @J-e-s-sePosted over 2 years ago

    I think it's easier to start with mobile and then include the styles for tablet and desktop. If you start with desktop, you may have to undo some styles which can make your code longer.

    0
  • Jesse Ohanugo•110
    @J-e-s-sePosted over 2 years ago

    I used create-react-app so I could focus only on building the app. I also used react router.

    0
  • Jesse Ohanugo•110
    @J-e-s-sePosted over 2 years ago

    Just set your background to a dark color.

    0