Need help getting quotes from public APIs ( random quote machine project )

1

Can somebody tell me the way to get quotes from the APIs ?

2

Which API are you using? What have you done so far? Can you provide a link to your code (preferably in a CodePen)?

3

https://codepen.io/hungnguyen1895/pen/ALrbwK Right now I’m trying to solve the random that does not repeat to last quote
I can create array to store quotes and author, but i prefer to use API to get quote.

4

There isn’t a requirement to pull the quotes from an API. You can just fill an array with them and go from there.

5

Your next step should be to choose an API that you want to use. A fellow camper has made a random quote API here that you can use.

6

I just try to do it by getting quotes from API in order to use it in the future I think
But thank you anyway.

7

So u think I just create an array and copy those quotes into it.

8

No, you can get a quote in your program by using that API.

9

I think this particular project was designed so we can practice the things we learned in the JSON APIs and Ajax chapter. So I’d try my best to pull data from an actual API, since you won’t be able to avoid posting to Twitter anyway :wink:

10

I just finished this assignment. I think that the intended solution need NOT use a public API nor a hardcoded array per se. The point, I figure, is to learn how to build and extract information from JSON objects which would be an extension of the lessons right before it. A flurry of googling on my part resulted in me thinking that it should be possible to create a json object in one code pen and link to it using AJAX (as in the cats’ picture example). Also see https://blog.codepen.io/2013/05/28/new-feature-use-pens-as-external-resources/

Alas, I couldn’t get it to work. I’m convinced it is because of the issue that CodePen is converting to all https. Here is a link to the notice: https://blog.codepen.io/2017/03/31/codepen-going-https/ Since my request was using http: I got the “mixed content” error. By next month (June 1), this is supposed to be a non-issue.

As a workaround, I just linked to the CodePen js file under settings. That allows one to the use the JQuery functions (filter(), forEach()) as in the cat example, but doesn’t require invoking the getJSON method. This I think is the best solution, at least for now.

11

I just can’t retrieve data via API. What’s wrong with this code:

var currQuote;
var quoteText = document.getElementById("quote");

function nextQuote() {
  changeQuote();
  quoteText.innerHTML = currQuote;
}

function changeQuote() {
    
    $.get( "/api/quotes/random", function( data ) {
            currQuote = data.quote;
    });
}

function tweet(){
  window.open("https://twitter.com/intent/tweet?text=" + currQuote);
}

I have the following HTML code:

<div class="quote-box">
  <i class="fa fa-quote-left"></i>
  <div class="quote-text" id="quote">
    <!--quote here-->
  </div>
  <i class="fa fa-quote-right"></i>
  <button class="change-button"
          id="next-quote"
           onClick="nextQuote()">
    Random Quote
  </button>
  <button class="tweet-button" 
           onClick="tweet()">
  <i class="fa fa-twitter"></i>
    &nbsp;Tweet!
  </button>
</div>