Random Quote Generator

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

A random quote generator which features JQuery button handling and buttons that are used to share on facebook or tweet the quote

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quote Generator</title>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div class="container-fluid" id="background">
  <div class="row">
    <h1 class="text-center"> Random Quote Generator </h1>
  </div>

  <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-4 col-xs-8">
      <div class="container">

        <h3 class="text-center">
          <small><i class="fa fa-quote-left"></i></small>
            <span id="quote">Quotes are the worst, Code is Life! Hit next!</span>  
          <small><i class=" fa fa-quote-right"></i></small>
          <p></p> - <span id="author"> Conor Hinchee </span> -
        </h3>
        <div class="row">
          <div class="col-lg-4 col-xs-6"></div>

          <button class="btn btn-primary" id="Next">
            Next Quote
            <i class="fa fa-chevron-circle-right"></i>
          </button>


          <button class="btn btn-default">
            
            <a href="javascript:fbShare('https://codepen.io/captnstarburst/full/WwPWMP/', 'Fb Share', 'Facebook share popup', '', 520, 350)" target="_blank"
</a>
              <i class= "fa fa-facebook-official"></i></a>
          </button>
          <button class="btn btn-default" id="tweet-quote">
              <i class="fa fa-twitter"></i></a>
          </button>


        </div>
      </div>
    </div>
  </div>
  <!-- CONTAINER -->
</div>
</div>

</div>
<!-- CONTAINER-FUID -->

<div class="footer">
  <p class="text-center">Coded by Conor Hinchee</p>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/random-quote-generator-WwPWMP */
.container-fluid {
  background: rgb(170, 0, 0);
  background-image: ;
  min-height: 800px;
}

.container {
  background: rgb(255, 255, 255);
  min-width: 150%;
  max-width: 150%;
  padding-right: 50px;
  /* set border styling */
  border-color: black;
  border-style: solid;
  border-width: 10px;
  /* set border roundness */
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}

h1 {
  font-family: lobster;
  color: rgb(0, 0, 0);
  padding-bottom: 80px;
}

h3 {
  word-wrap: break-word;
  font-family: Poiret One;
  font-weight: bold;
}

p {
  font-family: lobster;
}

.buttons {
  padding-left: 200px;
}

.fb-share {
  vertical-align: top;
  display: inline-block;
  height: 18px;
  padding: 0 4px;
  border: 1px solid #cad4e7;
  border-radius: 3px;
  background: #eceef5;
  color: #3b5998;
  font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* IE7 */
  *display: inline;
  *zoom: 1;
}

.fb-share:hover {
  border-color: #9dacce;
}

.fb-share-icon {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 1px;
  background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/y-/r/tbhIfdAHjXE.png);
  /* IE7 */
  *display: inline;
  *zoom: 1;
}

.fb-share-text {
  position: relative;
  top: -1px;
}

/*Downloaded from https://www.codeseek.co/captnstarburst/random-quote-generator-WwPWMP */
var quoteArray = [
  ["Don't go around saying the world owes you a living.The world owes you nothing. It was here first.", "Mark Twain "],
  ["Sometimes I'll start a sentence and I dont know where its going.I just hope I find it along the way", "Michael Scott "],
  ["Lets burn this motherfucker to the ground!", " Winnie the Pooh "],
  ["I closed my mouth and spoke to you in a hundred silent ways", "Rumi"],
  ["Two things are infinite: the universe and human stupidity and I'm not sure about the universe.", "Alberto Einsteineo"],
  ["This world is but a canvas to our imagination.", "Henry David Thoreau"],
  ["Peace be the journey.", "Cool Runnings"],
  ["What you need, above all else, is a love for your subject, whatever it is.You've got to be so deeply in love with your subject that when curve balls are thrown, when hurdles are put in place, you've got the energy to overcome them. ", "Neil Degrasse Tyson"],
  ["Pseudoscience is like a virus. At low levels, it's no big deal, but when it reaches a certain threshold it becomes sickening.", "Phil Plait"],
  ["Gestures are all that I have; sometimes they must be grand in nature.", "Garth Stein"],
  ["Death is an engineering problem.", "Bart Kosko"],
  ["De omnibus dubitandum. All is to be doubted.", "René Descartes"],
  ["If you believe everything you read, you better not read.", "Japanese Proverb"],
  [" Every generation has the obligation to free men's minds for a look at new worlds... to look out from a higher plateau than the last generation.", "Ellison Onizuka"],
  ["Seeking what it true is not seeking what is desirable.", "Albert Camus"],
  ["Veni, vidi, vici. I came, I saw, I conquered", "Julius Caesar"]

];

var colorArray = [
  "rgb(61,148,52)", "rgb(148,52,52)", "rgb(46,38,135)", "rgb(176,204,147)", "rgb(204,147,147)", "rgb(255,255,102)", "rgb(255,51,126)", "rgb(111,122,124)", "rgb(170,0,0)", "rgb(186,95,0)", "rgb(255,0,45)",
  "rgb(116,116,166)","rgb(24,24,24)", "rgb(112,250,64)", "rgb(180,0,45)", "rgb(112,180,35)"
];

var lastQuote;
var lastColor;

$(document).ready(function() {
  $("#Next").on("click", function() {
    
    
    let quoteRNG = rng(lastQuote);
    
    lastQuote = quoteRNG;
    let colorRNG = rng(lastColor);
    lastColor = colorRNG;
    
    
    if (quoteRNG === 2) {
      $("#background").css("background-image", " url(https://images7.alphacoders.com/410/410661.jpg)")
    }else{
       $("#background").css("background", colorArray[colorRNG]);
    }
    
    $("#quote").html(quoteArray[quoteRNG][0]);
    $("#author").html(quoteArray[quoteRNG][1]);
   
  
  });
});

$("#tweet-quote").click(function(){
  let quote = $("#quote").text();
  let author = $("#author").text();
  
  tweetShare(quote, author);
});

function rng(last){
  var run = true;
  let num ;
  
  while(run){
    
    num =  Math.floor(Math.random() * quoteArray.length);
    
    if (typeof last != 'undefined' || num !== last){
      
      run= false;
    }
  }

  return (num);
}

// Facebook Share button popup
function fbShare(url, title, descr, image, winWidth, winHeight) {
  var winTop = (screen.height / 2) - (winHeight / 2);
  var winLeft = (screen.width / 2) - (winWidth / 2);
  window.open('https://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
}

// Twitter share
function tweetShare(quote, author){
  let url ="https://twitter.com/intent/tweet?text=" + quote + "- by " + author +" https://codepen.io/captnstarburst/full/WwPWMP/";
  
  window.open(url, "Tweet this quote");
}

Comments