Quote Generator

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

Random quote generator by Gagan Nagpal

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Quote Generator</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

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

  
</head>

<body>

  <html>
  <head>
     <link href='https://fonts.googleapis.com/css?family=Emblema+One' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="row ">
      <div class="col-xs-12">
        <div class="container">
          <div class="panel panel-default">
            <div class="panel-body text-center" id="quote-here">
              <i class="fa fa-quote-left" aria-hidden="true" id="quoteSymbol">
              </i>
              <div id="Quote-text">
                
              </div>

              <i class="fa fa-quote-right" aria-hidden="true" id="quoteSymbol"></i>
              <br/>
              <div id="Quote-author">
                gagan nagpal
              </div>
              <br/>
              <br/>
            </div>
            <div class="panel-body">
           
              <button class="btn btn-primary" id="twitter">
                <i class="fa fa-twitter" aria-hidden="true"></i>
              </button>
           
              <button class="btn btn-primary" id="nextQuote">
                Next Quote
              </button>
            </div>
          </div>
        </div>
        <div>
    </div>
  </body>
 </html>
  <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/gagan86nagpal/quote-generator-oLbLEO */
.panel, .panel .jumbotron
{
  display:block;
  background-color:#E1E8EB;
  margin-top:100px;
  margin-bottom:0;
  border-top-left-radius:50px;
  border-top-right-radius:50px;
}
#quoteSymbol
{
  color:white;
}
#quote-here
{
  font-size:30px;
}
#twitter
{
  margin-left:1px;
}
#nextQuote
{
  margin-right:auto;
  margin-left:auto;
  float:right;
}
#Quote-text
{
  display:inline;
  font-family: 'Emblema One', cursive;
  font-size:35px;
  
}
#Quote-author
{
  color:grey;
  size:10px;
  font-style:italic;
  float:right;
}


/*Downloaded from https://www.codeseek.co/gagan86nagpal/quote-generator-oLbLEO */
var currentQuote="";
var currentAuthor="";
var r;
$(document).ready(function()
                 {
  currentQuote="Sometimes, it is the wrong train that leads to right destination.";
  currentAuthor="Gagan Nagpal";
  setQuote();
});

function setQuote()
{
  $('#Quote-text').html(currentQuote);
  $('#Quote-author').html('-'+ currentAuthor);
}
function change_back_font()
{
  var r=Math.floor(Math.random() * 255) ;
  var b=Math.floor(Math.random() * 255) ;
  var g=Math.floor(Math.random() * 255) ;
   $('body').fadeToggle();
   $('body').css("background-color", "rgb("+ r +","+ g +","+ b +")");
  $('#Quote-text').css("color", "rgb("+ r +","+ g +","+ b +")");
   $('body').fadeToggle(1000);
  }  
function getQuote() {
  $.ajax({
    headers: {
      "X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V",
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
    success: function(response) {
      r = JSON.parse(response);
    }
  });
  currentQuote=r.quote;
      currentAuthor=r.author; 
  setQuote();
  change_back_font();
}
$('#nextQuote').on('click',function()
                  { 
  getQuote();
});
$('#twitter').click(function()
                   { window.open('https://twitter.com/intent/tweet?hashtags=Myquotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
});

Comments