REST Countries API using HTML, SASS and Vanilla JS

Community feedback

• 

  Luis Castillo•380

  @lipe11Posted 9 months ago

  Hi, very brave to use vanilla JS on this project :)

  For the borders, there's and endpoint to get country data by its code. You could get the country name there https://restcountries.com/v3.1/alpha/{code}

  I think the async/await syntax makes the code simpler in this case.Something like this:

  async function fetchCountry(name) {
    const country = {
      name: { common: 'Guatemala' },
      borders: ['BLZ', 'SLV', 'HND', 'MEX']
    }
    
    return {
      name: country.name.common,
      borders: await Promise.all(
        country.borders.map(fetchCountryName)
      )
    }
  }
  
  async function fetchCountryName(code) {
    const res = await fetch(`https://restcountries.com/v3.1/alpha/${code}`)
    const [country] = await res.json()
    return country.name.common
  }
  
  fetchCountry().then(console.log)
  

  For the SASS issue, I'm not sure if I understood the problem correctly, but maybe tag.classList.add('className') might do the trick.

  0

  ---

  

  Sae Matsuda•240

  @SaeM843Posted 9 months ago

  @lipe11 Thank you for your feedback!

  Sorry if my explanation was not clear enought.

  For borders, I managed to get names but is struggling with directing to their own details pas when the border is clicked.

  For SASS, countries info on each cards (like their name, population etc) were created by using JS, such as createElement, classList.add as you said. However, when I tried to apply some SASS on the above elements it won't apply somehow... Does it make sense?

  If you could give me suggestions to solve the above, that would be much appreciated!

  0

  

  Luis Castillo•380

  @lipe11Posted 9 months ago

  @SaeM843 I couldn't tell exactly where the issues where, but I'll give a couple of suggestions as far I could see from the code you submitted. If the issues are on other code you haven't submitted yet, I hope this will give you ideas on how to fix them.

  In main.js, you have a declaration const infoOnCard = document.querySelector(".country-info"); that is defaulting to null. That's because the elements haven't been created yet by the displayCountries function. So when you try to do infoOnCard.classList.toggle("light"); it throws an error. I suggest you move the const declaration into the event listener, or any other functions where you want to manipulate those elements.

  In country.js seems you have the right direction with borderCountryTags.href = 'country.html?name=${country.name}';. The issue there is country.name is an object, not a string. Just need to change it to country.name.common (and change it to the border country you got as well, not the current country).

  Hope this helps. If not, feel free to share a more specific example.

  0

  

  Sae Matsuda•240

  @SaeM843Posted 6 months ago

  @lipe11, thank you so much for the feedback! I think it is working well now. I really appreciate your help:)

  0