Random Quote Machine

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quote Machine</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="main">
  <div id="quote-box">
    <div id="quote-text" class="text-center">
      <i class="fa fa-quote-left"> </i><span id="text">Hello World</span>
      <i class="fa fa-quote-right"></i>
    </div>
    <div id="author">~</div>
    <div id="buttons">
      <div id="post-buttons">
      <i id="tweet-quote" title="Tweet it out"class="button"><i  id="symbols" class="fa fa-twitter"></i></i>
        <i id="newQuote" title="Get a new quote" class="button"><span id="text">New Quote</span></i>
      </div>
    </div>
  </div>
  <div id="credit">
    By Rohan Saha
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/simpleParadox/random-quote-machine-vmQpBv */
#quote-box{
  margin:0px auto;
  color:#000000;
  display:table;
  margin:5% auto 5% auto;
  width:500px;
  border-radius:10px;
  background-color:#ddd;
}
#text{
  font-size:1.5em;
  margin:10% auto;
}
#quote-text{
  font-size:1.2em;
  margin:5%;
}
#buttons{
  margin-top:3em;
}
#buttons #post-buttons .button{
  width:4em;
  height:3em;
  border-radius:5px;
  padding:2%;
  margin-left:3%;
  background-color:#aaa;
}
#symbols{
  font-size:150%;
}
#author{
  text-align:right;
  margin-right:10%;
}
#buttons #post-buttons #newQuote{
  margin-left:50%;
  width:30%;
}
#buttons #post-buttons #newQuote #text{
  font-size:1.5em;
}
#credit{
  text-align:center;
  margin-top:-2em;
  color:#f0f;
}

/*Downloaded from https://www.codeseek.co/simpleParadox/random-quote-machine-vmQpBv */
var quote = '';
var author = '';

function getQuote(){
  $.ajax({headers:{
      "X-Mashape-Key": "WFGTThE3z3mshTMr1Sjq8NO2Z8FYp1HEQGwjsnQDZVMlGoUNKF",
        "Accept":"application/json",
        "Content-Type":"application/x-www-form-urlencoded"},
         url:"https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous&count=1",
          success:function(obj){
              if(typeof obj==='string')
                obj = json.parse(obj);
               $("#text").animate({opacity:0},300,
                                  function(){
                 $(this).animate({opacity:1},300);
                 $(this).text(obj.quote);
                 
               });
$("#author").animate({opacity:0},300,function(){
  $(this).animate({opacity:1},300);
  $(this).text('~ ' + obj.author);
});            
         }});}
  
$(document).ready(function(){
    getQuote();
    $("#newQuote").on("click",getQuote); 
  $('#tweet-quote').on("click",function(){
   open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text='   + encodeURIComponent('"' + quote + '"' + ' ' + author));
  });
  $('#post-quote').on('click',function(){
    open('https://www.google.co.in/');
  });
});

Comments