Skip to content
OverviewSolutions
4
Comments
17

Luis Castillo

@lipe11Guatemala380 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Sae Matsuda•240
    @SaeM843
    What are you most proud of, and what would you do differently next time?

    ⚠️⚠️NEED YOUR HELP⚠️⚠️

    Hi Frontend Mentor Community! This is my solution for this challenge:)

    I would like to get your help...

    • How can I get borders info from API? I manage to get their name, but struggling with directing to their details pages.
    • How can I apply SASS to elements which are generated by JavaScript? I would like to apply background-color and also some style to tag, however, changes won't be applied to the elements which are inserted by JS

    Your help would be much appreciated!

    REST Countries API using HTML, SASS and Vanilla JS

    1
    Luis Castillo•380
    @lipe11

    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.

  • Luis Castillo•380
    @lipe11

    Very nice!. I wish I knew about leaflet maps when I did mine, looks pretty good and clean.

    Regading Promise.all, I think you could omit one of the calls if you get the json in the same promise... like so:

    const promises = borders.map(async (borderCountryCode) => {
  const result = await fetch(url)
  return result.json()
})
const finalData = await Promise.all(promises)

    cheers.

    Marked as helpful
  • Luis Castillo•380
    @lipe11

    Hi, you can fix it like this to work on firefox as well:

    fetch(url, { cache: 'no-cache' })

    cheers

    Marked as helpful
  • Luis Castillo•380
    @lipe11

    Hi, your solution looks great, and very clean.

    I tried to find long quotes but didn't get to one that showed the overlapping issue you mentioned. However, I did notice a lot of fixed heights in your CSS.

    I'll leave a video that might help you solve your issue, it has a segment on fixed heights (in fact, the whole channel has great CSS stuff)

    As a side note, the code link from your solution is linked to another repository ;)

    Cheers.

    Marked as helpful
  • Luis Castillo•380
    @lipe11

    Hi,

    Regarding your question, to change your function to an async function looks something like this

    async function showQuote() {
  const response = await fetch(url)
  const json = await response.json()
  idAdvice.innerHTML = json.slip.id 
  textAdvice.innerHTML = json.slip.advice
}

    (note there's no need to pass the data through an array, you can reference it directly from the json object)

    However, making the function async won't give you greater speed, async/await is equivalent to promise/then, choosing one over the other is just a matter of syntactic preference. For me, your function worked just fine as it is.

    Also note that sometimes when you click you get the same quote from cache, it takes about 2 sec to get a fresh one. I'm guessing with this one, but it might be the reason you sometimes feel a delay in the response.

    Hope this is useful

    Marked as helpful
  • Luis Castillo•380
    @lipe11

    Hi,

    Regarding your question, to pass data to another page, a common approach is to send it through query parameters, they are appended to the url like this http://example.com/page.html?param=value (I'll leave a reference here).

    Most likely you would only pass the id of the country as a parameter, and do a fetch for that id on page load.

    Hope this is helpful

    Marked as helpful
View more comments