Random quote project--almost working!

Random quote project--almost working!
0

#1

I feel like a slow learner. But finally came up with a solution that looks a little like the preceding lessons. After too much time, I gave up on finding a simple solution to getting the quote content into a fb share. What do your think? perhaps you can help.


#2

I changed your topic category to Help, because you seem to need a little on this project.

First suggestion is to move the to twitter and facebook click events to be outside the callback function for the button with id=“getQuote”. By having it inside, you were adding extra click events for those buttons each time a new quote was requested. Since you will be moving these outside of this callback function, you need to take advantage of the fact you declared quote outside of the getQuote button event handler and just assign quote the first element in the json array received back from the Quotes On Design API.

Here we should look to simplify your callback function of the getJSON call. You have:

    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
      function(json) {
        var html = "";
        json.forEach(function(val) {
          html += val.content + " —said by: " + val.title;
        }); //END using foreach method to assign the quote to var called html

        $("#quoteHere").html(html); //quote inserted into page element

        // assign the quote text into a variable that can be added to witer
        quote = document.getElementById("quoteHere").textContent;
        // console.log(quote); //does it work?
      }
    ); // END json function

The forEach part is unneccesary because json is just an array with one object. Also, you don’t need the html variable and can just assign the first element’s value’s directly to quote with:

   $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
      function(json) {
        quote = json[0].content + " -said by: " + json[0].title; // json[0] is the single object in the array
        $("#quoteHere").html(quote); 
   }); // END json function

You are probably wondering why you only get the same quote, no matter how many times you click the button. That is because the API you are using defaults to cache the last quote. You must tell the API not to cache the response, by putting the following code above your getQuote click event:

$.ajaxSetup({cache:false});

EXTRA NOTE: I noticed you are using JQuery for the twitter button event and vanilla JavaScript for the facebook button. I would suggest picking one method and sticking with it. Since you are already using the JQuery library, I would go with it for now.

If you have any questions about what I have described here or have any new questions, let me know.


#3

Thank you Randell. This was really instructive: global scope, accessing objects & properties in a JSON array from an API call; and vanilla JS vs jQuery. The fog is a little less dense with the completion of each challenge.

I have made changes to my pen: