Created a Quote API for all to use!

That is brilliant work!

@lionel-rowe your random quote generator works in Chrome, but not in IE. Is there a reason for that? Neither the Itchy and Scratchy animation shows up, nor the quotes with the associated pictures.

Yep, it’s hilariously broken on IE8. I believe it probably wouldn’t work on any versions of IE, even 11, because the code uses ES6 features and no IE version supports ES6 (lol Microsoft). Perhaps I should run the code through Babel and see if that fixes it.

1 Like

Funny…I swore I had that one in there, but after checking my database, I did not! However, it is now in there :smiley:

1 Like

Does anyone still use IE? :open_mouth:

I’ve tried using this Api with Codepen and also without Codepen, and nothing is happening. Here is my Simpsons quote generator: https://codepen.io/Crimson_Macaw/pen/xrXXjY . Could someone take a look and tell me if I’ve coded everything properly?

@Embustero Bootstrap complains about missing tether requirement. You should include tether.min.js before you include bootstrap.min.js.

The bootstrap issue is unrelated to the JSON not functioning properly. I’ve added the tether.min.js link but that produced zero results.

Could someone please create a functioning quote generator using this Api with Ajax? I’ve tried it through both Ajax and Json and cannot get it to work. Lionel-rowe’s quote generator is through xml and so isn’t of much help.

@Embustero finally fixed it in a fork : https://codepen.io/rainbru/pen/XgVxNJ/. You were so close :slight_smile:

  1. The url is wrong (you must add /quotes endpoint);
  2. The returned object is an array, you have to use response[0].quote instead of response.quote.

Thanks rainbru I finally understand it now. I just had no idea that the object came back as an array.

Also, I’m not sure if you get this issue as well, but after I’ve clicked on the New Quote button 2-3 times the quotes start to appear in quick succession, one after another, and then stop after a few seconds. This is an issue that comes up in both Chrome and IE (I’m getting the same issue even when I use other quote APIs e.g. forismatic) and I’m not sure what’s causing it.

I think I fixed the quote succession issue. The curly bracket closing the getQuote() function l35 should be before the #buttonOne click handling block (l23 in https://codepen.io/rainbru/pen/XgVxNJ). I’ve only tested it with chrome though, let me know how it works with others.

Thanks again rainbru. I had placed the curly bracket in the correct position originally, but after commenting out the $.getJson call which I had been experimenting with, I had accidentally commented out the getQuote() function’s closing curly bracket as well.

It uses the js native XMLHttpRequest() constructor, but that’s actually a misnomer, because it can return formats other than XML. In this case, it returns a JSON string, which is then parsed using JSON.parse() to turn it into a usable JSON object.

@lionel-rowe is there a specific reason you chose XMLHttpRequest over Jquery? Does one have greater interactivity or more performance gains over the other?

This is awesome. I hope it helps out the future campers.

If the JS you’re writing is optimal, native JS should typically be slightly faster than using libraries, though the difference should be fairly negligable. What’s slightly more worth considering is the size of the library code itself, which slows down page load times (however, assuming you have a decent internet connection, this should still be barely noticeable).

Mainly, I just wanted to try writing something in pure JS, as up until this point I’d used jQuery for almost everything other than a couple of rudimentary React projects. I think this is worthwhile as a learner, as it allows you to get a bit more into the nuts and bolts of the language, even if you’d typically be using libraries and/or frameworks on top of that in a professional setting.

Unfortunately, yes. Looks like it still has around 15% of US market share. Similar worldwide. It seems the vast majority of those users are using IE11 (which still doesn’t support ES6).

I’ve put the JS through Babel, but even then the code is completely failing to run in IE8. In the interests of striking a balance between keeping this thread alive and not derailing it, I’m starting a new thread about that here.

Awesome! Thanks for making it. I just finished my Random Quote Generator using your API and it was a breeze.

It’s pretty basic, but here it is: https://codepen.io/drecali/full/RgZzaN/

PS. I don’t know much about APIs, but I think I used the AJAX method shown in the video below. It was my first time working with APIs so I proceeded cautiously and used console.log() to frequently check if the JavaScript code I was writing was working.

Thanks again @Jluboff!

Awesome, great work! I’m really happy that people are using the API and enjoying it! My aim was to make something easy to use as other API’s can be quite challenging to understand and use :smiley:

2 Likes

Just wanted to say thanks for doing this. I just finished the Apis and Microservices section and was going through my old projects and noticed my random quote machine no longer worked. Apparently the api I was using went away! Anyway, this is great and the quotes are a lot more fun than the ones I was getting. Thanks again!