MyQuotes

index.html

<div class="container">
  
  <div class="row text-center text-center">
    <h2>Quotes</h2>
  </div>
  
  <!-- Quotes Div-->
  <div class="row text-center">
    <div class="col-md-12 well message">
      The Quotes come in here
    </div>
  </div>
  
  <!-- End of Quotes div-->
  
  
  <!-- Buttons Row beginning-->
  <div class="row tex-center">
    
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
      <button id="getQuotes" class="btn-default btn">Get Quotes</button>
      <a class="twitter-share-button" href="https://twitter.com/intent/tweet" data-size="large" target="_blank">
        <button id = "getMessage" type="button" class="btn-default btn ">Tweet it!</button></a>
    </div>
    <div class="col-md-4">
    </div>
    
  </div>
  
  <!-- Buttons Row End-->
</div>

<footer><p>Copyright © Ofor Chinedu Paul 2016. All Rights Reserved</p>
  <a href="https://web.facebook.com/ofor.b.chinedu" target="_blank"><p>Facebook: Ofor Chinedu</p></a>
  <a href="https://twitter.com/PastorzSon" target="_blank"><p>Twitter: pastorzson</p></a>
  <a href="https://www.instagram.com/oforchinedu/" target="_blank"><p>Instagram: oforchinedu</p></a>
</footer>

myquotes.markdown

MyQuotes

A Pen by Ofor Chinedu on CodePen.

License.

script.js

var pointer = 0;

$(document).ready(function() {
 
  
    $("#getQuotes").on("click", function(){
      //$(".message").html("here");
      
      //get Json
      $.getJSON("https://raw.githubusercontent.com/oforchinedu/quotes/master/quotes.json", function(json){
        
        var html = "Quote: " + json[pointer].quote + " " + " " + "Author: " + json[pointer].author;
        
        // check for length and display
        if(pointer < json.length){
          
          $(".message").html(html);
        pointer ++
        }
        else {
          $(".message").html("End of Quotes");
        }
        
        $("#getMessage").on("click", function(){
      
     // $(".message").html("testingffff");
          // create a variable to hold new link
          
      var quotes = 'https://twitter.com/intent/tweet?text=' + html;
           $(".twitter-share-button").attr("href", quotes);
        });
        
      })
      
    })
  
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

style.css

html {
  font-family: helvetica;
}

body {
  margin-top: 60px;
  background: url("http://38.media.tumblr.com/8ac7b2da5b9d98ff1e8c0e89f9013c84/tumblr_n2r7unz3FG1rwwmgao4_500.gif")no-repeat center center fixed;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
  width: 100%;
  height: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />