I just finished my Random Quote Machine. Please give me some Feedback!

I just finished my Random Quote Machine. Please give me some Feedback!
0

#1

Hi campers, this is my random quote machine. Please give me some feedback! Thanks!! :sunglasses:
Project Link - https://codepen.io/JoSaGuDu/pen/wPbdWd


#2

My suggestion is since the API response is always the same JSON object, I would have the API pull the quotes only one time and store them in an array to be used by the rest of your app when needed, instead of making a call to the API each time you want a quote.

$(document).ready(function() {
  var quoteContainer = $("#quoteContainer");
  var citeContainer = $("#citeContainer");
  var quotes = $("#quotes");
  var mainContent = $("#mainContent");
  quotes.css({ opacity: 0 });
  mainContent.css({ opacity: 0 });
 
  var quotesFile ='https://cors-anywhere.herokuapp.com/http://res.cloudinary.com/jsgdcloudiary/raw/upload/v1512580462/quotes_smwxuy.json'
  $.getJSON(quotesFile, function(json) {
    //json file made by @nasrulhazim - https://gist.github.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80
    var quotesArr = json.quotes;

    $("#getQuote").on("click", function(e){
      quotes.css({ opacity: 0 });
      mainContent.css({ opacity: 0 });
      
      var max = quotesArr.length;
      var quoteIndex = Math.floor(Math.random() * (max + 1));
      var quote = quotesArr[quoteIndex].quote;
      var author = quotesArr[quoteIndex].author;
      var htmlQuote = "<p>\"" + quote + "\"</p>";
      var htmlCite = "<cite>-" + author + "</cite>";
      var linkTwitter = 'https://twitter.com/intent/tweet?text=';
      linkTwitter +='"' + encodeURIComponent(quote) + '"%20By%20' + encodeURIComponent(author);
      var linkTumbler = 'http://tumblr.com/widgets/share/tool?posttype=quote?tags=quote,quoteoftheday?';
      linkTumbler += 'title=Quote%20by%20'+ encodeURIComponent(author) + '?content=' + encodeURIComponent(quote); 
      linkTumbler += '?caption=' + escape(author) + '.?&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button';
      quoteContainer.html(htmlQuote);
      citeContainer.html(htmlCite);
      $("#linkTwitter").attr("href", linkTwitter);
      $("#linkTumbler").attr("href", linkTumbler);
      
      $("#getQuote").html("Get another quote");
      quotes.animate(
      {
        opacity: 1,
        left: "+=50",
        height: "100%"
      }, 1500, function() {
        // Animation complete.
      });
      
      mainContent.animate(
      { opacity: 1 }, 1200, function() {
        // Animation complete.
      });
      
    });
  });
});

#3

@RandellDawson thanks for take the time to review my project. That totally makes sense! I will do it.
Thanks again.


#4

Good variable names, nice neat code


#5

Thanks, @Klequis! :+1:t3: