(34)Build a Random Quote Machine

34D #100DaysOfCode

HTML

<div class="container">
  <div class="transbox">
    
   <p class="quote" id="response">Programming is usually taught by examples.
~Niklaus Wirth</p>
    
    <button id="getTweet" class=" btn-custom"> <i class="fa fa-twitter"></i> Tweet This</button>
   <button id="getMessage" class="btn-custom pull-right">New Quote</button>
  </div>
  <div class="footer hline text-center">
    <p> Built by Yaroslav Kolesnikov.</p>
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Tangerine:400,500);



body {
  background-image: url(http://www.wallpapers13.com/wp-content/uploads/2016/04/New-Zealand-view-from-the-hill-sea-empty-beach-ocean-waves-HD-Wallpapers-for-Desktop-1920x1080.jpg);
  background-repeat: no repeat;
}

.quote {
  padding-top: 50px;
  font-family:Tangerine,serif;
  font-size: 52px;
  font-weight: bold;
  color: #003333;
  line-height: 40px;
  text-align: center;
}

.btn-custom {
  margin-top: 5%;
  padding: 15px;
  background: #006666;
  color: white;
  font-weight: bold;
  border: #003333;
  border-radius: 5px;
}

.btn-custom:active {
  background: #003333;
}

.btn-custom:hover {
  background: #003333;
}

.transbox {
  margin: 10%;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #003333;
  border-radius:5px;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.hline {
  width: 100%;
  height: 1px;
  background: #003333;
  margin-top: 20%;
  margin-bottom: 15px;
  font-weight: bold;
  color: #003333;
   
}

JS

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", function(data) {
      if(data.quoteAuthor == "") {
        data.quoteAuthor = "Anonymous";
      }
      $("#response").html( data.quoteText + "
" + "~" + data.quoteAuthor);

    });
});

  $("#getTweet").on("click", function() {

    window.open("https://twitter.com/intent/tweet?text=" + $("#response").text());
  });

});
  
  

See the Pen Build a Random Quote Machine(1) by YaroslavW (@YaroslavW) on CodePen.

I prefer second version of solutions

See the Pen Build a Random Quote Machine(2) by YaroslavW (@YaroslavW) on CodePen.