CSS Flex Javascript Fetch

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 2 years ago

  Hi Vaslie

  I just did a quick test and it seems to be working fine for me! Nice job. Here's a couple of points to consider:

  1. For the button, you should probably add an aria-label to help people with screen readers understand what the button does
  2. If you really want to help them I would also add an aria-live="polite" to your h1 as this will announce the text when it is rendered to screen readers too.

  Otherwise I think this looks good. I like the way you included some default text for people to read while the first fetch is happening, and that you included a catch in case of errors.

  For the return of data I typically do something like response.ok ? response.json : new Error. This also checks the returned data is fine, and adds another level of robustness to the app.

  Hope this helps and nice work!

  Cheers Dave

  Marked as helpful

  0

  ---

  

  Vasile Cosmin•160

  @VasileCosminPosted about 2 years ago

  @dwhenson I added aria label and aria live. Thank you so much for the advice

  0
• 

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  Hello,

  I think the api is made to give you the same answer if you click before a certain amount of time after you first query. I had the same issue on my project.

  The API just prevent you to spam requests.

  Edit: the issue seems to be caused by the fetch API who return the previous cached response. Asking for fresh data each time resolve the issue.

  1

  ---

  

  Vasile Cosmin•160

  @VasileCosminPosted about 2 years ago

  @john-mirage Thank you! I thought i did something wrong

  0

  

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  @VasileCosmin No it's not your fault, but as good developers we need to take care of this, so if you want to give you a little challenge, you can prevent the user to click or query a new advice before the api is willing to give you a new one :)

  It reminds me that i need to do it too on my project xD.

  0

  

  Vasile Cosmin•160

  @VasileCosminPosted about 2 years ago

  @john-mirage i found a way to give a new advice everytime i click on the button. This is what i did: fetch( url, { cache: 'no-store' } )

  I found it on someone's solution here

  0

  

  John Mirage•1,590

  @john-miragePosted about 2 years ago

  @VasileCosmin Oh even better, nice job, thank you very much !

  1