FreeCodeAcademy challange, build a random quote machine. It uses API to get quotes and features a fully working twitter share button!
A Pen by Raffaele Spataro on CodePen.
<div class="main"> | |
<blockquote> | |
<p id="quote"></p> | |
<small><cite id="author"></cite></small> | |
</blockquote> | |
<div class="text-center"> | |
<a type="button" id="refresh" class="btn btn-default"> | |
More wisdom</a> | |
</div> | |
<br /> | |
<i type="button" onclick="tweetQuote()" class="fa fa-twitter fa-4x"aria-hidden="true" id="twitter-share"> | |
</i> | |
function randomQuote() { | |
$.ajax({ | |
url: "https://api.forismatic.com/api/1.0/", | |
jsonp: "jsonp", | |
dataType: "jsonp", | |
data: { | |
method: "getQuote", | |
lang: "en", | |
format: "jsonp" | |
},//data | |
success: function(a) { | |
$('#quote').html(a.quoteText); | |
$('#author').html(a.quoteAuthor); | |
} | |
}); | |
}; | |
randomQuote(); | |
/// | |
var textQuote = $("#quote").html(); | |
$("a").attr("data-text", textQuote); | |
$(document).ready(function() { | |
$('#refresh').click(function() { | |
randomQuote(); | |
}); | |
}); | |
///(All credits for this snippet to @ksjazzguitar https://forum.freecodecamp.org/u/ksjazzguitar) | |
function tweetQuote() { | |
var url = "https://twitter.com/intent/tweet"; | |
var text= "\"" + document.getElementById("quote").textContent + "\" " + document.getElementById("author").textContent; | |
var hashtags = ""; | |
window.open(url + "?text=" + text + ";hashtags=" + hashtags, "width=500,heigth=300"); | |
}; | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://use.fontawesome.com/9204c5f991.js"></script> |
body { | |
font-family: 'Gloria Hallelujah', cursive; | |
} | |
.main { | |
text-align: center; | |
margin: 2.5em; | |
padding: 3.5em; | |
} | |
blockquote { | |
border-left: none; | |
border-style: dotted solid double dashed; | |
border-color: grey; | |
} | |
#twitter-share { | |
cursor: pointer; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |