Quote Machine

index.html

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="quote message">
        Quotes are boring.
      </div>
      <div class="row" id="Middle">
        <div class="col">
          <div class="Social">
            <a id="tw-share" href="https://twitter.com/intent/tweet?text=QuotesAreStupid" class="social-icon" target="_blank"> <i class="fa fa-twitter"></i></a>

          </div>
        </div>
        <div class="col">
          <div class="author">- Duarte OC.</div>
        </div>
      </div>
      <div class="button-wrapper">
        <button id="getMessage" class="btn btn-primary">
        Get Quote
      </button>
      </div>
    </div>
    <div id="credits">by Duarte OC</div>
  </div>
</div>

<!--<button type="button" class="btn btn-tw"><i class="fa fa-twitter pr-1"></i> Twitter</button>-->

quote-machine.markdown

Quote Machine

A Pen by Duarte Carmo on CodePen.

License.

script.js

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    var url =
      "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=";

    url = url + new Date().getTime();

    $.getJSON(url, function(json) {
      var content = "";
      var title = "- ";
      content += json[0]["content"];
      title += json[0]["title"];

      var color1 = getRandomColor();
      var color2 = getRandomColor();
      var gradient = "-moz-linear-gradient(" + color1 + ", " + color2 + ")";

      var shareText =
        "http://twitter.com/share?text=" +
        encodeURIComponent($(content).text()) +
        "by" +
        title +
        "&hashtags=QuotesByDOC";

      $(".message").html(content);
      $(".author").html(title);
      //$(".outer").css("background-color", getRandomColor())
      $(".outer").css("background", gradient);
      $("#tw-share").attr("href", shareText);
    });
  });
});

scripts

<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=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);


.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(#000000, #000000);
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  background-color: white;
  padding: 30px 30px 30px 30px;
  border-radius: 5px;
}

#see_border {
  border: 1px solid black;
}

.quote {
  text-align: center;
  font-size: 100%;
  font-family: "Roboto Mono", monospace;
}

.author {
  text-align: center;
  font-size: 80%;
  font-family: "Roboto Mono", monospace;
}

.button-wrapper {
  text-align: center;
  font-family: "Roboto Mono", monospace;
}
#getMessage {
  font-size: 75%;
}

#Middle {
  margin-top: 15px;
  margin-bottom: 15px;
}

.btn-primary {
  background-color: black;
  border: 0px solid black;
}

.btn-primary:hover {
  background-color: black;
  border: 0px solid black;
}

.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #1da1f2;
  border-radius: 5px;
}
.fa-twitter:hover {
    background-color: #1da1f2;
  color: #e1e8ed; 
}
  
 .social-icon {
    color: #fff;
    
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}

#credits {
  text-align: center;
  color: white;
  font-family: "Roboto Mono", monospace;
  font-size: 70%;
  padding-top: 200px
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />