Random Quote Generator

index.html

<h1 class= "title-font"> Random Quote Generator 
</h1>
 <div class="quote-box">
   <div class="quote-text theQuote" id=quoteText>Life is like a box of  chocolates
   </div>
   <div class="quote-author" id=quoteAuthor>
   </div>
  <div class="container-fluid">
  <div class = "buttons">
    <div class="row">
      <div class="col-xs-4">
        <button class="button" id="tweetIt"><i class="fa fa-twitter" ></i></buton>
      </div>
      <div class="col-xs-4">
        <button id="getQuote" class="new-quote-button">New Quote</button>
    </div>
   </div>
</div>


  

random-quote-generator.markdown

Random Quote Generator

A Pen by Spencer on CodePen.

License.

script.js

$(function(){
  var quote = $("#quoteText");
  var author = $("#quoteAuthor");
  getQuote(quote, author);
  
  $('#getQuote').click(function(event){
    event.preventDefault();
    getQuote(quote, author);
  })
});

var tweet = '';
$('#tweetIt').click(function(event){
    event.preventDefault();
    if (tweet.length > 140){
      alert("Too long!")
    }else{
      var link = "https://twitter.com/intent/tweet?text=" + tweet;
      window.open(link, '_blank');
    }
})


function getQuote(quote, author){
  var url = "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?"
  
  $.getJSON(url, function(data){
    quote.html(data.quoteText);
    author.html(data.quoteAuthor);
    tweet = data.quoteText + " -" + data.quoteAuthor;
  })
}

scripts

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

style.css

@import url('https://fonts.googleapis.com/css?family=Dosis|Inconsolata');

body{
  background-color:#3D9970
}

.title-font{
  font-family: 'Dosis', sans-serif;
  text-align: center
}

.quote-box{
  width: 550px;
  background-color: #ffffff;
  padding: 10px;
  margin: auto;
  margin-top: 75px;
}
.quote-text{
  font-family: 'Inconsolata', monospace;
  text-align: center;
}

.quote-author{
  font-family: 'Inconsolata', monospace;
  margin: auto;
  text-align:right;
  font-style: italic;
}

.buttons{
  width: 550px;
  margin: auto;
}
.button{
  margin:5px;
  margin-left: 10px;
  width: 50px;
  height: 30px;
  padding: 5px;
  background-color: #39CCCC;
}

.new-quote-button{
  margin: 5px;
  padding: 5px;
  width:auto;
  height:30px;
  margin-left: 375px;
  background-color: #39CCCC;
  font-family: Inconsolata;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />