Quote Generator

Tutorials of (Quote generator) by Phillip kelley-dotson

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Quote Generator</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class = "container-fluid">
 <div class="row">
  <div class = "quote-box">
     
    <div id = "quote-content"> </div>
     <div id="quote-title">
       "Quote goes here"
     
      </div>
   <div class = "btn btn-primary get-new-text">Next Quote</div>
     <a class="fa fa-twitter with-border" aria-hidden="true" target="_blank"
       href="https://twitter.com/intent/tweet">
      </a>
  </div>
   <p id ="footer"> Created By Felipe Studios.<p>
 </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://use.fontawesome.com/82568a200b.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background-color: #E0E0E0;
}
.quote-box {
  padding: 50px;
  border: 10px solid white;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  margin-top: 100px;
  margin-right:  50px;
  margin-left: 50px;
  margin-bottom: 50px;
  background-color: green;
  font-size: 25px;
  color: white;
  border-radius: 25px;
  
}

.with-border{
  border: 1px solid lightblue;
  background-color: lightgreen;
  padding: 7px;
  border-radius: 50px;
}
#footer{
  text-align: center;
}
.fa{
  float: right;
}
/* Downloaded from https://www.codeseek.co/ */
var colorBox = ["#FFE6CC","#FFCCC","#CCE6FF","#FF66E6", "#7F66FF","#2970FF","#28908F" ]

$(".get-new-text").on('click', function (e) {
    var colorIndex = Math.floor((Math.random() * 7) + 0);
    e.preventDefault();
    $.ajax( { 
      url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
      success: function(data) {
        var post = data.shift();
        var content = $(post.content).text();// The data is an array of posts. Grab the first one.
        
        $('#quote-content').html(content);
        $('#quote-title').html("-"+post.title);
        $('.quote-box').css("background-color", colorBox[colorIndex]);
        $(".fa-twitter").attr("href", 'https://twitter.com/intent/tweet?text=' + '"'+content+'"' +"  -"+post.title);
        console.log(colorBox[colorIndex])
        console.log($(post.content))
        

        // If the Source is available, use it. Otherwise hide it.
        if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
          $('#quote-source').html('Source:' + post.custom_meta.Source);
        } else {
          $('#quote-source').text('');
        }
      },
      cache: false
    });
});

twttr.widgets.createTweet(
  '20',
  document.getElementById('container'),
  {
    theme: 'dark'
  }
);

This awesome code ( Quote Generator ) is write by Phillip Kelley-Dotson, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Phillip Kelley-Dotson