Random Quotes

index.html

      <div class="navbar navbar-inverse navbar-static-top" id="mynavbar">
        <div class="container">
          <div class="navbar-header"> 
              <a class="navbar-brand"><b>Random Quotes</b></a>
          </div>
       </div>
       </div>

   <div class="container"> <!--Body Container -->
    <section>
     <div class="jumbotron">
      <div class="container">
      <button class="btn btn-primary" id="qb">New Random Quote</button><br/><br/><br/>
      <div id="quotes"></div>
      </div>
     </div>    
    </section> 

    <section>
    <div class="navbar navbar-inverse navbar-fixed-bottom" id="mynavbar">
    	<div class="row">
    	  <div class="container">
    	  <div class="col-xs-6"><h4>
	    	  <a href="http://freecodecamp.com" class="footer">Free Code Camp</a> &nbsp; &nbsp;
	    	  <a href="http://quotesondesign.com" class="footer">Quotes Ondesign</a></h4></div>
    	  <div class="col-xs-6 text-right"><h5 class="footer">Developed by Adebguyi Ademola Oluwamayowa {marhyorh}</h5></div>
    	  </div>
    	</div>
    </div>
    </section>
   </div> <!--Body Container End-->

script.js

  var stripPara = function(str){
    str = str.replace("<p>","");
    str = str.replace("</p>","");
    return str;
  }


    $.ajax({
  url:'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]'+Math.random(),
  success:function(data){
  	var x=data.shift();
    var content = stripPara(x.content);
    $('#quotes').text(content);
    $('#quotes').html("<div class='container'><blockquote>"+x.content+"<br/> B- "+x.title+"<br/><br/><button class='btn btn-tweet'><a href='https://twitter.com/intent/tweet?text="+content+" #marhyorh' target='_blank'>Share this on Twitter</a></button></blockquote></div>");
  }
   });

  $('#qb').on("click",function(){

  $('#quotes').html("Please wait while it loads ....");

  $.ajax({
  url:'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]'+Math.random(),
  success:function(data){
  	var x=data.shift();
  var content = stripPara(x.content);
    $('#quotes').text(content);
    $('#quotes').html("<div class='container'><blockquote>"+x.content+"<br/> B- "+x.title+"<br/><br/><button class='btn btn-tweet'><a href='https://twitter.com/intent/tweet?text="+content+" #marhyorh' target='_blank'>Share this on Twitter</a></button></blockquote></div>");
  }
   });
  });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

.navbar-inverse{
	background-color: #111;
}
.navbar-inverse .navbar-brand {
	color: #fff;
	cursor: pointer;
}
.btn-tweet, .btn-tweet:hover{
	background-color: #55acee;
	color: #fff;
}
.btn-tweet a{
	color: #fff;
}
.footer, .footer:hover{
	color: #fff;
	opacity: 0.5;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

waQVBx.markdown

waQVBx

A Pen by Adegbuyi Ademola Oluwamayowa on CodePen.

License.