Update index.html

index.html

@@ -418,6 +418,52 @@
 
     <script>
         const API_BASE = 'https://tmkoc-quotes-api.onrender.com/v1';
+        
+        // Sample quotes as fallback
+        const sampleQuotes = [
+            {
+                "quote": "Tapu ke papa, sambhal ke!",
+                "author": "Daya Gada",
+                "tags": ["classic", "funny"]
+            },
+            {
+                "quote": "Jethalal, ye kya tamasha bana rakha hai!",
+                "author": "Champaklal Gada",
+                "tags": ["classic"]
+            },
+            {
+                "quote": "Hey Maa, Mataji!",
+                "author": "Daya",
+                "tags": ["surprised", "classic"]
+            },
+            {
+                "quote": "Fire! Fire! Fire!",
+                "author": "Jethalal",
+                "tags": ["funny", "panic"]
+            },
+            {
+                "quote": "Pappu pass ho gaya!",
+                "author": "Tapu Sena",
+                "tags": ["celebration", "school"]
+            },
+            {
+                "quote": "Bas kar pagle, rulayega kya?",
+                "author": "Jethalal",
+                "tags": ["emotional", "funny"]
+            },
+            {
+                "quote": "Arre yaar, kya baat hai!",
+                "author": "Popatlal",
+                "tags": ["excitement"]
+            },
+            {
+                "quote": "Shanti, shanti, shanti!",
+                "author": "Taarak Mehta",
+                "tags": ["peace", "wisdom"]
+            }
+        ];
+
+        let useAPIFallback = false;
 
         function showLoading(containerId) {
             const container = document.getElementById(containerId);
@@ -430,31 +476,68 @@
             `;
         }
 
-        function showError(containerId, message) {
+        function showError(containerId, message, showFallbackOption = false) {
             const container = document.getElementById(containerId);
             container.style.display = 'block';
             container.innerHTML = `
                 <div class="error">
                     <i class="fas fa-exclamation-triangle"></i>
                     Error: ${message}
+                    ${showFallbackOption ? `
+                        <br><br>
+                        <button class="btn btn-secondary" onclick="enableFallbackMode()" style="margin-top: 10px;">
+                            <i class="fas fa-shield-alt"></i> Use Demo Mode
+                        </button>
+                        <p style="margin-top: 8px; font-size: 0.9rem;">Demo mode uses sample quotes when API is unavailable</p>
+                    ` : ''}
                 </div>
             `;
         }
 
-        function displaySingleQuote(quote) {
-            document.getElementById('randomQuoteText').textContent = quote.quote;
-            document.getElementById('randomQuoteAuthor').textContent = `— ${quote.author}`;
+        function enableFallbackMode() {
+            useAPIFallback = true;
+            showApiStatus();
+            getRandomQuote();
+        }
+
+        function showApiStatus() {
+            const statusDiv = document.createElement('div');
+            statusDiv.id = 'api-status';
+            statusDiv.innerHTML = `
+                <div style="background: #fff3cd; color: #856404; padding: 10px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #ffeaa7;">
+                    <i class="fas fa-info-circle"></i>
+                    <strong>Demo Mode:</strong> Using sample quotes since the API is unavailable. 
+                    <button onclick="testAPI()" style="background: none; border: none; color: #667eea; text-decoration: underline; cursor: pointer;">Try API again</button>
+                </div>
+            `;
             
-            const tagsContainer = document.getElementById('randomQuoteTags');
-            if (quote.tags && quote.tags.length > 0) {
-                tagsContainer.innerHTML = quote.tags.map(tag => 
-                    `<span class="tag">#${tag}</span>`
-                ).join('');
-            } else {
-                tagsContainer.innerHTML = '';
+            const container = document.querySelector('.container');
+            const firstSection = container.querySelector('.demo-section');
+            if (!document.getElementById('api-status')) {
+                container.insertBefore(statusDiv, firstSection);
             }
+        }
+
+        async function testAPI() {
+            useAPIFallback = false;
+            const statusEl = document.getElementById('api-status');
+            if (statusEl) statusEl.remove();
+            await getRandomQuote();
+        }
+        function displaySingleQuote(quote) {
+            const container = document.getElementById('randomQuoteDisplay');
             
-            document.getElementById('randomQuoteDisplay').style.display = 'flex';
+            // Build the entire quote display using innerHTML
+            const tagsHTML = quote.tags && quote.tags.length > 0 
+                ? `<div class="quote-tags">${quote.tags.map(tag => `<span class="tag">#${tag}</span>`).join('')}</div>`
+                : '';
+
+            container.innerHTML = `
+                <div class="quote-text">${quote.quote}</div>
+                <div class="quote-author">— ${quote.author}</div>
+                ${tagsHTML}
+            `;
+            container.style.display = 'flex';
         }
 
         function displayMultipleQuotes(quotes, containerId) {
@@ -477,24 +560,93 @@
             `).join('');
         }
 
+        function getRandomSampleQuotes(count = 1) {
+            const shuffled = [...sampleQuotes].sort(() => 0.5 - Math.random());
+            return shuffled.slice(0, count);
+        }
+
+        function filterSampleQuotesByCharacter(character) {
+            return sampleQuotes.filter(quote => 
+                quote.author.toLowerCase().includes(character.toLowerCase())
+            );
+        }
+
+        function searchSampleQuotes(author, text) {
+            return sampleQuotes.filter(quote => {
+                const matchesAuthor = !author || quote.author.toLowerCase().includes(author.toLowerCase());
+                const matchesText = !text || quote.quote.toLowerCase().includes(text.toLowerCase());
+                return matchesAuthor && matchesText;
+            });
+        }
+
         async function makeAPICall(endpoint) {
-            const response = await fetch(`${API_BASE}${endpoint}`);
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 15000); // 15 second timeout
+            
+            try {
+                console.log(`Making API call to: ${API_BASE}${endpoint}`);
+                
+                const response = await fetch(`${API_BASE}${endpoint}`, {
+                    signal: controller.signal,
+                    method: 'GET',
+                    mode: 'cors',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                    }
+                });
+                
+                clearTimeout(timeoutId);
+                
+                console.log(`API Response status: ${response.status}`);
+                
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}${errorText ? ` - ${errorText}` : ''}`);
+                }
+                
+                const data = await response.json();
+                console.log('API Response data:', data);
+                return data;
+            } catch (error) {
+                clearTimeout(timeoutId);
+                console.error('API Call failed:', error);
+                
+                if (error.name === 'AbortError') {
+                    throw new Error('Request timed out - API server may be sleeping on free hosting');
+                }
+                if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
+                    throw new Error('Network error - API server may be down or have CORS issues');
+                }
+                throw error;
             }
-            return await response.json();
         }
-
         async function getRandomQuote() {
             try {
                 document.getElementById('multipleQuotesDisplay').style.display = 'none';
                 showLoading('randomQuoteDisplay');
                 
-                const quotes = await makeAPICall('/quotes');
-                document.getElementById('randomQuoteDisplay').style.display = 'none';
-                displaySingleQuote(quotes[0]);
+                let quote;
+                if (useAPIFallback) {
+                    quote = getRandomSampleQuotes(1)[0];
+                } else {
+                    try {
+                        quote = await makeAPICall('/quotes');
+                    } catch (error) {
+                        console.error('API Error:', error);
+                        // Remove next line (redundant)
+                        showError('randomQuoteDisplay', `${error.message}. The API might be sleeping on free hosting.`, true);
+                        return;
+                    }
+                }
+                
+                // REMOVE THIS LINE: It's unnecessary and causes flickering
+                // document.getElementById('randomQuoteDisplay').style.display = 'none';
+                displaySingleQuote(quote);
             } catch (error) {
-                showError('randomQuoteDisplay', error.message);
+                // REMOVE THIS LINE: showError already handles display
+                // document.getElementById('randomQuoteDisplay').style.display = 'none';
+                showError('randomQuoteDisplay', error.message, !useAPIFallback);
             }
         }
 
@@ -503,20 +655,49 @@
                 document.getElementById('randomQuoteDisplay').style.display = 'none';
                 showLoading('multipleQuotesDisplay');
                 
-                const quotes = await makeAPICall('/quotes/3');
+                let quotes;
+                if (useAPIFallback) {
+                    quotes = getRandomSampleQuotes(3);
+                } else {
+                    try {
+                        quotes = await makeAPICall('/quotes/3');
+                    } catch (error) {
+                        console.error('API Error:', error);
+                        showError('multipleQuotesDisplay', `${error.message}. The API might be sleeping on free hosting.`, true);
+                        return;
+                    }
+                }
+                
                 displayMultipleQuotes(quotes, 'multipleQuotesDisplay');
             } catch (error) {
-                showError('multipleQuotesDisplay', error.message);
+                showError('multipleQuotesDisplay', error.message, !useAPIFallback);
             }
         }
 
         async function getQuotesByCharacter(character) {
             try {
                 showLoading('characterQuotesDisplay');
-                const quotes = await makeAPICall(`/quotes/character/${encodeURIComponent(character)}`);
+                
+                let quotes;
+                if (useAPIFallback) {
+                    quotes = filterSampleQuotesByCharacter(character);
+                    if (quotes.length === 0) {
+                        showError('characterQuotesDisplay', `No quotes found for character "${character}" in demo data`);
+                        return;
+                    }
+                } else {
+                    try {
+                        quotes = await makeAPICall(`/quotes/character/${encodeURIComponent(character)}`);
+                    } catch (error) {
+                        console.error('API Error:', error);
+                        showError('characterQuotesDisplay', `${error.message}. The API might be sleeping on free hosting.`, true);
+                        return;
+                    }
+                }
+                
                 displayMultipleQuotes(quotes, 'characterQuotesDisplay');
             } catch (error) {
-                showError('characterQuotesDisplay', error.message);
+                showError('characterQuotesDisplay', error.message, !useAPIFallback);
             }
         }
 
@@ -541,14 +722,30 @@
             try {
                 showLoading('searchResults');
                 
-                const params = new URLSearchParams();
-                if (author) params.append('author', author);
-                if (text) params.append('text', text);
+                let quotes;
+                if (useAPIFallback) {
+                    quotes = searchSampleQuotes(author, text);
+                    if (quotes.length === 0) {
+                        showError('searchResults', 'No quotes found matching your search in demo data');
+                        return;
+                    }
+                } else {
+                    try {
+                        const params = new URLSearchParams();
+                        if (author) params.append('author', author);
+                        if (text) params.append('text', text);
+                        
+                        quotes = await makeAPICall(`/quotes/search?${params.toString()}`);
+                    } catch (error) {
+                        console.error('API Error:', error);
+                        showError('searchResults', `${error.message}. The API might be sleeping on free hosting.`, true);
+                        return;
+                    }
+                }
                 
-                const quotes = await makeAPICall(`/quotes/search?${params.toString()}`);
                 displayMultipleQuotes(quotes, 'searchResults');
             } catch (error) {
-                showError('searchResults', error.message);
+                showError('searchResults', error.message, !useAPIFallback);
             }
         }