Quote Generator using Javascript
Notable features include:
-Pulls random quotes using an API
async function getQuote() {
loading();
const proxyUrl = 'https://hidden-forest-89480.herokuapp.com/';
const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
try {
const response = await fetch(proxyUrl + apiUrl);
const data = await response.json();
// If Author Is Blank, add 'Unknown'
if (data.quoteAuthor === '') {
authorText.innerText = 'Unknown';
} else {
authorText.innerText = data.quoteAuthor;
}
// Reduce Font Size for Long Quotes
if (data.quoteText.length > 120) {
quoteText.classList.add('long-quote');
} else {
quoteText.classList.remove('long-quote');
}
quoteText.innerText = data.quoteText;
// Stop Loader, Show Quote
complete();
} catch (error) {
getQuote();
}
}
-Able to link directly into 'composing a new tweet' with the quote currently generated
function tweetQuote() {
const quote = quoteText.innerText;
const author = authorText.innerText;
const twitterUrl = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
window.open(twitterUrl, '_blank');
}
-Uses Loading Animation by toggling CSS class and using keyframes animation
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #333333;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}