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

@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

@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!