Quote Generator

index.html

<link href="https://fonts.googleapis.com/css?family=Chicle|Kaushan+Script" rel="stylesheet">
<div class="container">
  <div class='row'>
    <div class='col-md-2 col-lg-3 col-sm-1'></div>
    <div class='col-md-8 col-lg-6 col-sm-10 col-xs-12'>
      <div class="card message">
        <h1 class="text-center">Random Quote Generator</h1>
        <div>
          <i class="fa fa-quote-left" id='left'></i>
          <h4 class='quoteMessage text-center'>Be a Programmer, It's the Best thing Ever</h4>
          <h4 id='author'>Daniel Show
            <h4/>
            <div id="but">
              <button id="twitter" class='btn fa fa-twitter'>Share</button>
              <button id="getQuote" class="btn btn-default">
      New Quote
    </button>

            </div>
        </div>

      </div>
    </div>
    <div class='col-md-2 col-lg-3 col-sm-1'></div>

  </div>
  <footer id='footer' class='text-center'>By <a href="https://codepen.io/Daniel_show/" target='-blank'>DanielShow</a></footer>
</div>

quote-generator.markdown

Quote Generator

A Pen by Daniel on CodePen.

License.

script.js

var mycolors = [
  "#FFC0CB",
  "#FFB5C5",
  "#EEA9B8",
  "#B0171F",
  "#EE00EE",
  "#9932CC",
  "#6A5ACD",
  "#6C7B8B",
  "#00F5FF",
  "#2F4F4F",
  "#00EE76",
  "#C0FF3E",
  "#FFFF00",
  "#EEE8AA",
  "#FFB90F",
  "#8B8878",
  "#FF7256",
  "#F08080",
  "#EE0000"
];
$(document).ready(function() {
  $("#getQuote").on("click", getQuotes);
  $("#twitter").on("click", function() {
    window.open(
      "https://twitter.com/intent/tweet?text='Be a Programmer, It's the Best thing Ever - Daniel Show'",
      "popUpWindow",
      "height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no"
    );
    return false;
  });
});

var getQuotes = function() {
  $.ajax({
    type: "POST",
    url: "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=",
    headers: {
      "X-Mashape-Key": "IemeiATNuemsha3GwAZSIp930XCop1yPz1Mjsnz2RNd7x2qKI1"
    },
    success: function(data) {
      if (typeof data === "string") {
        data = JSON.parse(data);
      }
      currentQuote = data.quote;
      currentAuthor = data.author;
      $("body").addClass("animated", "bounce");
      $(".quoteMessage").html(currentQuote);
      $("#author").html(currentAuthor);
      var color = Math.floor(Math.random() * mycolors.length);
      $("body").css("background-color", mycolors[color]);
      $("#getQuote").css("background-color", mycolors[color]);
      $("#twitter").css("background-color", mycolors[color]);

      $("#twitter").on("click", function() {
        window.open(
          "https://twitter.com/intent/tweet?text=" +
            currentQuote +
            "- " +
            currentAuthor,
          "popUpWindow",
          "height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no"
        );
        return false;
      });
    }
  });
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Kreon|Vidaloka');
body{
  background-color: red;
}

h1{
  font-family: chicle;
}

.quoteMessage{
  margin-left: 40px;
  font-family: 'Kreon', serif;
}
#author{
  float: right;
  font-family: 'Vidaloka', serif;
}
#left{
  font-size: 40px;
  float: left;
}
#getQuote{
  clear: both;
  color: white;
  background-color: blue;
  font-family: kreon;
}
#footer a{
  color: white;
  font-family: kreon;
}
#footer{
  color: white;
}
#but{
  margin-top: 70px;
}
#twitter{
  border: 1px solid;
  text-align: center;
  background-color:#1DA1F2;
  color: white;
}
.message{
  margin-top: 80px;
  padding: 30px;
  border-radius: 2%;
}

styles

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