Quote Generator

In this example below you will see how to do a Quote Generator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by pkdotson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pkdotson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/pkdotson/quote-generator-aBaPxx */
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/pkdotson/quote-generator-aBaPxx */
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'
  }
);

Comments