<body  style="margin: 0px auto;" class="card blue-grey darken-2">
   <div class="container">
        <div class="card-content white-text">
          <span class="card-title">Quote of the day,</span>
          <div id="qod">Nothing here</div>
        </div>
        <div class="card-action">
          <a class="btn" id="refresh">Refresh</a>
          <a class="btn" id="tweet" style="display: none">Tweet</a>
        </div>
        <div class="container">
				<p class="center-align grey-text text-darken-5">
          All quotes are fetched from QuotesOnDesign through their REST API. <a href="https://github.com/sh4hidkh4n/QuotesOfTheDay-in-electron">View source code on Github</a></p>
		</div>
     </div>
    </body>
#big{
  font-size: 3em;
}
$(function() {
    var tweetBtn = $("#tweet")
    var qod = $("#qod")
    var tweetable = false
    $.ajaxSetup({ cache: false });
    function setWaitSpinner() {
    	qod.html("Fetching ..<div class=\"progress\"><div class=\"indeterminate\"></div></div>")
    }
    setWaitSpinner()
    var refreshBtn = $("#refresh")
    refreshBtn.on("click", refresh)
    var qUrl = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1"
    function refresh() {
    	setWaitSpinner()
    	$.get(qUrl, function(data, status) {
    		console.log(data, status)
    		qod.html(data[0]["content"] + " <i>By: " + data[0]["title"]+"</i>")
        if($(data[0]["content"]).text().length < 140){
          tweetBtn.show()
          tweetable = true
          tweetText = $(data[0]["content"]).text()
        }else{
          //refresh()
        }
    	});	
    }
    refresh()
    tweetBtn.on('click',tweet)
    function tweet(){
      if(tweetable){
      tweetText += " @sh4hidkh4n";  window.open("https://twitter.com/intent/tweet?text=" + tweetText)
      }
    }
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js