Quoter

index.html

		<div class= "container">
			<div class="Quote-Box">
				<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
				<h1><br><b>Quote Machine</b></h1>
				<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">
				<h3><b>RANDOM QUOTE GENERATOR!</b></h3><br>
				<div class="panel panel-default text-center">
					<div class="panel-body">
            <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
					  <p id="quote" class="quoteDesign"></p>
            <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
						<p id="author" class="authorDesign"></p>
					</div>
				</div>
				<div class="row">
					<div class="tweet">
						<div class="col-md-6">
				      <button class="btn btn-block btn-info"><i class="fa fa-twitter fa-2x"></i></button>
				    </div>
			    </div>
			    <div class="next">
				    <div class="col-md-6">
				    	<button class="btn btn-block btn-success"><i class="fa fa-chevron-right fa-2x"></i></button>
				    </div>
			    </div>
			  </div>
			  <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
			  <h5><br><b> . . . Mohammed Saifuddin . . . </b></h5>		
			</div>
		</div>

quoter.markdown

Quoter

A Pen by Mohammed Saifuddin on CodePen.

License.

script.js

$(document).ready(function() {
  var quoteQuote;
  var authorAuthor;
  function FetchNewQuote() {
    $.ajax( {
      url: "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?",
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp'
      },
      success: function(response) {
        quoteQuote = response.quoteText;
        authorAuthor = response.quoteAuthor;
        $('#quote').text(' " ' + quoteQuote + ' " ');
        if (author) {
          $('#author').text("-" + authorAuthor);
        } else {
          $('#author').text("-anonymous");
        }
      }
    });   
  }
  FetchNewQuote();
  $('.btn-success').click(function(event) {
    event.preventDefault();
    FetchNewQuote();
  })
  $('.btn-info').click(function(event) {
    event.preventDefault();
    window.open('https://twitter.com/intent/tweet?text=' +  encodeURIComponent(quoteQuote + ' -' + authorAuthor));
  });
});

scripts

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

style.css

body {
	background-color: orange;
}
h1 {
	font-family: 'Cinzel', serif;
	text-align: center;
	font-size: 50px;
}
h3 {
	font-family: 'Macondo', cursive;
	text-align: center;
}
.panel {
  background-color:BlanchedAlmond !important; 
  margin-left: 100px;
  margin-right: 100px;
}
.row {
  margin-left: 300px;
  margin-right: 300px;
}
h5 {
	font-family: 'Bad Script', cursive;
	text-align: center;
	font-size: 25px;
	color: black;
}
.quoteDesign {
  font-family: 'Philosopher', sans-serif;
  font-size: 30px;
}
.authorDesign {
  font-family: 'Courgette', cursive;
  font-size: 25px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Finally worked. Delighted!