JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<div class = "container-fluid">
  <div class = "row"></div>
  <div class = "text-center quote-box">
    <h1 >Random Quote Generator</h1>
    <p class = "quote"> Click the button to get a random quote</p>
  </div>
  
  <div class = col-md-4 id = quote-button>
    <button class="btn btn-primary" type="submit" id = quote-button>New Quote</button>
    <button class="btn btn-primary" type="submit" id = quote-button><i class = "fa fa-twitter">Twitter</i></button>
  </div>
    
  </div>
</div>

JavaScript

$(".btn").on("click",function(){
  $.ajaxSetup({cache:false})
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=",function(data){
	console.log(data);
   $(".quote").html(data[0].content + "-" + data[0].title);
  });
});