NqLJYe

index.html

<div class="text-center">
  
  <h1 class="text-primary">Raj's Random Quotes</h1>
<div class="header">
  <h3>Well not really my quotes but still insightfull. Click the button and get inspired!</h3>
  </div>
  <button id=btn class="btn">New Quote</buton>
</div>
<div>
  <div id=showdata></div>
  <h3 class="text-center">Current Quote</h3>
</div>
<div class="text-center">
  <a class="twitter-share-button" 
  href=" https://twitter.com/intent/tweet "data-size="large">
</a>
  <p>Tweet this!(you might sound smart)</p>
</div>                                 

NqLJYe.markdown

NqLJYe

A Pen by rajvansia on CodePen.

License.

script.js

$(document).ready(function(){
    //attach a jQuery live event to the button
    $('#btn').click( function(){ //alert("Hello");
        $.getJSON('http://api.theysaidso.com/qod.json', function(data) {
            alert(data); //uncomment this for debug
            alert (data.success.total+" "+data.success+" "+data.id); //further debug
            $('#showdata').html("<p>item1="+data.success.total+" item2="+data.contents.quotes.quote+" item3="+data.item3+"</p>");
        });
    });
});


/*$(document).ready(function(){
    $('#btn').click(function() {
        alert("Hello");
    });
});*/

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));
//$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

style.css

 .btn{
  //background: blue;
   width: 200px;
}
.header{
  background: #00AEEF;
  padding-top:20px;
  padding-bottom:0px;
  color:white;
  
}

styles

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