<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

  <div class="main-container">
    <header>
      <h1 class="site-title">Random Quote Machine</h1>
      <p class="site-description">Welcome! Enjoy these cool random quotes below - using the <a href="https://forismatic.com/en/api/" target="_blank">Forismatic API</a>.</p>
    </header>
    <section class="quote-container my-box-shadow my-transition">
      <p class="quote-content">
        <i class="fa fa-quote-left" id="quote-symbol"></i>
        <span id="quote-text">Always be yourself, express yourself, have faith in yourself, do not go out and look for a successful personality and duplicate it.</span>
      </p>
      <p class="quote-author">
        <span id="quote-name">-- Bruce Lee</span>
      </p>
    </section>
    <section class="btn-wrapper">
      <span class="main-text">Share: </span>
      <a href="javascript:void(0);" target="_blank" class="my-box-shadow my-btn btn-share" id="share-twitter"><i class="fa fa-twitter"></i></a>
      <a href="javascript:void(0);" target="_blank" class="my-box-shadow my-btn btn-share" id="share-tumblr"><i class="fa fa-tumblr"></i></a>
      <div class="my-btn btn-newquote my-box-shadow my-transition">
        <span>New quote</span>
      </div>
    </section>
  </div>
  <section class="fb-comment-wrapper">
    <!-- Comment section -->
    <div class="fb-comments" data-href="https://codepen.io/completejavascript/full/xWZyRy" data-width="380" data-numposts="5" data-mobile="true"></div>
  </section>

  <!-- Footer -->
  <footer>
    <p>
      Copyright &copy; 2018 by
      <a href="http://about.phamvanlam.com/" target="_blank">Lam Pham</a>. All Rights Reserved.
    </p>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="./js/main.js"></script>
* {box-sizing: border-box;}
body {
  margin: 0;
  color: #222;
  font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
h1{
  line-height: 1.2;
  font-weight: 700;
  font-size: 1.75rem;
}
a {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
header {text-align: center;}
header a {color: rgba(255, 255, 255, 0.85);}
header a:hover {color: rgb(255, 255, 255);}
.my-transition {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.my-box-shadow{
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main-container {
  width: 100%;
  padding: 50px 15px 25px;
  background-color: #0392cf;
  margin-bottom: 35px;
}
.main-text{color:#fff;}
.site-title {
  color: #fff;
  margin-bottom: 10px;
}
.site-description {
  font-size: 0.9rem;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.85);
}
.quote-container {
  border-radius: 4px;
  padding: 10px;
  margin-top: 50px;
  background-color: #fff;  
}
.quote-container:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
}
.quote-content {
  text-align: justify;
  font-weight: 550;
}
#quote-left {
  font-size: 1.0rem;
  display: inline-block;
}
.quote-author {
  text-align: right;
  margin: 2px;
}
.btn-wrapper {margin: 20px 0px 15px;}
.my-btn {
  text-align: center;
  display: inline-block;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  padding: 5px;
}
.btn-wrapper .btn-share {
  width: 40px;
  color: #222;
  margin: 0.1rem;
}
.btn-wrapper .btn-share:hover {background-color: #fdf498;}
.btn-newquote {float: right;}
.btn-newquote span{
  width: 100px;
  font-weight: 550;
}
.btn-newquote:hover{background-color: #fdf498;}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2px;
  text-align: center;
  font-size: 0.8rem;
  color: #fff;
  background-color: #0b1420;
  width: 100%;
}
footer a {color: #0392cf;}
footer a:hover {color: #0481b6;}
.fb-comments {text-align: center;}
.fb-comment-wrapper {
  padding: 15px;
  margin-bottom: 50px;
}
@media (min-width: 576px) {
  h1 {font-size: 2.2rem;}
  .site-description {font-size: 1.1rem;}
  .main-container{padding-top: 30px;}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  h1 {font-size: 3.2rem;}
  .main-container{padding: 30px 60px;}
  .fb-comment-wrapper{padding: 50px;}
  .site-description {font-size: 1.1rem;}
  .quote-content{font-size: 1.5rem;}
  .quote-container {
    margin-bottom: 30px;
    padding: 20px 25px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .fb-comment-wrapper{
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    width: 400px;
    padding: 15px;
  }
  .fb-comments{
    height: 100%;
    width: 100%;
  }
  .main-container, footer{width: calc(100% - 400px);}
  .main-container{
    padding: 30px 60px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .main-container{padding: 30px 160px;}
  .quote-container{ margin-top: 80px;}
}
$(document).ready(function(){
  let requestURL = 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?';

  updateShares();
  requestRandomQoute();

  $(".btn-newquote").click(function(){
    requestRandomQoute();
  });

  function updateShares(qoute, author) {
    let currentQuote = qoute || $("#quote-text").text();
    let currentAuthor = author || $("#quote-name").text();

    let twitterShareURL = 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + 
                            encodeURIComponent('"' + currentQuote + '" ' + currentAuthor);
    $("#share-twitter").attr("href", twitterShareURL);

    let tumblrShareURL = 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=' + 
                            encodeURIComponent(currentAuthor) + '&content=' + 
                            encodeURIComponent(currentQuote) + 
                            '&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button';
    $("#share-tumblr").attr("href", tumblrShareURL);
  }

  function requestRandomQoute() {
    $.getJSON(requestURL, function(data) {
      animateText("#quote-text", data.quoteText);
      animateText("#quote-name", '-- ' + data.quoteAuthor);
      animateText("#quote-symbol");
      updateShares(data.quoteText, data.quoteAuthor);
    });
  }

  function animateText(element, content) {
    $(element).animate({opacity: 0}, 500, function() {
      $(this).animate({opacity: 1}, 500);
      if(content) $(this).text(content);
    });
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js