All comments

• 

  Sae Matsuda•240

  @SaeM843Submitted 9 months ago

  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

  30
  

  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

  This comment has received 3 repliesShow
• 

  Mateusz•180

  @userMatMikSubmitted about 2 years ago

  Hello FM Community! This is my first upload here so dont be harsh ;)

  I've made this project using Vanila JS because I felt that this will be a great opportunity to use some more advanced JS features for example: JS Routing and Promise.all()

  I didnt follow FM Design i went more in neumorphism style and I've added few things from me like Leaflets maps ( dark and light mode) and preferred color scheme.

  I'm not sure if I used Promise.all() properly so I will be very greatfull is somone can take a look at it. The function is called getBorderCountrysName () and it's in app.js file.

  Take care guys :)

  

  REST Countries API with neumorphism design and Leaflet Maps

  2

  30
  

  Luis Castillo•380

  @lipe11Posted about 2 years ago

  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

  0

  This comment has received 1 replyShow
• 

  Yokke•620

  @JexinteSubmitted over 2 years ago

  Hey all ,

  My first challenge with an API and honestly I wasn't ready to finish it quickly .

  I need a feedback on my request because it's working fine( on brave & chrom browser) but on firefox even the request is fullfiled it's not generating another quote when the dice is clicked it's always gonna take the first citation when we clicked the first time and show it again and again so if someone can help me to understand why !

  Thanks for reading !

  

  Javascript , Promise , Advice Slip API

  1

  20
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

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

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

  cheers

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Joanna•370

  @JoannaLapaSubmitted over 2 years ago

  Hi Everyone!

  It would be nice to get any feedback. I found some difficulties with keeping the design layout of project with the longest advices which runned into a pattern-divice. The problem which I didn't resolve - I see that with the longest adivce the small part of vertical lines disappear and I don't know what cover it. If someone is able to suggest me anything or explain what cause the problem it would be great.

  

  Advice generator app solution

  1

  60
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  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

  1

  This comment has received 1 replyShow
• 

  Omar•20

  @Omyy27Submitted over 2 years ago

  I have a doubt, sometimes my request takes a long time to arrive, I understand that with an Async function I could solve it. But I don't know how to implement it in my solution with fetch.

  

  Advice generator with CSS Flexbox and Fetch Js

  2

  40
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  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

  0
• 

  Abubkar Ahmed•460

  @abubkar-ahmedSubmitted over 2 years ago

  Hello friends, any feedback will help me a lot I have a question is it a good practice to use local storage for this challenge ? because I have two html pages and I did not know how to pass the country information to the other page except using the local storage. Thank you!

  

  REST Countries API with color theme switcher, HTML, SCSS, JS

  2

  50
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  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

  1

  This comment has received 1 replyShow
• 

  Joseph Chow•130

  @chowjiamingSubmitted over 2 years ago

  I made the country results container with CSS Grid. I gave the property align-items: flex-start to the card because some country flags have different dimensions, so this created different height cards for each card in the row. I wanted to respect the dimensions of each country's flag. One solution would be to set a fixed height to flags in the country card, but then that would shrink taller country flags and put whitespace on either side of those flags.

  .container__results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    align-items: flex-start;
  }
  
  @media (min-width: 30rem) {
    .container__results {
      grid-template-columns: repeat(2, 1fr);
      gap: 3em;
    }
  }
  
  @media (min-width: 55rem) {
    .container__results {
      grid-template-columns: repeat(3, 1fr);
      gap: 4em;
    }
  }
  
  @media (min-width: 90rem) {
    .container__results {
      grid-template-columns: repeat(4, 1fr);
      gap: 5em;
    }
  }
  

  

  REST Countries API with React Router and CSS Grid

  1

  30
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  Hi,

  I ran into the same issue, but was able to make it work with aspect-ratio on the image.

  Cheers.

  1

  This comment has received 2 repliesShow
• 

  P

  Grog the Frog•480

  @GregLyonsSubmitted over 2 years ago

  I tried to implement a feature where the button will be disabled for 2 seconds after fetching (since that's how the Advice Slip API works; it returns a cached version of the previous quote if you request too frequently). It seems to work decently, but I've noticed that rapidly clicking on it can break it. Is this something you run into, and if so, how would you handle it?

  

  Solution that waits for new quotes

  3

  30
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  hi,

  I think the timeout worked pretty good. I tried to fast click the button but barely saw it act weirdly.

  However, if you want to get rid of the effect, you might want to try something like throttling. I'll leave a reference here. As a first approach, you could try something like this

  let waiting = false
  
  buttonWrapper.addEventListener("click", (e) => {
    if (waiting) return
    waiting = true
    getAdvice()
    setTimeout(() => {
      waiting = false
    }, 2000);
  })
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Ivan•2,630

  @isprutfromuaSubmitted over 2 years ago

  Please add feedback about my work, if you familiar with css, svelte, js technologies. I'll be appreciate for it

  

  Product page builded with Svelte and WindiCss

  1

  40
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  hi, your solution looks pretty good!... I used svelte in mine as well.

  Overall looks good in my opinion, I'll just leave a couple of suggestions.

  I think the lib folder could be a little bit misleading (they're mostly used for organizing modules), instead, I think you can omit it, and leave your components like this

  src/components
  src/components/cart
  src/components/icons
  src/stores
  

  Another good recommendation to follow I think it's to avoid modifying stores directly, instead, have "action" functions that you can reuse in your components, something like this

  const isVisible = writable(false)
  
  function show() {
    isVisible.set(true)
  }
  
  function hide() {
    isVisible.set(false)
  }
  
  export default { isVisible, show, hide }
  

  Hope this is useful

  0
• 

  Anas•330

  @redshift14Submitted over 2 years ago

  Had fun doing this challenge, I am still at the beginning journey with React so any suggestion or feedback is appreciated!

  

  REST Countries API Using React

  2

  60
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  Hi, nice solution!. I'm currently working on this project myself.

  I think your react code is very clean, if you're just starting, you're definitely on the right track.. And adding the map was a nice touch too!

  Just a couple of small suggestions:

  • consider putting your fetch functions into a module, and import them from your components.

  • instead of using the regex for the comma separated list, you could use

  array.join(', ')

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Vincent Stoop•30

  @vincentstoopSubmitted over 2 years ago

  This is my solution for this challenge. I'm having difficulties in making my javascript code work in Firefox. On my macbook it works in Chrome, Safari and Opera, but in Firefox it only works on page load, but for some reason it doesn't work when I click the button, even though all console.log statements do appear in the inspector. I hope someone knows the solution for this issue...

  

  Responsive Advice generator using sematic html, css and Javascript

  1

  20
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  hi... the issue is the cache on firefox.

  you can fix it like this

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

  cheers

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Bryan Sanchez•590

  @0-BSCodeSubmitted over 2 years ago

  Had a lot of fun with this one! I decided to do a simple challenge so I can work on my animations and basic API fetching. Some questions I have regarding my results.

  1. Is there a better way to organize my JS and CSS files? Before I'd just dump all the code for each in one file, so I thought I'd try organizing it better in this challenge. However, I've had limited success since I don't really know how to compartmentalize my code and the challenge wasn't really complex so there wasn't much code to compartmentalize. I'd greatly appreciate any feedback and advice regarding this!
  2. For this challenge, I decided to create a loading animation while data was being fetched from the API. I just placed a rotating div element where the text should be and have it display while the data was being fetched and hidden when the data arrived. Is this good practice or is there some better method that can be used?

  Any and all advice or feedback would be of immense help😁 Cheers!🎉

  

  Fluid Responsive Design Layout using HTML5, CSS3, and Vanilla JS

  1

  20
  

  Luis Castillo•380

  @lipe11Posted over 2 years ago

  Hi, nice solution there! And reading your code taught me a about intersection observers, didn't know they existed!.

  Regarding your question about compartmentalization, I think what you did with 3 files makes sense. I think whatever helps with readability is good. Having said that, I'll leave a couple of personal thoughts about separating code.

  In my opinion, is a bit easier to get better at it when you star working with modules. In this case, the 3 files are joined in the same scope at the end, so it's like it was just one file anyways, but with modules, each file lives within it own scope. So it makes you think a little different on what is best to put in each file.

  This used to be more of a node thing, but I've seen there's some browser support for modules this days (in fact, I imported an external module in my own advice solution). If you haven't used them before, I'll leave a reference here.

  As a suggestion related to separating code, you could break some of your functions a little more, for instance, your fetch function could be 3 functions (one for "fetch", one for "disable" and one for "enable"). Just beware, since your fetch function is async, you would need to use it within another async function or with the promise/then syntax.

  Hope this is useful in some way.

  Marked as helpful

  1

  This comment has received 2 repliesShow