JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="quote-title"></div>
<div id="quote-content"></div>
<button id='getAnotherQuote'>Grab Quote</button>

JavaScript

$(document ).ready(function () {
  var firstQuote,
  		firstQuoteTitle,
   		oldTitle;

	$.ajaxSetup({ cache: false });

//reach the API 
 function getQuote () {
 	 $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
   console.log(a);

	// check the information is not the same as before 
   oldTitle = firstQuoteTitle;

   // here I check if the divs have content, if so, I delete it
		if ($("#quote-content") !== 'undefined' && $("#quote-title") !== 'undefined'){
				$("#quote-content").empty();
  			$("#quote-title").empty();
		}
    
     // I will check for undefined content, if it is undefined then I call getQuote 
   	// so It will never show an empty space 
   	if (typeof a[0].content !== '' && typeof a[0].title !== '') {
          firstQuote = a[0].content;
    			firstQuoteTitle = a[0].title;
        }else {
     			getQuote();
   		}

    // I append the content to the html 
    $("#quote-content").append("<h4>" + firstQuote + "</h4>");
    $("#quote-title").append("<h6>" + firstQuoteTitle + "</h6>");
   }); 
   
   
 }
 
// on page load  
// I call get another quote 
	getQuote();

// if they do have a quote, I delete that quote and call another one 
// and display in it
	$("#getAnotherQuote").click(getQuote);
});