Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Garethā€¢ 380

@Gareth-Moore

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


So this wasn't very difficult. But I'd love to know what you think of the API process I used and any advice regarding the JS/API.

Also... this website works perfectly in Chrome, but in Firefox it returns the same advice even if I close and reopen the browser. It's a bit odd and almost impossible to find any solutions to fix it. If you do know, I'd love to hear about it.

Thanks, Gareth

Community feedback

P
Daveā€¢ 5,245

@dwhenson

Posted

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
P
Emanuele Guriniā€¢ 140

@EmanueleGurini

Posted

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ā€¢ 380

@Gareth-Moore

Posted

@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,245

@dwhenson

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord