Build a Random Quote Machine - The Correct Way?

What is the “proper” way to complete this project? I’ve seen people using array’s and some using API’s to pull in the random quotes. I assumed they wanted us to use API’s since that’s what the previous 7 assignments covered.

Or, should I even worry about the “proper” way to do it as long as it runs successfully?

1 Like

Hi, I have also not completed this project due to the same confusion.

But using APIs makes sense however you cannot do it if you don’t know how to create/use APIs.

2 Likes

I believe it is up to you. I used an array to store a bank of quotes in lieu of a database, while others are pulling down quotes from an external API. As long as you fulfill the written requirements you are golden.

5 Likes

I used an array for mine too. I don’t think it is as important that you use an API for this one, more that you get experience incorporating your algorithm thinking. I think that the following three projects after this one give you plenty of opportunities to work your API/json muscles.

1 Like

“proper” way may be subjective.

afaik, .getJSON is a recommended wrapper around .ajax. I’m glad Freecodecamp kept it simple with using this only. If for some reason FCC material didn’t click for you, maybe this jQuery Ajax Tutorial #1 video will.

If one is comfy with basics and looking for alternatives, here is perhaps the best I have seen for async JS: Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators.

It covers quickly and clearly four levels of async JS - It’s so good you don’t have to read this, read that and read more to figure which is better. Together with .getJSON, you know five :slight_smile:

10 Likes

I used an API for mine, as I thought that by this point in FCC we were maybe getting our training wheels taken off and were expected to go do a bit of research on our own to figure out how to make a particular API work. This is my finished one if you wanted to see one done with API. You need to actually open it in codepen, not run it in the thumbnail for some reason:

16 Likes

My solution was to put my quotes in a json file that lives in my public Dropbox folder, and then make an ajax call to retrieve it. I guess it’s kind of a hybrid between using an array in the javascript and using an API.

My understanding is that as long as it satisfies the user stories, it should pass.

Ron Swanson Quote Generator

2 Likes

I think the correct way to complete this challenge is using Random Famous Quotes api.
I think the problem is ajax request.
I have trouble how to request.
I found sample code to execute this request in this link.

http://rqm.aungmyokyaw.com/

Source Code

3 Likes

@kjarva Your code tabs and spacing make your code very hard to read.

FTFY

$( document ).ready(function() {
  $.getJSON("http://api.icndb.com/jokes/random?exclude=[explicit]", function(json) { 
    $("#quote").html((json.value.joke)); updateTweet(json)
  });
});

$("#button").on("click", function() {
  $.getJSON("http://api.icndb.com/jokes/random?exclude=[explicit]", function(json) { 
    $("#quote").html((json.value.joke));
    updateTweet(json);
  });
});

function updateTweet(json) {
  var thisQuote = json.value.joke;
  $("#tweet_btn").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote + "%0a--- ");
}
1 Like

Thanks for posting this; I have been struggling for a week now with this and I finally got something to show up by going through your scripts. It’s becoming slightly less gray for me! Yay. Thanks again.

very well written.simple and easy to understand but could you tell me how did u know “json” had 2 more objects in it speciically “json.value.joke”.

can someone tell me a similar code but by using .ajax rather than getJSON.

I used an array. I’m still not very clear on APIs so I might do some external studying for a while before jumping on the weather project. My understanding is that FCC wants us to complete each project/challenge in our own unique way and that there isn’t necessarily any “right” way.

Nice project, it looks good from the outside and under the hood too. Love the idea for the project. Cheers :relieved:

Hi, I did the same thing by myself but I used the ajax function but I got an error due to the reasons related to CORS,Please advice on the matter.Thanks

1 Like

@kjarva. Does this API calls the random quotes on its own everytime you call it?

The user story for the challenge doesn’t specify ajax or json or whatever. It’s just :

User Story: I can click a button to show me a new random quote.
User Story: I can press a button to tweet out a quote.

I built mine using an array of objects and VueJS.
https://randomquote-owel.surge.sh/

This is my HTML part basically.

          <div id="refresh" @click="generateNewQuote"></div>

          <div id="quote">
              {{ quotes[ndx].message }}
              - <i>{{ quotes[ndx].person }}</i>
          </div>

and the relevant JS, basically

generateNewQuote: function() {
   this.ndx = parseInt(Math.random() * this.quotes.length);
}

I used ajax, you can take a look at the code(https://codepen.io/SirG/pen/LLRPvQ?editors=1010)

1 Like

check my codepen:
A simplest way to implement Quote Machine

4 Likes

Why is there question marks in the url that you use? I realised that, and realised that you have to declare the getQuote function before using it; otherwise, it won’t work. Could you explain these slight differences? I’m kind of confused. Thanks in advance for your help, your pen helped me quite a bit. Oh yeah, also with your jQuery generator button, your .on(‘click’, function(){}) didn’t work, I changed it to .click(function(){}) and it worked. Don’t know why but it works though. :slight_smile: