FCC - Build a quote

fcc-build-a-quote.markdown

FCC - Build a quote

A Pen by Kamal Iqlaas on CodePen.

License.

index.html

<div class="box">
  <div class="main">
    <div class="quot quot-top">“</div>
    <p></p>
    <i class="author"></i>
    <div class="quot quot-bottom">”</div>
    <div id="btnbox">
      <button class="btn btn-primary"><i class="glyphicon glyphicon-comment" aria-hidden="true"></i> Random quote</button>
      <a id="tweetlink" href="#" class="btn btn-info"><i class="glyphicon glyphicon-retweet" aria-hidden="true"></i> Tweet this quote</a>
    </div>
  </div>

script.js

var qurl = "https://api.forismatic.com/api/1.0/?format=jsonp&method=getQuote&jsonp=?&lang=en";
var turl = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
$("button").on("click", function() {
  getQuote();
});

function getQuote() {
  $.getJSON(qurl, function(response) {
    $("p").html(response.quoteText);
    $("i.author").html(response.quoteAuthor);
    $("#tweetlink").attr("href", 
      turl + response.quoteText + " ― " + response.quoteAuthor);
  }); 
}
getQuote();

scripts

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

style.css

.box {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}
.main {
  max-width: 700px;
  margin-left: 50px;
  margin-right: 50px;
  width: 100%;
  padding: 30px;
  font-size: 20px;
  position: relative;
}

.quot {
  font-size: 200px;
  position: absolute;
  z-index: -1;
  line-height: 100px;
  color: #ccc;
}
.quot-top {
  top: 0;
  left: 0;
}

.quot-bottom {
  top: 90%;
  right: 0;
}

#btnbox {
  margin-top: 50px;
  text-align: center;
}

i.author {
  text-align:right;
  display: block;
}

i.author::before {
  content: "― ";
}

styles

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