- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Publicación destacada
- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
En
el mundo de las criptomonedas, donde los precios cambian en fracciones de
segundo, contar con una herramienta precisa y actualizada es esencial para
traders, inversores y entusiastas. En este artículo, analizaremos el código de
un rastreador de precios de criptomonedas, que muestra en tiempo real los
valores de las 100 criptomonedas con mayor capitalización de mercado.
Análisis del Código
Este código implementa una interfaz web con HTML,
Tailwind CSS y JavaScript para presentar los precios actualizados de las
criptomonedas. A continuación, se desglosan sus principales componentes:
Estructura HTML
·Encabezado y contenedores: Se utilizan clases de Tailwind CSS para un diseño
limpio y responsivo.
·Selector de moneda de referencia: Permite cambiar la divisa en la que se mostrarán los
precios (USD, EUR, BTC).
·Tabla de criptomonedas: Muestra los datos de cada cripto con columnas para
número, nombre, precio, variación porcentual en 24 horas y capitalización de
mercado.
·Manejo de errores: Un mensaje de alerta aparece si hay problemas con la
carga de datos.
Funcionalidad en JavaScript
Se emplea una clase CryptoTracker para gestionar la
obtención y visualización de los datos. Entre sus funcionalidades clave están:
1. Obtención de datos: Usa la API de CoinGecko a través de un proxy para evitar
problemas de CORS.
2. Actualización
dinámica: Los precios se
actualizan automáticamente cada 5 minutos.
3. Manejo de errores: Si la API no responde, se intentan recuperar datos
almacenados localmente.
4. Renderización de
datos: La tabla se llena
dinámicamente con la información obtenida, incluyendo el logo de cada
criptomoneda.
5. Formateo de valores: Se adapta la presentación de precios y capitalización de
mercado para mejorar la legibilidad.
Código Completo
<!DOCTYPE html><html lang="es"> <head> <meta charset="UTF-8"> <title>Crypto Price Tracker</title> </head> <body class="bg-gray-100"> <div class="container mx-auto px-4 py-8"> <h1 class="text-4xl font-bold text-center mb-8">Top 100 criptomonedas con mayor capitalizacios - Crypto Price Tracker</h1> <div class="flex items-center justify-between mb-4"> <div> <label for="currency-select" class="block text-sm font-medium text-gray-700"> Moneda de Referencia </label> <select id="currency-select" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> <option value="usd">USD</option> <option value="eur">EUR</option> <option value="btc">BTC</option> </select> </div> <div class="text-sm text-gray-500"> Última actualización: <span id="last-update">--/--/---- --:--</span> </div> </div> <!-- Mensaje de error --> <div id="error-message" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative hidden" role="alert"> <strong class="font-bold">Error: </strong> <span id="error-text" class="block sm:inline"></span> </div> <div class="bg-white shadow-md rounded-lg overflow-hidden mt-4"> <table class="min-w-full leading-normal" id="crypto-table"> <thead> <tr> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">#</th> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Nombre</th> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Precio</th> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">24h %</th> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Cap. Mercado</th> </tr> </thead> <tbody id="crypto-list"> <!-- Datos se insertarán dinámicamente --> </tbody> </table> </div> </div> <script> class CryptoTracker { constructor() { this.apiUrl = 'https://api.coingecko.com/api/v3/coins/markets'; this.tableBody = document.getElementById('crypto-list'); this.currencySelect = document.getElementById('currency-select'); this.lastUpdateElement = document.getElementById('last-update'); this.errorMessageEl = document.getElementById('error-message'); this.errorTextEl = document.getElementById('error-text'); this.currencySelect.addEventListener('change', () => this.fetchCryptos()); // Inicializar con USD this.currentCurrency = 'usd'; this.fetchCryptos(); // Actualizar cada 5 minutos this.intervalId = setInterval(() => this.fetchCryptos(), 5 * 60 * 1000); } async fetchCryptos() { try { // Usar proxy para evitar problemas de CORS const proxyUrl = 'https://api.allorigins.win/get?url='; const encodedUrl = encodeURIComponent(`${this.apiUrl}?vs_currency=${this.currencySelect.value}&order=market_cap_desc&per_page=100&page=1&sparkline=false`); const response = await fetch(proxyUrl + encodedUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, timeout: 10000 // 10 segundos de timeout }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); let cryptos; // Manejar respuesta de AllOrigins try { cryptos = JSON.parse(data.contents); } catch (parseError) { console.error('Error parsing JSON:', parseError); throw new Error('No se pueden procesar los datos de criptomonedas'); } // Guardar en localStorage localStorage.setItem('cryptoData', JSON.stringify({ timestamp: Date.now(), data: cryptos })); this.hideError(); this.renderCryptos(cryptos); this.updateLastUpdateTime(); } catch (error) { console.error('Error fetching crypto data:', error); this.showError(error.message); this.loadLocalStorageData(); } } showError(message) { this.errorTextEl.textContent = message; this.errorMessageEl.classList.remove('hidden'); } hideError() { this.errorMessageEl.classList.add('hidden'); } loadLocalStorageData() { const storedData = JSON.parse(localStorage.getItem('cryptoData')); if (storedData) { const hourAgo = Date.now() - (60 * 60 * 1000); if (storedData.timestamp > hourAgo) { this.renderCryptos(storedData.data); this.updateLastUpdateTime(new Date(storedData.timestamp)); // Mostrar mensaje de datos en caché this.showError('Mostrando datos guardados. Comprueba tu conexión a internet.'); } else { this.showError('Los datos guardados están desactualizados. No se puede cargar la información.'); } } else { this.showError('No hay datos disponibles. Comprueba tu conexión a internet.'); } } updateLastUpdateTime(date = new Date()) { this.lastUpdateElement.textContent = date.toLocaleString(); } renderCryptos(cryptos) { this.tableBody.innerHTML = ''; cryptos.forEach((crypto, index) => { const changeColor = crypto.price_change_percentage_24h >= 0 ? 'text-green-600' : 'text-red-600'; const row = document.createElement('tr'); row.innerHTML = ` <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${index + 1}</td> <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div class="flex items-center"> <img src="${crypto.image}" alt="${crypto.name}" class="w-8 h-8 mr-3"> <div> <p class="text-gray-900 font-bold">${crypto.name}</p> <p class="text-gray-600 text-xs">${crypto.symbol.toUpperCase()}</p> </div> </div> </td> <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> ${this.formatCurrency(crypto.current_price, this.currencySelect.value)} </td> <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <span class="${changeColor}"> ${crypto.price_change_percentage_24h.toFixed(2)}% </span> </td> <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm"> ${this.formatMarketCap(crypto.market_cap)} </td> `; this.tableBody.appendChild(row); }); } formatCurrency(value, currency) { const currencySymbols = { 'usd': '$', 'eur': '€', 'btc': '₿' }; return `${currencySymbols[currency]} ${value.toLocaleString()}`; } formatMarketCap(marketCap) { return `$${(marketCap / 1_000_000_000).toFixed(2)} B`; } } // Inicializar el rastreador de criptomonedas document.addEventListener('DOMContentLoaded', () => new CryptoTracker()); </script> </body> </html>
Figure 1. Seguimiento Dinámico de las 100 Principales Criptomonedas - sybcodex.com
Conclusión
Este rastreador de criptomonedas proporciona una forma
intuitiva y eficiente de seguir la evolución del mercado. Gracias al uso de la
API de CoinGecko, la integración con Tailwind CSS y las buenas prácticas en
manejo de errores y almacenamiento local, esta aplicación se convierte en una
herramienta valiosa para cualquier usuario interesado en el ecosistema cripto.
Si buscas una solución escalable y personalizable, este
código puede servir como base para desarrollar una versión más avanzada,
agregando gráficos, alertas y funciones de análisis de tendencias. ¡El mundo de
las criptomonedas nunca duerme y con este rastreador, estarás siempre
informado! 🚀
Aviso sobre el contenido
Este contenido es
difundido con el objetivo de informar, entretener a las y a los internautas con
temas variados de la vida y algunos datos curiosos del ciber espacio.
Es
importante señalar que el contenido de este artículo tiene un enfoque
informativo y de entretenimiento, por lo que podría contener información que no
es verídica. Por esta razón, si tienes la intención de utilizar esta
publicación para hacer trabajos académicos o investigaciones, te recomiendo
encarecidamente que realices una exhaustiva investigación adicional. Es
fundamental que filtres los contenidos y verifiques la información mediante
fuentes académicas confiables, como revistas científicas y repositorios de alta
credibilidad.
El
contenido aquí proporcionado no pretende sustituir el asesoramiento, guía o
enseñanza proporcionada por profesionales o instituciones especializadas.
Cualquier decisión o acción tomada por los lectores o usuarios con base en la
información presentada en este contenido es responsabilidad exclusiva de cada
individuo.
Descargo
de Responsabilidad sobre Contenido Financiero
La
información proporcionada en este sitio web o en cualquier otro medio de
comunicación tiene únicamente fines informativos y educativos. No constituye
asesoramiento financiero, legal, fiscal o de inversión. Los contenidos
presentados aquí no deben ser interpretados como una recomendación, oferta o
solicitud para comprar, vender o invertir en ningún producto financiero, valor
o instrumento.
Toda
la información contenida en este sitio se presenta "tal cual", sin
garantías de precisión, integridad o actualidad. Si bien nos esforzamos por
mantener la información actualizada y precisa, no asumimos ninguna
responsabilidad por cualquier error u omisión. Los datos históricos de
rendimiento no garantizan resultados futuros, y las inversiones siempre
conllevan riesgos, pudiendo resultar en pérdidas de capital.
Antes
de tomar cualquier decisión financiera o de inversión, se recomienda
encarecidamente consultar con asesores financieros calificados que puedan
evaluar tus circunstancias particulares y ofrecer recomendaciones adecuadas a
tu perfil de riesgo y objetivos financieros.
Referencias
DALL·E (openai, 2025). Ilustración de este artículo. [Figure 1]. Generado en https://chatgpt.com/
MDN Web Docs. (2023). JavaScript Classes. Mozilla Foundation. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Tailwind Labs. (2023). Tailwind CSS Utility-First Best Practices. https://tailwindcss.com/docs/best-practices
World Wide Web Consortium. (2023). WAI-ARIA Authoring Practices. https://www.w3.org/TR/wai-aria-practices-1.2/
Redactor: Sybcodex (Joel
Sotelo Bustamante)
Categoría: Finanzas
Título del artículo: Código para el Seguimiento Dinámico de
las 100 Principales Criptomonedas
Número de edición: 1.0
Escrito en el año: 2025
-----------------------------------------------
Tienda online de libros: 👉 Book Sh💓p
©Todos
los derechos reservados al autor.
crypto tracker dinamico
educación financiera
gestión errores criptomonedas
JavaScript crypto API
top 100 cripto
tracker tiempo real cripto
- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Comentarios
Publicar un comentario