JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-push-2 well">
      <blockquote>
      <p id="quote">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      <footer><cite id="author">Mr. Annonymous</cite></footer>
       </blockquote>
       <button id="btn" type="button" class="btn btn-primary">Generate Quote</button>
      </div>
    </div>
  </div>
</body>

CSS

body{
  margin-top:50px;
  color:#E4F1FE;
}

.well{
  background-color:#555;
}
blockquote {
  border-color: #222 !important;
}

JavaScript

var button = document.getElementById("btn"),
    quote = document.getElementById("quote"),
    author = document.getElementById("author");
var request_data = {
	method:"getQuote",
    key: "12345",
    format:"json",
    lang: "en"
}
function showQuote() {
  /*var req = new XMLHttpRequest(),
      url = "http://api.forismatic.com/api/1.0/?method=getQuote&key=12345&format=json&lang=en";
  function reqReadyStateChange() {
    if(req.readyState === 4 && req.status === 200) {
      quote.innerHTML = req.responseText;
    }
  }
  
  req.open("GET",url);
  /*
  req.setRequestHeader("Origin","http://s.codepen.io/");
  req.setRequestHeader("Access-Control-Allow-Origin","http://s.codepen.io/");
  req.setRequestHeader('Content-type', 'application/xml');
  req.onreadystatechange = reqReadyStateChange;
  req.send();
  */

  var request = $.ajax({
            url: "https://www.careified.com/devcareified/wp-json/posts",
            type: "POST",
            data: request_data,
    	    headers: { 
     			 "Accept" : "*/*"
  			  },
            dataType: "JSON"
        });
        request.done(function(quote) {
            console.info(quote);
            ;
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });*/
}

button.addEventListener("click", showQuote);