<body>
  <div class = "container">
    <div class = "row">
      <div class = "col-md-12">
        <h1>Random Quote Machine</h1>
        <h3>Get one now!!!</h3>
        <hr>
      </div>
    </div>
    <div class = "row">
      <div class = "col-md-8 col-md-offset-2">
        <div class = "quote-box">
          <p id = "quote"></p>
          <p id = "author"></p>          
        </div>
        <ul class = "list-inline">
          <li><a href="#" class="btn btn-default btn-lg get-quote"><i class="fa fa-quote-left fa-fw"></i>Get Quote!</a></li>
          <li><a href="#" class="btn btn-default btn-lg share-quote"><i class="fa fa-twitter fa-fw"></i>Share Quote!</a></li>
        </ul>
    </div>
  </div>
</body>
body {
 /*background-image: url(http://i792.photobucket.com/albums/yy202/dainty-ish/patterns/jtvqz8.gif);
  background-repeat: repeat; */
background: #353334;  
}

body,
h1,
h3,
p {
  font-family: Helvetica, Arial, sans-serif;
  color: #e9e3e6;
}

.container{
  text-align: center;
  padding-top: 50px;
}

hr{
  width: 600px;
  border: 1px solid black;
}

.quote-box{
  border: 1px dashed black;
  border-radius:15px;
  padding: 10px;
  margin-bottom: 15px;
}

  
$(document).ready(function () {

    var quote;
    var author;

    function getNewQuote() {
        $.ajax({
            url: "http://api.forismatic.com/api/1.0/",
            jsonp: "jsonp",
            dataType: "jsonp",
            data: {
                method: "getQuote",
                lang: "en",
                format: "jsonp"
            },
            //or just add an url - url: "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en",
            success: function (response) {
                quote = response.quoteText;
                author = response.quoteAuthor;
                $("#quote").text(quote);
                if (author) {
                    $("#author").text("said by " + author);
                } else {
                    $("#author").text("-unknown");
                }
            }

        });
    }
    getNewQuote();

    $('.get-quote').on('click', function (event) {
        event.preventDefault();
        getNewQuote();
    });

    $(".share-quote").on("click", function (event) {
        event.preventDefault();
        window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(quote + "--" + author));
    });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

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