Demo Link: https://blog.kimconnect.com/wp-content/projects/randomQuoteGenerator.html

HTML code:

<body>

  <div class="container fluid">
  <div>
    <div class="text-center">
      <h1> Random Quote Generator </h1>
      <br/>
      <h2><p>Free Code Camp Intermediate Student Front-End Development Project 1</p><h2>
      <br/>
      <button class="btn btn-default" type="submit" id="newQuote">Click to Obtain New Quote</button>
    </div>
<div class="quotes text-center">
    <span class = "quote"></span><span class = "author"></span><a href="#" id="tweet" title="Tweet this quote!" target="_blank" ><a>
</div>
  </div>
</div>

</body>

CSS Code:

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
body{
//  background-color: black;
  background-image: url(http://wallup.net/wp-content/uploads/2016/01/167565-abstract-dark-black_background-digital_art-artwork.png);
	background-size: 100%;
}

h1{
  color: yellow;
  font-family: "Arial";
}

img{
  padding: 20px;
}

p{
  color: yellow;
  font-family: "Arial";
  font-style: "italic";
  font-size: 14px;  
}

.btn{
//  border: solid;
//  border-color: yellow;
//  background-color: black;
  color: yellow;
  
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

.btn:hover{
  border: solid;
  border-color: yellow;
  font-weight: bold;
//  background-color: White;
  color: white;
}

#tweet{
    display: block;
    padding: 2px 5px 2px 20px;
    background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat;
       float:right;
        padding:0px;
 //       padding-top:8px;
 //       text-align:center;
//        font-size:1.2em;
//        margin-right:5px;
        height:30px;
        width:40px;
}

.quotes {
//  width: 30%;
  margin-right: auto;
  margin-left:auto;
  border-color: yellow;
  border-style: solid;
  border-radius: 5px;
  margin-top: 20px;
  padding: 10px;
  height: auto;
  color: yellow;
  background-color: black;
  text-align: center;
}

.author{
  font-size: 16px;
//  font-style: "italic";
}

span{
  font-family:"Arial";
  font-size: 24px;  
}

// Make buttons glow!
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

JavaScript Code:

$(document).ready(function(){
getQuote();
var quoteX;
var authorX; 

function getQuote(){

/*
// The section deals with internal data
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var quotes=[["saying 1","author1"],["saying 2","author2"], ["saying 3","author3"]];
var randomNum=Math.floor(Math.random()*quotes.length) ;
quoteX=quotes[randomNum][0];
authorX=quotes[randomNum][1];
$(".quote").text(capitalizeFirstLetter(quoteX));
$(".author").text(" ~"+capitalizeFirstLetter(authorX));

*/


// This section deals with API 

var url='https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?';

// This line is to test console output
// $.getJSON(url,function(data){ console.log(data);} );

$.getJSON(url,function(data){
quoteX=data.quoteText;
authorX=data.quoteAuthor; 
$(".quote").html('"'+quoteX+'"');
$(".author").html(' ~'+authorX);
});


} //end of getQuote()

$("#newQuote").on("click",function(){ getQuote(); });
$("#tweet").on("click",function(){ window.open("https://twitter.com/intent/tweet?text="+quoteX+" ~"+authorX) });



}); // End of $(document).ready(function()){}
Categories: