Random Quote Generator

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

Thumbnail
This awesome code was written by ashoksuthar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ashoksuthar ©
  • HTML
  • CSS
  • JavaScript
    <div class="quote-box">
  <div class="quote-text">
    <i class="fa fa-quote-left"> </i><span class ="color-change" id="text"> </span>
    <i class="fa fa-quote-right"> </i>
  </div>
  <div class="quote-author">
    - <span class="color-change" id="author"> </span>
  </div>
  <div class="buttons">
    <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
      <i class="fa fa-twitter"></i>
    </a>
     <a class="button" id="fb-quote" title="Post this quote on facebook!" target="_blank">
      <i class="fa fa-facebook"></i>
    </a>
    <button class="button" id="new-quote">
      <i class="fa fa-refresh" aria-hidden="true"></i> New quote</button>
  </div>
</div>
<div class="footer"> by <a href="https://codepen.io/ashoksuthar">Ashok</a></div>

/*Downloaded from https://www.codeseek.co/ashoksuthar/random-quote-generator-oLKYRP */
    
* {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}

div {
  position: relative;
  z-index: 2;
}

body {
  background-color: #333;
  color: #333;
  font-family: 'Righteous', sans-serif;
  font-weight: 400;
}

.footer {
  width: 450px;
  text-align: center;
  display: block;
  margin: 15px auto 30px auto;
  font-size: 0.8em;
  color: #fff;
}
.footer a {
  font-weight: 500;
  text-decoration: none;
  color: #fff;
}

.quote-box {
  border-radius: 9px;
  position: relative;
  margin: 8% auto auto auto;
  width: 450px;
  padding: 40px 50px;
  display: table;
  background-color: #fff;
}
.quote-box .quote-text {
  text-align: center;
  width: 450px;
  height: auto;
  clear: both;
  font-weight: 500;
  font-size: 1.75em;
}
.quote-box .quote-text i {
  font-size: 1.0em;
  margin-right: 0.4em;
}
.quote-box .quote-author {
  width: 450px;
  height: auto;
  clear: both;
  padding-top: 20px;
  font-size: 1em;
  text-align: right;
}
.quote-box .buttons {
  width: 450px;
  margin: auto;
  display: block;
}
.quote-box .buttons .button {
  height: 38px;
  border: none;
  border-radius: 3px;
  color: #fff;
  background-color: #333;
  outline: none;
  font-size: 0.85em;
  padding: 8px 18px 6px 18px;
  margin-top: 30px;
  opacity: 1;
  cursor: pointer;
}
.quote-box .buttons .button:hover {
  opacity: 0.8;
}
.quote-box .buttons .button#tweet-quote, .quote-box .buttons .button#fb-quote {
  float: left;
  padding: 0px;
  padding-top: 8px;
  text-align: center;
  font-size: 1.2em;
  margin-right: 5px;
  height: 30px;
  width: 40px;
}
.quote-box .buttons .button#new-quote {
  float: right;
}


/*Downloaded from https://www.codeseek.co/ashoksuthar/random-quote-generator-oLKYRP */
    $(document).ready(function() {
  //Loading first Random Quote
  var currentQuote="";
  var currentAuthor="";
 $.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?", function(json) {
 $("#text").html(json.quoteText);
        $("#author").html(json.quoteAuthor);
   currentQuote = json.quoteText;
        currentAuthor = json.quoteAuthor;
   $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&text='+currentQuote+" -"+currentAuthor);
   
$('#fb-quote').attr('href', 'https://www.facebook.com/sharer.php?u=https://codepen.io/ashoksuthar/full/oLKYRP/');
      });
  //Loading first random color combination rgb value up to 240 so that no white combination occures
  $(".color-change").css("color", function(i){
var r=Math.floor((Math.random() * 240) + 1);

var g=Math.floor((Math.random() * 240) + 1);

var b=Math.floor((Math.random() * 240) + 1);
c = "rgb("+r+","+g+","+b+")";

        return c;
        });
  
  //Tweet link attribute
  
  //New Quote button click
    $("#new-quote").on("click", function() {
       $(".color-change").css("color", function(i){
var r=Math.floor((Math.random() * 240) + 1);

var g=Math.floor((Math.random() * 240) + 1);

var b=Math.floor((Math.random() * 240) + 1);
c = "rgb("+r+","+g+","+b+")";

        return c;
        });
                                                        
      $.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?", function(json) {
        currentQuote = json.quoteText;
        currentAuthor = json.quoteAuthor;
        $("#text").html(json.quoteText);
        $("#author").html(json.quoteAuthor);
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&text='+currentQuote+" -"+currentAuthor);
        $('#fb-quote').attr('href', 'https://www.facebook.com/sharer.php?u=https://codepen.io/ashoksuthar/full/oLKYRP/');
      });
    });
  });

Comments