Random Quote Generator(In progress)

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quote Generator(In progress)</title>
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  
  <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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div class="container-fluid" id="back">
  <p class="text-center" id="name"> Random Quote Generator </p>
  <div class="container-fluid" id="mainBar">
   <div id="quoteDisplay" class="text-center">
    </div>
    <div class="row container-fluid" id="buttons">
      <div class="col-xs-6 text-center">
        <button id="tweet"><a target="_blank"><i class="fa fa-twitter"></i></a></button>
      </div>
       <div class="col-xs-6 text-center">
         <button id="getQuote" type="button">Get Quote</button>
      </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mtphil/random-quote-generatorin-progress-XpRXYR */
#mainBar{
  background-color:#548171;
   margin-top:60px;
  width:600px;
    
}
a:hover{
  text-decoration: none !important;
  color:inherit;
}
a{
  text-decoration: none !important;
  color:inherit;
}
a:visited{
  color:inherit;
}
#back{
  color:white;
   margin: 250px auto 0 auto;
}
body{
  background-color:#548171;
  
}
#name{
  font-size:34pt;
  color:#7dc1a9;
}
html *{
  font-family:"Rubik";
  word-wrap: break-word;
  
}
#buttons{
  padding:10px 30px 0px 0px;
  
}
button{
  font-size:28px;
  background-color:transparent;
  color:#7dc1a9;
	border:1px solid #8edabf;
  border-radius:6%;
}
button:hover{
  background-color:#43685b;
  color:#7dc1a9;
}
#quoteDisplay{
  font-size:18pt;
  padding-bottom:40px;
}

/*Downloaded from https://www.codeseek.co/mtphil/random-quote-generatorin-progress-XpRXYR */
$(document).ready(function(){
  var quote = ""; 
$("#getQuote").on('click',function(){
$.ajax({
      url: '//api.forismatic.com/api/1.0/',
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp',
      },
}).done(function(data){
   if(data.quoteAuthor===""){
     quote = data.quoteText + " — " + "Unknown"; 
   }else{
      quote = data.quoteText + " — " + data.quoteAuthor;
   }        
            });
  $("#quoteDisplay").html(quote);
});

$("#tweet").click(function(){
    $("#tweet a").attr("href","https://twitter.com/intent/tweet?text=" + quote);
});})

Comments