JohanCoetzer/web-scraper-wizard

1document.addEventListener('DOMContentLoaded', () => {2    const urlInput = document.getElementById('url-input');3    const scrapeBtn = document.getElementById('scrape-btn');4    const resultsContainer = document.getElementById('results-container');5    const resultsContent = document.getElementById('results-content');6    const errorContainer = document.getElementById('error-container');7    const errorMessage = document.getElementById('error-message');8    const copyBtn = document.getElementById('copy-btn');9    const downloadJsonBtn = document.getElementById('download-json');10    const downloadCsvBtn = document.getElementById('download-csv');11    12    let scrapedData = null;13    14    // Scrape button click handler15    scrapeBtn.addEventListener('click', async () => {16        const url = urlInput.value.trim();17        18        if (!url) {19            showError('Please enter a valid URL');20            return;21        }22        23        try {24            scrapeBtn.disabled = true;25            scrapeBtn.innerHTML = '<span class="animate-pulse">Scraping...</span>';26            27            // In a real application, you would call your backend API here28            // For demo purposes, we'll simulate a response29            await simulateScrape(url);30            31            resultsContainer.classList.remove('hidden');32            errorContainer.classList.add('hidden');33        } catch (error) {34            showError(error.message || 'Failed to scrape the website');35        } finally {36            scrapeBtn.disabled = false;37            scrapeBtn.innerHTML = '<span>Scrape</span><i data-feather="chevron-right"></i>';38            feather.replace();39        }40    });41    42    // Copy button click handler43    copyBtn.addEventListener('click', () => {44        if (!scrapedData) return;45        46        navigator.clipboard.writeText(JSON.stringify(scrapedData, null, 2))47            .then(() => {48                const originalText = copyBtn.querySelector('span').textContent;49                copyBtn.querySelector('span').textContent = 'Copied!';50                setTimeout(() => {51                    copyBtn.querySelector('span').textContent = originalText;52                }, 2000);53            })54            .catch(err => {55                showError('Failed to copy to clipboard');56            });57    });58    59    // Download JSON button click handler60    downloadJsonBtn.addEventListener('click', () => {61        if (!scrapedData) return;62        downloadFile(JSON.stringify(scrapedData, null, 2), 'application/json', 'data.json');63    });64    65    // Download CSV button click handler66    downloadCsvBtn.addEventListener('click', () => {67        if (!scrapedData) return;68        69        // Simple CSV conversion (would need more complex logic for nested objects)70        let csv = '';71        if (Array.isArray(scrapedData)) {72            // Get headers73            const headers = Object.keys(scrapedData[0] || {});74            csv += headers.join(',') + '\n';75            76            // Add rows77            scrapedData.forEach(item => {78                csv += headers.map(header => `"${String(item[header] || '').replace(/"/g, '""')}"`).join(',') + '\n';79            });80        } else {81            // For single object82            const headers = Object.keys(scrapedData);83            csv += headers.join(',') + '\n';84            csv += headers.map(header => `"${String(scrapedData[header] || '').replace(/"/g, '""')}"`).join(',') + '\n';85        }86        87        downloadFile(csv, 'text/csv', 'data.csv');88    });89    90    // Helper function to show errors91    function showError(message) {92        errorMessage.textContent = message;93        errorContainer.classList.remove('hidden');94        resultsContainer.classList.add('hidden');95    }96    97    // Helper function to download files98    function downloadFile(content, mimeType, filename) {99        const blob = new Blob([content], { type: mimeType });100        const url = URL.createObjectURL(blob);101        const a = document.createElement('a');102        a.href = url;103        a.download = filename;104        document.body.appendChild(a);105        a.click();106        document.body.removeChild(a);107        URL.revokeObjectURL(url);108    }109    110    // Simulate scraping (in a real app, this would be a backend API call)111    function simulateScrape(url) {112        return new Promise((resolve, reject) => {113            setTimeout(() => {114                try {115                    // Simulate different responses based on URL116                    if (url.includes('example.com')) {117                        scrapedData = {118                            url: url,119                            title: "Example Domain",120                            description: "This domain is for use in illustrative examples in documents.",121                            h1: "Example Domain",122                            links: [123                                { text: "More information...", href: "https://www.iana.org/domains/example" }124                            ],125                            timestamp: new Date().toISOString()126                        };127                    } else if (url.includes('jsonplaceholder.typicode.com')) {128                        scrapedData = [129                            {130                                userId: 1,131                                id: 1,132                                title: "Sample Post",133                                body: "This is a sample post body text."134                            },135                            {136                                userId: 1,137                                id: 2,138                                title: "Another Post",139                                body: "This is another sample post body text."140                            }141                        ];142                    } else {143                        scrapedData = {144                            url: url,145                            status: "Successfully scraped",146                            timestamp: new Date().toISOString(),147                            note: "This is a simulated response. In a real application, this would be the actual scraped data from the website."148                        };149                    }150                    151                    resultsContent.textContent = JSON.stringify(scrapedData, null, 2);152                    resolve();153                } catch (error) {154                    reject(new Error('Simulated scraping error'));155                }156            }, 1500);157        });158    }159});160<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>