-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
128 lines (99 loc) · 3.39 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
const quoteContainer = document.getElementById('quote-container');
const quoteText = document.getElementById('quote');
const authorText = document.getElementById('author');
const twitterBtn = document.getElementById('twitter');
const newQuoteBtn = document.getElementById('new-quote');
const simpsonsQuoteBtn = document.getElementById('simpson-quote');
const imgSimpsonCharacter = document.getElementById('simpson-character');
let quote = "";
let author = "";
//custom server to avoid CORS issue
const proxyUrl = 'https://dry-cove-58467.herokuapp.com/';
const apiUrl =
'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
const simpsonsQuoteUrl = 'https://thesimpsonsquoteapi.glitch.me/quotes';
const loader = document.getElementById('loader');
var errorTimeOut = 0;
function showLoadingSpinner() {
loader.hidden = false;
quoteContainer.hidden = true;
}
function removeLoadingSpinner() {
if (!loader.hidden) {
quoteContainer.hidden = false;
loader.hidden = true;
} else {
}
}
function showCharacterImage(imageUrl) {
if (imageUrl) {
imgSimpsonCharacter.hidden = false;
imgSimpsonCharacter.src = imageUrl;
} else {
hideCharacterImage();
}
}
function hideCharacterImage() {
imgSimpsonCharacter.hidden = true;
}
async function getQuote(quoteType) {
showLoadingSpinner();
hideCharacterImage();
try {
let url = proxyUrl + apiUrl;
if (quoteType === 'simpsons quote') {
url = simpsonsQuoteUrl;
}
const response = await fetch(url);
const data = await response.json();
//check if simpsons quote requested
if (quoteType === 'simpsons quote') {
quote = data[0].quote;
author = data[0].character;
showCharacterImage(data[0].image);
} else { //default quote API
quote = data.quoteText;
author = data.quoteAuthor;
}
//If response has no author , reset to 'unknown'
if (author === '') {
author = 'Unknown';
}
authorText.innerText = author;
//Dynamically Reduce quote font size for long quote
const maxQuoteLength = 80;
if (quote.length > maxQuoteLength) {
quoteText.classList.add('long-quote');
} else {
quoteText.classList.remove('long-quote');
}
quoteText.innerText = quote;
removeLoadingSpinner();
} catch (error) {
//counter to avoid infinite recursive function call threshhold set to 30
const errorThreshhold = 50;
if (errorTimeOut <= errorThreshhold) {
getQuote();
} else {
quoteText.innerText = "Oops...Sorry. There was an error. Please try again later."
}
errorTimeOut += 1;
console.log(" Error fetching quote: " + error);
}
}
function tweetQuote() {
const quote = quoteText.innerText;
const author = authorText.innerText;
const twitterUrl = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
window.open(twitterUrl, '_blank');
}
//Add Event Listeners to New Quote and Tweet buttons
newQuoteBtn.addEventListener('click', () => {
getQuote('new quote')
});
simpsonsQuoteBtn.addEventListener('click', () => {
getQuote('simpsons quote')
});
twitterBtn.addEventListener('click', tweetQuote);
//call getQuote on document Load
getQuote('new quote');