Publicación destacada

Código para el Seguimiento Dinámico de las 100 Principales Criptomonedas

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
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/


CoinGecko. (2023). API Documentation - Markets endpoint. https://www.coingecko.com/en/api/documentation


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.


Comentarios

Nuestras redes sociales

Entradas relacionadas

Contenido relacionado