-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
143 lines (111 loc) · 4 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
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 loader = document.getElementById('loader');
function showLoadingSpinner(){
loader.hidden = false;
quoteContainer.hidden = true;
}
function hideLoadingSpinner(){
if(!loader.hidden){
loader.hidden = true;
quoteContainer.hidden = false;
}
}
// 1st Method: Get Quote from API
let counter = 0; // If counter > 10, quote API page has some problem
async function getQuote(){
const proxyUrl = 'https://blooming-plains-93648.herokuapp.com/';
const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
try{
showLoadingSpinner();
const response = await fetch(proxyUrl + apiUrl)
const data = await response.json();
// If Author is blank or null add 'Unknown'
if( data.quoteAuthor === ''|| !data.quoteAuthor ){
authorText.innerText = "Unknown";
} else{
authorText.innerText = data.quoteAuthor;
}
// if quote text length is greater, then decrease the font size;
if( data.quoteText.length > 120 ){
quoteText.classList.add('long-quote');
} else{
quoteText.classList.remove('long-quote');
}
quoteText.innerText = data.quoteText;
hideLoadingSpinner();
} catch(error){
if(error instanceof SyntaxError){
console.log(error);
quoteContainer.innerText = "No Quote fetched...Please refresh the page";
quoteContainer.style.fontSize = "3rem";
hideLoadingSpinner();
}
// if(counter > 10){
// quoteContainer.innerText = "No Quote fetched...Please refresh the page";
// console.log('Whoops no Quote '+ error);
// counter = 0;
// } else{
// if(getQuote())
// counter = 0;
// else
// counter++;
// }
}
}
// Tweet Quote
function tweetQuote(){
const quote = quoteText.innerText;
const author = authorText.innerText;
const twitterUrl = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
window.open(twitterUrl, '_blank');
}
// Event Listeners
newQuoteBtn.addEventListener('click', getQuote);
twitterBtn.addEventListener('click', tweetQuote);
// // 2nd Method: Get Quote from API
// let apiQuotes = [];
// function newQuote(){
// showLoadingSpinner();
// // getting random quote from apiQuotes
// const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
// // Check if quote.author exist
// if(!quote.author)
// authorText.innerText = "unknown";
// else
// authorText.textContent = quote.author;
// // if quote text length is greater, then decrease the font size;
// if( quote.text.length > 120 ){
// quoteText.classList.add('long-quote');
// } else{
// quoteText.classList.remove('long-quote');
// }
// // quote of the author
// quoteText.textContent = quote.text;
// hideLoadingSpinner();
// }
// async function getQuote(){
// showLoadingSpinner();
// const proxyUrl = 'http://api.allorigins.win/get?url=';
// const apiUrl = 'https://type.fit/api/quotes';
// try{
// const response = await fetch(apiUrl)
// apiQuotes = await response.json();
// newQuote();
// } catch(error){
// newQuote();
// }
// }
// // Tweet Quote
// function tweetQuote(){
// const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`;
// window.open(twitterUrl, '_blank');
// }
// // Event Listeners
// newQuoteBtn.addEventListener('click', newQuote);
// twitterBtn.addEventListener('click', tweetQuote);
// On Load
getQuote();