A little bit of CSS magic, a pinch of JS and dash of API.

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  Lovely job here. The app works well 🙌

  I would just suggest in your JS to add a check to ensure the API has responded correctly and render an error message if not. This isn't too tricky, and I would just change the first then to be something like:

    .then(response => response.ok ? response.json() : Promise.reject("API failed")```
  

  If you then add a catch at the end of your fetch function you can render some fallback text in case things don't work for any reason.

  It's not a big deal, but thinking about how things can go wrong is a good habit to get into.

  Cheers 👋

  Dave

  Marked as helpful

  1
• 

  Emanuele Gurini•140

  @EmanueleGuriniPosted over 2 years ago

  Hi Gareth, seems that Firefox is caching the fetch result. I found this solution on StackOverflow (https://stackoverflow.com/questions/72567690/ui-is-not-updating-on-click-event-that-triggers-a-fetch-on-firefox-developer) but the problem is that property called count is always incremented by one, and, if you start a new session, advice is always the same in a row.

  To avoid the same advice in a row, as you can see from my solution, I create a new Random number, and I use it only if my script detects firefox browser.

  My solution: https://github.com/EmanueleGurini/js-advicegenerator/blob/master/js/main.js

  ps. why am I using 224 as max number? Advices are 224.

  Marked as helpful

  0

  ---

  

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  @EmanueleGurini @dwhenson

  Thank you both. You've helped a lot. The Firefox issue was a bit odd and I really couldn't find what the problem was so I am very grateful for that!

  I have one question regarding your suggestions. I've been struggling with Promises and one thing I am very unsure of is what exactly is happening with Promise.reject("API failed")

  Fetch is a Promise right? A Promise takes resolve and reject parameters. So far so good. But where do you access the reject parameter? Where is it printed or how do you access it? What exactly is going on. To me it just sort of is there but I don't know what effect it is having on anything... I hope that makes sense because I'm really struggling to put that together in my head and MDN, W3Schools and lots of YouTube tutorials have not really helped me figure this out.

  Thanks in advance for you guys help, I really appreciate your time.

  Gareth

  1

  

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  @Gareth-Moore this is a great question, and honestly not one I am 100% comfortable answering. I'm currently re-learning promises, but let me try:

  • Fetch always returns a promise. This is because fetch has to go to the network. So, we cannot freeze the entire browser while the fetch request is working.
  • Under the hood of fetch the promise returned looks like this:

  new Promise((resolve, reject) => {
      resolve(); // will resolve the promise (.then(callback) will be called)
      reject(); // will fail the promise (.catch(callback) will be called)
  });
  

  • If all goes well the response (an object) is passed to the resolve function, and then the then callback, and you're off to the races...
  • If not, similar to resolve(data), you can reject with data reject(data) and the data will be made available to the .catch() callback.
  • You so you can pass in the returned response in reject as well. Logging this to the console might help you understand what went wrong too.

  Please anyone that knows better jump in!

  0