JavaScript: Random Quote Generator

Demo Link: https://codepen.io/dragoncoin/pen/BWNNLm

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()){}

Leave a Reply

Your email address will not be published. Required fields are marked *