Spaces:
Running
Running
| // Main JavaScript for CryptoPulse Explorer | |
| // API Configuration | |
| const COINGECKO_API = 'https://api.coingecko.com/api/v3'; | |
| const CRYPTO_DATA = [ | |
| { id: 'bitcoin', symbol: 'btc', name: 'Bitcoin', color: '#f7931a' }, | |
| { id: 'ethereum', symbol: 'eth', name: 'Ethereum', color: '#627eea' }, | |
| { id: 'cardano', symbol: 'ada', name: 'Cardano', color: '#0033ad' }, | |
| { id: 'solana', symbol: 'sol', name: 'Solana', color: '#00ffa3' }, | |
| { id: 'polkadot', symbol: 'dot', name: 'Polkadot', color: '#e6007a' }, | |
| { id: 'dogecoin', symbol: 'doge', name: 'Dogecoin', color: '#c2a633' }, | |
| { id: 'chainlink', symbol: 'link', name: 'Chainlink', color: '#2a5ada' }, | |
| { id: 'litecoin', symbol: 'ltc', name: 'Litecoin', color: '#bfbbbb' } | |
| ]; | |
| // Load Crypto Data | |
| async function loadCryptoData() { | |
| const tableBody = document.getElementById('crypto-table-body'); | |
| if (!tableBody) return; | |
| // Show loading state | |
| tableBody.innerHTML = ` | |
| <tr> | |
| <td colspan="6" class="px-6 py-12 text-center"> | |
| <div class="loading-spinner mx-auto"></div> | |
| <p class="mt-4 text-gray-500">Loading market data...</p> | |
| </td> | |
| </tr> | |
| `; | |
| try { | |
| // In a real application, you would fetch from the API | |
| // For demo purposes, we'll use mock data | |
| const mockData = generateMockCryptoData(); | |
| // Clear loading state | |
| tableBody.innerHTML = ''; | |
| // Populate table with data | |
| mockData.forEach(crypto => { | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50 transition duration-150'; | |
| const changeClass = crypto.change24h >= 0 ? 'price-up' : 'price-down'; | |
| const changeIcon = crypto.change24h >= 0 ? 'trending-up' : 'trending-down'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="crypto-icon" style="background-color: ${crypto.color}"> | |
| ${crypto.symbol.toUpperCase().charAt(0)} | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">${crypto.name}</div> | |
| <div class="text-sm text-gray-500">${crypto.symbol.toUpperCase()}</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-bold text-gray-900">$${crypto.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center ${changeClass}"> | |
| <i data-feather="${changeIcon}" class="mr-2 w-4 h-4"></i> | |
| <span class="text-sm font-semibold">${crypto.change24h >= 0 ? '+' : ''}${crypto.change24h.toFixed(2)}%</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> | |
| $${(crypto.marketCap / 1000000000).toFixed(2)}B | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> | |
| $${(crypto.volume24h / 1000000000).toFixed(2)}B | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="addToWatchlist('${crypto.id}')" class="text-primary-600 hover:text-primary-900 mr-3"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| <a href="trade.html?coin=${crypto.id}" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition duration-300"> | |
| Trade | |
| </a> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| // Update Feather icons | |
| feather.replace(); | |
| } catch (error) { | |
| console.error('Error loading crypto data:', error); | |
| tableBody.innerHTML = ` | |
| <tr> | |
| <td colspan="6" class="px-6 py-12 text-center"> | |
| <i data-feather="alert-circle" class="w-12 h-12 text-red-500 mx-auto"></i> | |
| <p class="mt-4 text-gray-500">Failed to load market data. Please try again later.</p> | |
| <button onclick="loadCryptoData()" class="mt-4 bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700 transition duration-300"> | |
| Retry | |
| </button> | |
| </td> | |
| </tr> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| // Generate Mock Crypto Data | |
| function generateMockCryptoData() { | |
| const basePrices = { | |
| bitcoin: 45000, | |
| ethereum: 3000, | |
| cardano: 2.5, | |
| solana: 100, | |
| polkadot: 20, | |
| dogecoin: 0.15, | |
| chainlink: 25, | |
| litecoin: 75 | |
| }; | |
| return CRYPTO_DATA.map(crypto => { | |
| const basePrice = basePrices[crypto.id]; | |
| const change24h = (Math.random() * 10 - 5); // Random change between -5% and +5% | |
| const currentPrice = basePrice * (1 + change24h / 100); | |
| return { | |
| ...crypto, | |
| price: currentPrice, | |
| change24h: change24h, | |
| marketCap: currentPrice * (1000000 + Math.random() * 5000000), | |
| volume24h: currentPrice * (100000 + Math.random() * 500000) | |
| }; | |
| }); | |
| } | |
| // Add to Watchlist | |
| function addToWatchlist(coinId) { | |
| const coin = CRYPTO_DATA.find(c => c.id === coinId); | |
| if (!coin) return; | |
| // In a real app, this would save to localStorage or backend | |
| alert(`Added ${coin.name} to your watchlist!`); | |
| // Update the star icon | |
| feather.replace(); | |
| } | |
| // Update Market Stats | |
| function updateMarketStats() { | |
| // This would be updated with real API data | |
| const stats = { | |
| marketCap: 2.1 * (1 + Math.random() * 0.02 - 0.01), // Random fluctuation | |
| btcDominance: 52.4 * (1 + Math.random() * 0.005 - 0.0025), | |
| volume24h: 84.2 * (1 + Math.random() * 0.05 - 0.025), | |
| fearGreed: Math.floor(Math.random() * 20 + 70) // Random between 70-90 | |
| }; | |
| // Update DOM elements if they exist | |
| const marketCapEl = document.querySelector('[data-stat="market-cap"]'); | |
| const btcDomEl = document.querySelector('[data-stat="btc-dominance"]'); | |
| const volumeEl = document.querySelector('[data-stat="volume"]'); | |
| const fearGreedEl = document.querySelector('[data-stat="fear-greed"]'); | |
| if (marketCapEl) marketCapEl.textContent = `$${stats.marketCap.toFixed(1)}T`; | |
| if (btcDomEl) btcDomEl.textContent = `${stats.btcDominance.toFixed(1)}%`; | |
| if (volumeEl) volumeEl.textContent = `$${stats.volume24h.toFixed(1)}B`; | |
| if (fearGreedEl) fearGreedEl.textContent = stats.fearGreed; | |
| } | |
| // Initialize when page loads | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Update market stats every 30 seconds | |
| setInterval(updateMarketStats, 30000); | |
| // Initialize tooltips | |
| initTooltips(); | |
| }); | |
| // Initialize Tooltips | |
| function initTooltips() { | |
| const tooltipElements = document.querySelectorAll('[data-tooltip]'); | |
| tooltipElements.forEach(el => { | |
| el.addEventListener('mouseenter', function(e) { | |
| const tooltipText = this.getAttribute('data-tooltip'); | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg'; | |
| tooltip.textContent = tooltipText; | |
| tooltip.style.top = `${e.clientY - 40}px`; | |
| tooltip.style.left = `${e.clientX}px`; | |
| tooltip.id = 'custom-tooltip'; | |
| document.body.appendChild(tooltip); | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| const tooltip = document.getElementById('custom-tooltip'); | |
| if (tooltip) { | |
| tooltip.remove(); | |
| } | |
| }); | |
| }); | |
| } | |
| // Theme Toggle (for future dark mode support) | |
| function toggleTheme() { | |
| const html = document.documentElement; | |
| const currentTheme = html.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| html.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| // Update theme icon | |
| const themeIcon = document.getElementById('theme-icon'); | |
| if (themeIcon) { | |
| themeIcon.setAttribute('data-feather', newTheme === 'dark' ? 'sun' : 'moon'); | |
| feather.replace(); | |
| } | |
| } | |
| // Check for saved theme preference | |
| function loadThemePreference() { | |
| const savedTheme = localStorage.getItem('theme') || 'light'; | |
| document.documentElement.setAttribute('data-theme', savedTheme); | |
| } |