-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
146 lines (130 loc) · 5.68 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
144
145
146
// Select DOM elements
const themeToggleBtn = document.querySelector('.toggle-slider');
const textQuoteBtn = document.getElementById('text-quote-btn');
const imageQuoteBtn = document.getElementById('image-quote-btn');
const quoteContainer = document.querySelector('.quote-container');
const getQuoteBtn = document.getElementById('get-quote-btn');
const quoteOptions = document.querySelector('.quote-options');
// Initialize quote type
let quoteType = null;
// Create loading animation element
const loadingAnimation = document.createElement('div');
loadingAnimation.classList.add('loading-animation');
for (let i = 0; i < 3; i++) {
const dot = document.createElement('div');
dot.classList.add('loading-dot');
loadingAnimation.appendChild(dot);
}
// Function to toggle between light and dark mode
function toggleTheme() {
document.body.classList.toggle('dark-mode');
saveThemePreference();
}
// Function to save theme preference in local storage
function saveThemePreference() {
const isDarkMode = document.body.classList.contains('dark-mode');
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
}
// Function to load theme preference from local storage
function loadThemePreference() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
}
}
// Function to fetch and display text quote
async function getTextQuote() {
try {
const timestamp = new Date().getTime();
const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent('https://zenquotes.io/api/random')}?timestamp=${timestamp}`);
const data = await response.json();
const quoteData = JSON.parse(data.contents);
const quote = quoteData[0];
quoteContainer.innerHTML = `
<p class="quote-text">${quote.q}</p>
<p class="quote-author">- ${quote.a}</p>
`;
showQuoteContainer();
} catch (error) {
console.error('Error fetching quote:', error);
}
}
// Function to fetch and display image quote
async function getImageQuote() {
try {
// Fade out the quote options
quoteOptions.classList.add('fade-out');
setTimeout(() => {
quoteOptions.style.display = 'none';
// Display the loading text and animation
const loadingContainer = document.querySelector('.loading-container');
loadingContainer.style.display = 'flex';
// Fetch the image quote after a short delay to allow for the loading animation
setTimeout(async () => {
const timestamp = new Date().getTime();
const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent('https://zenquotes.io/api/image')}?timestamp=${timestamp}`);
const data = await response.json();
const imageUrl = data.contents;
const quoteImage = new Image();
quoteImage.src = imageUrl;
quoteImage.classList.add('quote-image');
quoteImage.alt = 'Quote Image';
// When the image loads, transition to showing the image
quoteImage.addEventListener('load', () => {
// Fade in the loading animation
loadingContainer.classList.add('fade-in');
// After a short delay, fade out the loading animation and display the image
setTimeout(() => {
loadingContainer.classList.remove('fade-in');
loadingContainer.classList.add('fade-out');
setTimeout(() => {
loadingContainer.style.display = 'none';
loadingContainer.classList.remove('fade-out');
// Display the image
quoteContainer.innerHTML = '';
quoteContainer.appendChild(quoteImage);
showQuoteContainer();
}, 500); // Delay to allow fade-out animation to complete
}, 1000); // Delay to allow the loading animation to be visible for some time
});
}, 500); // Delay before fetching the quote to allow for the loading animation
}, 500); // Delay to allow fade-out animation of quote options
} catch (error) {
console.error('Error fetching quote image:', error);
}
}
// Function to show quote container and hide quote options
function showQuoteContainer() {
quoteOptions.classList.add('fade-out');
setTimeout(() => {
quoteOptions.style.display = 'none';
quoteContainer.style.display = 'block';
getQuoteBtn.style.display = 'block';
quoteContainer.classList.add('fade-in');
}, 500); // Delay to allow fade-out animation to complete
}
// Function to hide quote container and show quote options
function showQuoteOptions() {
quoteContainer.classList.remove('fade-in');
quoteContainer.classList.add('fade-out');
setTimeout(() => {
quoteContainer.style.display = 'none';
quoteOptions.style.display = 'flex';
getQuoteBtn.style.display = 'none';
quoteOptions.classList.remove('fade-out');
}, 500); // Delay to allow fade-out animation to complete
}
// Event listeners
themeToggleBtn.addEventListener('click', toggleTheme);
textQuoteBtn.addEventListener('click', () => {
quoteType = 'text';
getTextQuote();
});
imageQuoteBtn.addEventListener('click', () => {
quoteType = 'image';
getImageQuote();
});
getQuoteBtn.addEventListener('click', showQuoteOptions);
// Load theme preference on page load
loadThemePreference();
showQuoteOptions();