Vamos a crear una sencilla web en HTML, CSS y JavaScript que muestre las criptomonedas del top con nombre, s\u00edmbolo, precio, capitalizaci\u00f3n de mercado (market cap), posici\u00f3n y suministro (supply).<\/p>\n\n\n\n
Primero, crearemos una estructura b\u00e1sica en HTML:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Top Criptomonedas<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Top Criptomonedas<\/h1>\n <table id=\"crypto-table\">\n <thead>\n <tr>\n <th>Posici\u00f3n<\/th>\n <th>Nombre<\/th>\n <th>S\u00edmbolo<\/th>\n <th>Precio<\/th>\n <th>Market Cap<\/th>\n <th>Suministro<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- Aqu\u00ed se insertar\u00e1n las criptomonedas con JavaScript -->\n <\/tbody>\n <\/table>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nPaso 2: CSS<\/h3>\n\n\n\n
A\u00f1adiremos estilos b\u00e1sicos con CSS para darle un poco de dise\u00f1o a nuestra tabla:<\/p>\n\n\n\n
\/* styles.css *\/\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n}\n\n.container {\n width: 80%;\n margin: auto;\n overflow: hidden;\n}\n\nh1 {\n text-align: center;\n margin-top: 20px;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0;\n box-shadow: 0 2px 3px rgba(0,0,0,0.1);\n background-color: #fff;\n}\n\nth, td {\n padding: 10px;\n text-align: left;\n border: 1px solid #ddd;\n}\n\nth {\n background-color: #f2f2f2;\n}\n\ntr:nth-child(even) {\n background-color: #f9f9f9;\n}\n<\/code><\/pre>\n\n\n\nPaso 3: JavaScript<\/h3>\n\n\n\n
Finalmente, usaremos JavaScript para obtener datos de la API de CoinGecko y mostrarlos en nuestra tabla:<\/p>\n\n\n\n
\/\/ script.js\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n const API_URL = \"https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1\";\n\n fetch(API_URL)\n .then(response => response.json())\n .then(data => {\n const tableBody = document.querySelector(\"#crypto-table tbody\");\n data.forEach((crypto, index) => {\n const row = document.createElement(\"tr\");\n\n const cellPosition = document.createElement(\"td\");\n cellPosition.textContent = index + 1;\n row.appendChild(cellPosition);\n\n const cellName = document.createElement(\"td\");\n cellName.textContent = crypto.name;\n row.appendChild(cellName);\n\n const cellSymbol = document.createElement(\"td\");\n cellSymbol.textContent = crypto.symbol.toUpperCase();\n row.appendChild(cellSymbol);\n\n const cellPrice = document.createElement(\"td\");\n cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;\n row.appendChild(cellPrice);\n\n const cellMarketCap = document.createElement(\"td\");\n cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;\n row.appendChild(cellMarketCap);\n\n const cellSupply = document.createElement(\"td\");\n cellSupply.textContent = crypto.circulating_supply.toLocaleString();\n row.appendChild(cellSupply);\n\n tableBody.appendChild(row);\n });\n })\n .catch(error => {\n console.error(\"Error al obtener los datos:\", error);\n });\n});\n<\/code><\/pre>\n\n\n\nResumen<\/h3>\n\n\n\n\n- HTML<\/strong>: Crea la estructura b\u00e1sica de la p\u00e1gina.<\/li>\n\n\n\n
- CSS<\/strong>: Estiliza la p\u00e1gina y la tabla.<\/li>\n\n\n\n
- JavaScript<\/strong>: Obtiene datos de la API y los inserta en la tabla.<\/li>\n<\/ul>\n\n\n\n
Este es un punto de partida simple, pero puedes expandirlo a\u00f1adiendo m\u00e1s estilos, funcionalidades, o mejorando la interfaz de usuario seg\u00fan tus necesidades.<\/p>\n\n\n\n
API de Coingecko<\/h3>\n\n\n\n
La API de CoinGecko es una interfaz que permite a los desarrolladores acceder a datos de criptomonedas, NFTs y otros activos digitales a trav\u00e9s de endpoints RESTful que devuelven datos en formato JSON. Puedes explorarla directamente desde tu navegador para entender qu\u00e9 contiene y c\u00f3mo funciona.<\/p>\n\n\n\n
Pasos para explorar la API de CoinGecko:<\/h3>\n\n\n\n\n- Visita la documentaci\u00f3n de la API de CoinGecko<\/strong>: Puedes encontrar la documentaci\u00f3n completa en el siguiente enlace: [CoinGecko API Documentation](https:\/\/www.coingecko.com\/en\/api).<\/li>\n\n\n\n
- Prueba los endpoints<\/strong>: La documentaci\u00f3n ofrece una secci\u00f3n de \u00abTry It!\u00bb donde puedes probar diferentes endpoints y ver las respuestas que devuelven. Esto te ayudar\u00e1 a entender qu\u00e9 datos puedes obtener y c\u00f3mo formatear tus solicitudes.<\/li>\n\n\n\n
- Consulta los endpoints disponibles<\/strong>: La API de CoinGecko ofrece una variedad de endpoints para diferentes tipos de datos, como precios actuales, datos hist\u00f3ricos, informaci\u00f3n de mercado, datos de NFTs, y m\u00e1s. Puedes explorar estos endpoints en la documentaci\u00f3n para ver qu\u00e9 informaci\u00f3n est\u00e1 disponible.<\/li>\n\n\n\n
- Obt\u00e9n una clave API (opcional)<\/strong>: Si planeas usar la API para un proyecto m\u00e1s serio o comercial, puedes registrarte en CoinGecko y obtener una clave API para aumentar tus l\u00edmites de uso y acceder a endpoints exclusivos.<\/li>\n<\/ol>\n\n\n\n
Ejemplo de solicitud<\/h3>\n\n\n\n
Aqu\u00ed tienes un ejemplo de c\u00f3mo podr\u00edas hacer una solicitud simple para obtener los datos de una criptomoneda espec\u00edfica:<\/p>\n\n\n\n
curl -H \"Accept: application\/json\" \"https:\/\/api.coingecko.com\/api\/v3\/coins\/bitcoin\"<\/code><\/pre>\n\n\n\nEsta solicitud devolver\u00e1 un objeto JSON con informaci\u00f3n detallada sobre Bitcoin, incluyendo su precio actual, capitalizaci\u00f3n de mercado, suministro circulante, y m\u00e1s.<\/p>\n\n\n\n
Resumen<\/h3>\n\n\n\n
Explorar la API de CoinGecko directamente desde tu navegador te permitir\u00e1 entender mejor los datos disponibles y c\u00f3mo formatear tus solicitudes. Puedes probar diferentes endpoints y ver las respuestas que devuelven para familiarizarte con la API antes de integrarla en tu proyecto.<\/p>\n\n\n\n
Aqu\u00ed tienes una gu\u00eda detallada sobre c\u00f3mo utilizar la API de CoinGecko, junto con algunos ejemplos de endpoints:<\/p>\n\n\n\n
1. Obtener una clave API (opcional)<\/strong><\/h3>\n\n\n\nPara usar algunos endpoints exclusivos o aumentar tus l\u00edmites de uso, puedes registrarte en CoinGecko y obtener una clave API. Esto es opcional para la mayor\u00eda de los endpoints p\u00fablicos.<\/p>\n\n\n\n
2. Explorar la documentaci\u00f3n de la API<\/strong><\/h3>\n\n\n\nVisita la documentaci\u00f3n de la API de CoinGecko para obtener informaci\u00f3n detallada sobre los endpoints disponibles, par\u00e1metros, y ejemplos de uso.<\/p>\n\n\n\n
3. Ejemplos de endpoints<\/strong><\/h3>\n\n\n\nEndpoint para obtener datos de una criptomoneda espec\u00edfica<\/strong><\/h4>\n\n\n\ncurl -H \"Accept: application\/json\" \"https:\/\/api.coingecko.com\/api\/v3\/coins\/bitcoin\"<\/code><\/pre>\n\n\n\nEste endpoint devuelve informaci\u00f3n detallada sobre Bitcoin, incluyendo su precio actual, capitalizaci\u00f3n de mercado, suministro circulante, y m\u00e1s.<\/p>\n\n\n\n
Endpoint para obtener datos de varias criptomonedas<\/strong><\/h4>\n\n\n\ncurl -H \"Accept: application\/json\" \"https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1\"<\/code><\/pre>\n\n\n\nEste endpoint devuelve una lista de las 10 criptomonedas con mayor capitalizaci\u00f3n de mercado en USD.<\/p>\n\n\n\n
Endpoint para obtener datos hist\u00f3ricos<\/strong><\/h4>\n\n\n\ncurl -H \"Accept: application\/json\" \"https:\/\/api.coingecko.com\/api\/v3\/coins\/bitcoin\/market_chart?vs_currency=usd&days=30\"<\/code><\/pre>\n\n\n\nEste endpoint devuelve datos hist\u00f3ricos de Bitcoin por los \u00faltimos 30 d\u00edas.<\/p>\n\n\n\n
Endpoint para obtener datos de NFTs<\/strong><\/h4>\n\n\n\ncurl -H \"Accept: application\/json\" \"https:\/\/api.coingecko.com\/api\/v3\/nfts\/collection\/0x06012c8cf97bead5deae237070f9587f8e6d9748\"<\/code><\/pre>\n\n\n\nEste endpoint devuelve informaci\u00f3n sobre una colecci\u00f3n de NFTs espec\u00edfica.<\/p>\n\n\n\n
4. Probar los endpoints<\/strong><\/h3>\n\n\n\nPuedes probar estos endpoints directamente desde tu navegador o utilizando herramientas como Postman o cURL. Simplemente copia y pega la URL en tu navegador o en la herramienta de tu elecci\u00f3n para ver la respuesta en formato JSON.<\/p>\n\n\n\n
5. Integrar la API en tu proyecto<\/strong><\/h3>\n\n\n\nPara integrar la API en tu proyecto, puedes usar lenguajes de programaci\u00f3n como Python, JavaScript, o cualquier otro lenguaje que prefieras. Aqu\u00ed tienes un ejemplo en JavaScript:<\/p>\n\n\n\n
fetch(\"https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1\")\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(error => {\n console.error(\"Error al obtener los datos:\", error);\n });<\/code><\/pre>\n\n\n\nResumen<\/h3>\n\n\n\n
La API de CoinGecko ofrece una amplia gama de endpoints para obtener datos de criptomonedas, NFTs y otros activos digitales. Puedes explorar la documentaci\u00f3n y probar los endpoints directamente desde tu navegador para entender mejor c\u00f3mo funcionan y qu\u00e9 datos puedes obtener.<\/p>\n\n\n\n
Ejemplos de Endpoints \u00datiles<\/h3>\n\n\n\n1. Obtener las monedas del mercado<\/strong><\/h4>\n\n\n\nhttps://api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd<\/code><\/pre>\n\n\n\nEsta URL te devolver\u00e1 una lista de las criptomonedas con datos de mercado b\u00e1sicos como precio, volumen y capitalizaci\u00f3n. Puedes personalizar esta URL con m\u00e1s par\u00e1metros como order<\/code>, per_page<\/code>, y page<\/code> para ajustar los resultados. Por ejemplo:<\/p>\n\n\n\nhttps://api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1<\/code><\/pre>\n\n\n\n2. Obtener los detalles de una criptomoneda espec\u00edfica<\/strong><\/h4>\n\n\n\nhttps://api.coingecko.com\/api\/v3\/coins\/bitcoin<\/code><\/pre>\n\n\n\nEsta URL te devolver\u00e1 detalles completos sobre Bitcoin.<\/p>\n\n\n\n
3. Obtener datos hist\u00f3ricos de una criptomoneda<\/strong><\/h4>\n\n\n\nhttps://api.coingecko.com\/api\/v3\/coins\/bitcoin\/market_chart?vs_currency=usd&days=30<\/code><\/pre>\n\n\n\nEsta URL te devolver\u00e1 datos hist\u00f3ricos del precio de Bitcoin durante los \u00faltimos 30 d\u00edas.<\/p>\n\n\n\n
Exploraci\u00f3n en el Navegador<\/h3>\n\n\n\n
Puedes copiar y pegar cualquiera de estas URLs directamente en tu navegador para ver los resultados en formato JSON. Esto te ayudar\u00e1 a explorar los datos disponibles y c\u00f3mo se estructuran antes de utilizarlos en tu proyecto.<\/p>\n\n\n\n
Por ejemplo:<\/p>\n\n\n\n
\n- https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1 (Para obtener las 10 principales criptomonedas ordenadas por capitalizaci\u00f3n de mercado en USD)<\/li>\n\n\n\n
- https:\/\/api.coingecko.com\/api\/v3\/coins\/bitcoin (Para obtener informaci\u00f3n detallada sobre Bitcoin)<\/li>\n<\/ul>\n\n\n\n
Estas URLs deber\u00edan mostrarte el JSON directamente en tu navegador, donde podr\u00e1s inspeccionarlo y ver qu\u00e9 tipo de datos puedes extraer.<\/p>\n\n\n\n
Actualizando la web<\/h3>\n\n\n\n
Para asegurarte de que los precios de las criptomonedas se actualicen cada vez que refresques la p\u00e1gina, debes asegurarte de que el script JavaScript haga una nueva solicitud a la API de CoinGecko cada vez que se cargue la p\u00e1gina. Aqu\u00ed tienes algunos pasos y sugerencias para hacerlo:<\/p>\n\n\n\n
\n- Verifica que el <\/strong>
fetch<\/code> se ejecuta cada vez que se carga la p\u00e1gina<\/strong>: Aseg\u00farate de que el c\u00f3digo fetch<\/code> est\u00e1 dentro del bloque DOMContentLoaded<\/code>, de modo que se ejecute cada vez que se cargue el DOM.<\/li>\n\n\n\n- Cach\u00e9 del navegador<\/strong>: Aseg\u00farate de que el navegador no est\u00e9 utilizando datos en cach\u00e9. Puedes agregar un par\u00e1metro \u00fanico a la URL de la API para evitar el cach\u00e9 del navegador.<\/li>\n\n\n\n
- Verifica la respuesta de la API<\/strong>: Aseg\u00farate de que la API de CoinGecko est\u00e1 devolviendo datos actualizados y que no hay errores en la solicitud.<\/li>\n<\/ol>\n\n\n\n
Aqu\u00ed tienes una versi\u00f3n actualizada del script.js<\/code>:<\/h2>\n\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n \/\/ URL de la API para obtener datos de mercado de criptomonedas\n const API_URL = \"https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1\";\n\n \/\/ Funci\u00f3n para actualizar la tabla de criptomonedas\n function actualizarTabla() {\n fetch(API_URL)\n .then(response => response.json())\n .then(data => {\n const tableBody = document.querySelector(\"#crypto-table tbody\");\n \/\/ Limpiar el contenido anterior\n tableBody.innerHTML = \"\";\n \/\/ Iterar sobre los datos y agregar filas a la tabla\n data.forEach((crypto, index) => {\n const row = document.createElement(\"tr\");\n\n const cellPosition = document.createElement(\"td\");\n cellPosition.textContent = index + 1;\n row.appendChild(cellPosition);\n\n const cellName = document.createElement(\"td\");\n cellName.textContent = crypto.name;\n row.appendChild(cellName);\n\n const cellSymbol = document.createElement(\"td\");\n cellSymbol.textContent = crypto.symbol.toUpperCase();\n row.appendChild(cellSymbol);\n\n const cellPrice = document.createElement(\"td\");\n cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;\n row.appendChild(cellPrice);\n\n const cellMarketCap = document.createElement(\"td\");\n cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;\n row.appendChild(cellMarketCap);\n\n const cellSupply = document.createElement(\"td\");\n cellSupply.textContent = crypto.circulating_supply.toLocaleString();\n row.appendChild(cellSupply);\n\n tableBody.appendChild(row);\n });\n })\n .catch(error => {\n console.error(\"Error al obtener los datos:\", error);\n });\n }\n\n \/\/ Llamar a la funci\u00f3n para actualizar la tabla cuando se cargue la p\u00e1gina\n actualizarTabla();\n});<\/code><\/pre>\n\n\n\nA\u00f1adir un par\u00e1metro \u00fanico para evitar el cach\u00e9:<\/h3>\n\n\n\n
Una t\u00e9cnica com\u00fan para evitar la cach\u00e9 del navegador es agregar un par\u00e1metro de tiempo a la URL de la API. Aqu\u00ed tienes c\u00f3mo hacerlo:<\/p>\n\n\n\n
const API_URL = `https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&_=${new Date().getTime()}`;<\/code><\/pre>\n\n\n\nEsto asegura que cada solicitud tenga una URL \u00fanica y que el navegador no use datos en cach\u00e9.<\/p>\n\n\n\n
Resumen<\/h3>\n\n\n\n
Cada vez que recargues la p\u00e1gina, el script fetch<\/code> har\u00e1 una nueva solicitud a la API de CoinGecko y actualizar\u00e1 la tabla con los datos m\u00e1s recientes. Esto deber\u00eda resolver el problema de los precios que no se actualizan.<\/p>\n\n\n\nVamos a agregar un formulario a tu p\u00e1gina web que te permita especificar cu\u00e1ntas criptomonedas mostrar y tambi\u00e9n buscar por el nombre o s\u00edmbolo de una criptomoneda espec\u00edfica.<\/p>\n\n\n\n
Paso 1: Actualizar el HTML<\/h3>\n\n\n\n
Vamos a a\u00f1adir un formulario en la parte superior de la p\u00e1gina para que el usuario pueda ingresar el n\u00famero de criptomonedas a mostrar o buscar una criptomoneda espec\u00edfica.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Top Criptomonedas<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Top Criptomonedas<\/h1>\n <form id=\"crypto-form\">\n <label for=\"number\">N\u00famero de Criptomonedas:<\/label>\n <input type=\"number\" id=\"number\" name=\"number\" min=\"1\" max=\"250\" value=\"10\">\n <label for=\"search\">Nombre o S\u00edmbolo:<\/label>\n <input type=\"text\" id=\"search\" name=\"search\">\n <button type=\"submit\">Buscar<\/button>\n <\/form>\n <table id=\"crypto-table\">\n <thead>\n <tr>\n <th>Posici\u00f3n<\/th>\n <th>Nombre<\/th>\n <th>S\u00edmbolo<\/th>\n <th>Precio<\/th>\n <th>Market Cap<\/th>\n <th>Suministro<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- Aqu\u00ed se insertar\u00e1n las criptomonedas con JavaScript -->\n <\/tbody>\n <\/table>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nPaso 2: Actualizar el CSS<\/h3>\n\n\n\n
A\u00f1ade algunos estilos b\u00e1sicos para el formulario.<\/p>\n\n\n\n
\/* styles.css *\/\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n}\n\n.container {\n width: 80%;\n margin: auto;\n overflow: hidden;\n}\n\nh1 {\n text-align: center;\n margin-top: 20px;\n}\n\nform {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\nlabel {\n margin: 0 10px;\n}\n\ninput {\n margin: 0 10px;\n padding: 5px;\n}\n\nbutton {\n padding: 5px 10px;\n cursor: pointer;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0;\n box-shadow: 0 2px 3px rgba(0,0,0,0.1);\n background-color: #fff;\n}\n\nth, td {\n padding: 10px;\n text-align: left;\n border: 1px solid #ddd;\n}\n\nth {\n background-color: #f2f2f2;\n}\n\ntr:nth-child(even) {\n background-color: #f9f9f9;\n}<\/code><\/pre>\n\n\n\nPaso 3: Actualizar el JavaScript<\/h3>\n\n\n\n
Vamos a actualizar el script para manejar el formulario y hacer la b\u00fasqueda.<\/p>\n\n\n\n
document.addEventListener(\"DOMContentLoaded\", function() {\n const form = document.querySelector(\"#crypto-form\");\n const numberInput = document.querySelector(\"#number\");\n const searchInput = document.querySelector(\"#search\");\n const tableBody = document.querySelector(\"#crypto-table tbody\");\n\n form.addEventListener(\"submit\", function(event) {\n event.preventDefault();\n const number = numberInput.value;\n const search = searchInput.value.trim().toLowerCase();\n actualizarTabla(number, search);\n });\n\n function actualizarTabla(number, search) {\n let API_URL = `https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=${number}&page=1&_=${new Date().getTime()}`;\n \n fetch(API_URL)\n .then(response => response.json())\n .then(data => {\n \/\/ Filtrar los resultados si se proporciona un t\u00e9rmino de b\u00fasqueda\n if (search) {\n data = data.filter(crypto => crypto.name.toLowerCase().includes(search) || crypto.symbol.toLowerCase().includes(search));\n }\n\n tableBody.innerHTML = \"\";\n \n data.forEach((crypto, index) => {\n const row = document.createElement(\"tr\");\n\n const cellPosition = document.createElement(\"td\");\n cellPosition.textContent = index + 1;\n row.appendChild(cellPosition);\n\n const cellName = document.createElement(\"td\");\n cellName.textContent = crypto.name;\n row.appendChild(cellName);\n\n const cellSymbol = document.createElement(\"td\");\n cellSymbol.textContent = crypto.symbol.toUpperCase();\n row.appendChild(cellSymbol);\n\n const cellPrice = document.createElement(\"td\");\n cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;\n row.appendChild(cellPrice);\n\n const cellMarketCap = document.createElement(\"td\");\n cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;\n row.appendChild(cellMarketCap);\n\n const cellSupply = document.createElement(\"td\");\n cellSupply.textContent = crypto.circulating_supply.toLocaleString();\n row.appendChild(cellSupply);\n\n tableBody.appendChild(row);\n });\n })\n .catch(error => {\n console.error(\"Error al obtener los datos:\", error);\n });\n }\n\n \/\/ Llamar a la funci\u00f3n para actualizar la tabla al cargar la p\u00e1gina por primera vez\n actualizarTabla(numberInput.value, \"\");\n});<\/code><\/pre>\n\n\n\nResumen<\/h3>\n\n\n\n\n- Formulario en HTML<\/strong>: Permite al usuario especificar el n\u00famero de criptomonedas a mostrar o buscar por nombre\/s\u00edmbolo.<\/li>\n\n\n\n
- Estilo en CSS<\/strong>: A\u00f1ade estilos para el formulario y la tabla.<\/li>\n\n\n\n
- L\u00f3gica en JavaScript<\/strong>: Actualiza la tabla seg\u00fan el n\u00famero de criptomonedas o el t\u00e9rmino de b\u00fasqueda proporcionado por el usuario.<\/li>\n<\/ul>\n\n\n\n
Ahora, tu p\u00e1gina web permitir\u00e1 al usuario seleccionar el n\u00famero de criptomonedas a mostrar y buscar por nombre o s\u00edmbolo, asegur\u00e1ndose de que los datos se actualicen correctamente.<\/p>\n\n\n\n
Vamos a a\u00f1adir la funcionalidad de ordenar las criptomonedas por cada columna al pulsar en los encabezados de la tabla. Esto permitir\u00e1 a los usuarios ordenar las criptomonedas seg\u00fan posici\u00f3n, nombre, s\u00edmbolo, precio, capitalizaci\u00f3n de mercado y suministro.<\/p>\n\n\n\n
Paso 1: Actualizar el HTML<\/h3>\n\n\n\n
Aseg\u00farate de que tus encabezados de tabla tengan identificadores (id<\/code>) para cada columna que desees ordenar.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Top Criptomonedas<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Top Criptomonedas<\/h1>\n <form id=\"crypto-form\">\n <label for=\"number\">N\u00famero de Criptomonedas:<\/label>\n <input type=\"number\" id=\"number\" name=\"number\" min=\"1\" max=\"250\" value=\"10\">\n <label for=\"search\">Nombre o S\u00edmbolo:<\/label>\n <input type=\"text\" id=\"search\" name=\"search\">\n <button type=\"submit\">Buscar<\/button>\n <\/form>\n <table id=\"crypto-table\">\n <thead>\n <tr>\n <th id=\"position-header\">Posici\u00f3n<\/th>\n <th id=\"name-header\">Nombre<\/th>\n <th id=\"symbol-header\">S\u00edmbolo<\/th>\n <th id=\"price-header\">Precio<\/th>\n <th id=\"marketcap-header\">Market Cap<\/th>\n <th id=\"supply-header\">Suministro<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- Aqu\u00ed se insertar\u00e1n las criptomonedas con JavaScript -->\n <\/tbody>\n <\/table>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nPaso 2: Actualizar el JavaScript<\/h3>\n\n\n\n
A\u00f1adiremos l\u00f3gica para ordenar los datos y actualizar la tabla cuando se haga clic en los encabezados de las columnas.<\/p>\n\n\n\n
document.addEventListener(\"DOMContentLoaded\", function() {\n const form = document.querySelector(\"#crypto-form\");\n const numberInput = document.querySelector(\"#number\");\n const searchInput = document.querySelector(\"#search\");\n const tableBody = document.querySelector(\"#crypto-table tbody\");\n\n let cryptoData = []; \/\/ Para almacenar los datos de criptomonedas\n let currentSortColumn = 'position';\n let currentSortOrder = 'asc';\n\n form.addEventListener(\"submit\", function(event) {\n event.preventDefault();\n const number = numberInput.value;\n const search = searchInput.value.trim().toLowerCase();\n actualizarTabla(number, search);\n });\n\n function actualizarTabla(number, search) {\n const API_URL = `https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=${number}&page=1&_=${new Date().getTime()}`;\n \n fetch(API_URL)\n .then(response => response.json())\n .then(data => {\n cryptoData = data; \/\/ Guardar datos para ordenarlos m\u00e1s tarde\n if (search) {\n cryptoData = cryptoData.filter(crypto => crypto.name.toLowerCase().includes(search) || crypto.symbol.toLowerCase().includes(search));\n }\n renderTable();\n })\n .catch(error => {\n console.error(\"Error al obtener los datos:\", error);\n });\n }\n\n function renderTable() {\n tableBody.innerHTML = \"\";\n\n const sortedData = sortData(cryptoData, currentSortColumn, currentSortOrder);\n sortedData.forEach((crypto, index) => {\n const row = document.createElement(\"tr\");\n\n const cellPosition = document.createElement(\"td\");\n cellPosition.textContent = index + 1;\n row.appendChild(cellPosition);\n\n const cellName = document.createElement(\"td\");\n cellName.textContent = crypto.name;\n row.appendChild(cellName);\n\n const cellSymbol = document.createElement(\"td\");\n cellSymbol.textContent = crypto.symbol.toUpperCase();\n row.appendChild(cellSymbol);\n\n const cellPrice = document.createElement(\"td\");\n cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;\n row.appendChild(cellPrice);\n\n const cellMarketCap = document.createElement(\"td\");\n cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;\n row.appendChild(cellMarketCap);\n\n const cellSupply = document.createElement(\"td\");\n cellSupply.textContent = crypto.circulating_supply.toLocaleString();\n row.appendChild(cellSupply);\n\n tableBody.appendChild(row);\n });\n }\n\n function sortData(data, column, order) {\n const sortedData = [...data];\n sortedData.sort((a, b) => {\n let compareA, compareB;\n\n switch (column) {\n case 'position':\n compareA = a.market_cap_rank;\n compareB = b.market_cap_rank;\n break;\n case 'name':\n compareA = a.name.toLowerCase();\n compareB = b.name.toLowerCase();\n break;\n case 'symbol':\n compareA = a.symbol.toLowerCase();\n compareB = b.symbol.toLowerCase();\n break;\n case 'price':\n compareA = a.current_price;\n compareB = b.current_price;\n break;\n case 'marketcap':\n compareA = a.market_cap;\n compareB = b.market_cap;\n break;\n case 'supply':\n compareA = a.circulating_supply;\n compareB = b.circulating_supply;\n break;\n default:\n compareA = a.market_cap_rank;\n compareB = b.market_cap_rank;\n }\n\n if (compareA < compareB) return order === 'asc' ? -1 : 1;\n if (compareA > compareB) return order === 'asc' ? 1 : -1;\n return 0;\n });\n return sortedData;\n }\n\n document.querySelector(\"#position-header\").addEventListener(\"click\", function() {\n toggleSort('position');\n });\n\n document.querySelector(\"#name-header\").addEventListener(\"click\", function() {\n toggleSort('name');\n });\n\n document.querySelector(\"#symbol-header\").addEventListener(\"click\", function() {\n toggleSort('symbol');\n });\n\n document.querySelector(\"#price-header\").addEventListener(\"click\", function() {\n toggleSort('price');\n });\n\n document.querySelector(\"#marketcap-header\").addEventListener(\"click\", function() {\n toggleSort('marketcap');\n });\n\n document.querySelector(\"#supply-header\").addEventListener(\"click\", function() {\n toggleSort('supply');\n });\n\n function toggleSort(column) {\n if (currentSortColumn === column) {\n currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';\n } else {\n currentSortColumn = column;\n currentSortOrder = 'asc';\n }\n renderTable();\n }\n\n \/\/ Llamar a la funci\u00f3n para actualizar la tabla al cargar la p\u00e1gina por primera vez\n actualizarTabla(numberInput.value, \"\");\n});<\/code><\/pre>\n\n\n\nResumen<\/h3>\n\n\n\n\n- HTML<\/strong>: A\u00f1ade identificadores (
id<\/code>) a los encabezados de las columnas.<\/li>\n\n\n\n- JavaScript<\/strong>: Implementa la l\u00f3gica para ordenar los datos y actualizar la tabla cuando se hace clic en los encabezados de las columnas.<\/li>\n<\/ul>\n\n\n\n
Esto te permitir\u00e1 ordenar las criptomonedas seg\u00fan cada columna (posici\u00f3n, nombre, s\u00edmbolo, precio, capitalizaci\u00f3n de mercado y suministro) al hacer clic en los encabezados de la tabla.<\/p>\n\n\n\n
Aqu\u00ed tienes c\u00f3mo quedar\u00edan los tres archivos completos (HTML, CSS y JavaScript) con las funcionalidades actualizadas, incluyendo la b\u00fasqueda y la capacidad de ordenar por columnas.<\/p>\n\n\n\n
Archivo HTML (index.html):<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Top Criptomonedas<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Top Criptomonedas<\/h1>\n <form id=\"crypto-form\">\n <label for=\"number\">N\u00famero de Criptomonedas:<\/label>\n <input type=\"number\" id=\"number\" name=\"number\" min=\"1\" max=\"250\" value=\"10\">\n <label for=\"search\">Nombre o S\u00edmbolo:<\/label>\n <input type=\"text\" id=\"search\" name=\"search\">\n <button type=\"submit\">Buscar<\/button>\n <\/form>\n <table id=\"crypto-table\">\n <thead>\n <tr>\n <th id=\"position-header\">Posici\u00f3n<\/th>\n <th id=\"name-header\">Nombre<\/th>\n <th id=\"symbol-header\">S\u00edmbolo<\/th>\n <th id=\"price-header\">Precio<\/th>\n <th id=\"marketcap-header\">Market Cap<\/th>\n <th id=\"supply-header\">Suministro<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- Aqu\u00ed se insertar\u00e1n las criptomonedas con JavaScript -->\n <\/tbody>\n <\/table>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nArchivo CSS (styles.css):<\/h3>\n\n\n\nbody {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n}\n\n.container {\n width: 80%;\n margin: auto;\n overflow: hidden;\n}\n\nh1 {\n text-align: center;\n margin-top: 20px;\n}\n\nform {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\nlabel {\n margin: 0 10px;\n}\n\ninput {\n margin: 0 10px;\n padding: 5px;\n}\n\nbutton {\n padding: 5px 10px;\n cursor: pointer;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0;\n box-shadow: 0 2px 3px rgba(0,0,0,0.1);\n background-color: #fff;\n}\n\nth, td {\n padding: 10px;\n text-align: left;\n border: 1px solid #ddd;\n cursor: pointer;\n}\n\nth {\n background-color: #f2f2f2;\n}\n\ntr:nth-child(even) {\n background-color: #f9f9f9;\n}<\/code><\/pre>\n\n\n\nArchivo JavaScript (script.js):<\/h3>\n\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n const form = document.querySelector(\"#crypto-form\");\n const numberInput = document.querySelector(\"#number\");\n const searchInput = document.querySelector(\"#search\");\n const tableBody = document.querySelector(\"#crypto-table tbody\");\n\n let cryptoData = []; \/\/ Para almacenar los datos de criptomonedas\n let currentSortColumn = 'position';\n let currentSortOrder = 'asc';\n\n form.addEventListener(\"submit\", function(event) {\n event.preventDefault();\n const number = numberInput.value;\n const search = searchInput.value.trim().toLowerCase();\n actualizarTabla(number, search);\n });\n\n function actualizarTabla(number, search) {\n const API_URL = `https:\/\/api.coingecko.com\/api\/v3\/coins\/markets?vs_currency=usd&order=market_cap_desc&per_page=${number}&page=1&_=${new Date().getTime()}`;\n \n fetch(API_URL)\n .then(response => response.json())\n .then(data => {\n cryptoData = data; \/\/ Guardar datos para ordenarlos m\u00e1s tarde\n if (search) {\n cryptoData = cryptoData.filter(crypto => crypto.name.toLowerCase().includes(search) || crypto.symbol.toLowerCase().includes(search));\n }\n renderTable();\n })\n .catch(error => {\n console.error(\"Error al obtener los datos:\", error);\n });\n }\n\n function renderTable() {\n tableBody.innerHTML = \"\";\n\n const sortedData = sortData(cryptoData, currentSortColumn, currentSortOrder);\n sortedData.forEach((crypto, index) => {\n const row = document.createElement(\"tr\");\n\n const cellPosition = document.createElement(\"td\");\n cellPosition.textContent = index + 1;\n row.appendChild(cellPosition);\n\n const cellName = document.createElement(\"td\");\n cellName.textContent = crypto.name;\n row.appendChild(cellName);\n\n const cellSymbol = document.createElement(\"td\");\n cellSymbol.textContent = crypto.symbol.toUpperCase();\n row.appendChild(cellSymbol);\n\n const cellPrice = document.createElement(\"td\");\n cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;\n row.appendChild(cellPrice);\n\n const cellMarketCap = document.createElement(\"td\");\n cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;\n row.appendChild(cellMarketCap);\n\n const cellSupply = document.createElement(\"td\");\n cellSupply.textContent = crypto.circulating_supply.toLocaleString();\n row.appendChild(cellSupply);\n\n tableBody.appendChild(row);\n });\n }\n\n function sortData(data, column, order) {\n const sortedData = [...data];\n sortedData.sort((a, b) => {\n let compareA, compareB;\n\n switch (column) {\n case 'position':\n compareA = a.market_cap_rank;\n compareB = b.market_cap_rank;\n break;\n case 'name':\n compareA = a.name.toLowerCase();\n compareB = b.name.toLowerCase();\n break;\n case 'symbol':\n compareA = a.symbol.toLowerCase();\n compareB = b.symbol.toLowerCase();\n break;\n case 'price':\n compareA = a.current_price;\n compareB = b.current_price;\n break;\n case 'marketcap':\n compareA = a.market_cap;\n compareB = b.market_cap;\n break;\n case 'supply':\n compareA = a.circulating_supply;\n compareB = b.circulating_supply;\n break;\n default:\n compareA = a.market_cap_rank;\n compareB = b.market_cap_rank;\n }\n\n if (compareA < compareB) return order === 'asc' ? -1 : 1;\n if (compareA > compareB) return order === 'asc' ? 1 : -1;\n return 0;\n });\n return sortedData;\n }\n\n document.querySelector(\"#position-header\").addEventListener(\"click\", function() {\n toggleSort('position');\n });\n\n document.querySelector(\"#name-header\").addEventListener(\"click\", function() {\n toggleSort('name');\n });\n\n document.querySelector(\"#symbol-header\").addEventListener(\"click\", function() {\n toggleSort('symbol');\n });\n\n document.querySelector(\"#price-header\").addEventListener(\"click\", function() {\n toggleSort('price');\n });\n\n document.querySelector(\"#marketcap-header\").addEventListener(\"click\", function() {\n toggleSort('marketcap');\n });\n\n document.querySelector(\"#supply-header\").addEventListener(\"click\", function() {\n toggleSort('supply');\n });\n\n function toggleSort(column) {\n if (currentSortColumn === column) {\n currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';\n } else {\n currentSortColumn = column;\n currentSortOrder = 'asc';\n }\n renderTable();\n }\n\n \/\/ Llamar a la funci\u00f3n para actualizar la tabla al cargar la p\u00e1gina por primera vez\n actualizarTabla(numberInput.value, \"\");\n});<\/code><\/pre>\n\n\n\nResumen:<\/h3>\n\n\n\n\n- index.html<\/strong>: Estructura b\u00e1sica del formulario y la tabla con identificadores para los encabezados de las columnas.<\/li>\n\n\n\n
- styles.css<\/strong>: Estilo del formulario y la tabla.<\/li>\n\n\n\n
- script.js<\/strong>: L\u00f3gica para manejar el formulario, actualizar la tabla, y ordenar los datos al hacer clic en los encabezados de las columnas.<\/li>\n<\/ul>\n\n\n\n
Estas modificaciones permiten una experiencia de usuario m\u00e1s interactiva y din\u00e1mica, con la capacidad de buscar y ordenar las criptomonedas seg\u00fan diferentes criterios. Si necesitas m\u00e1s ajustes o funcionalidades adicionales<\/p>\n","protected":false},"excerpt":{"rendered":"
Vamos a crear una sencilla web en HTML, CSS y JavaScript que muestre las criptomonedas del top con nombre, s\u00edmbolo, precio, capitalizaci\u00f3n de mercado (market cap), posici\u00f3n y suministro (supply). Paso 1: HTML Primero, crearemos una estructura b\u00e1sica en HTML: Paso 2: CSS A\u00f1adiremos estilos b\u00e1sicos con CSS para darle un poco de dise\u00f1o a…<\/p>\n","protected":false},"author":1,"featured_media":762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[73,565],"tags":[262,267,260,258,264,263,265,257,259,99,266,261],"class_list":["post-211","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blockchain","category-programacion","tag-api-coingecko","tag-cache","tag-criptomonedas","tag-css","tag-curl","tag-endpoints","tag-fetch","tag-html","tag-javascript","tag-json","tag-urls","tag-web"],"yoast_head":"\n
Creando p\u00e1gina web con html, css y javascript de criptomonedas - Ciencia y Tecnologia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creando p\u00e1gina web con html, css y javascript de criptomonedas - Ciencia y Tecnologia\" \/>\n<meta property=\"og:description\" content=\"Vamos a crear una sencilla web en HTML, CSS y JavaScript que muestre las criptomonedas del top con nombre, s\u00edmbolo, precio, capitalizaci\u00f3n de mercado (market cap), posici\u00f3n y suministro (supply). Paso 1: HTML Primero, crearemos una estructura b\u00e1sica en HTML: Paso 2: CSS A\u00f1adiremos estilos b\u00e1sicos con CSS para darle un poco de dise\u00f1o a...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/\" \/>\n<meta property=\"og:site_name\" content=\"Ciencia y Tecnologia\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-24T17:15:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-26T21:32:13+00:00\" \/>\n<meta name=\"author\" content=\"david\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"david\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/\"},\"author\":{\"name\":\"david\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"headline\":\"Creando p\u00e1gina web con html, css y javascript de criptomonedas\",\"datePublished\":\"2024-11-24T17:15:31+00:00\",\"dateModified\":\"2026-04-26T21:32:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/\"},\"wordCount\":1688,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"image\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/post_211.jpg\",\"keywords\":[\"Api Coingecko\",\"cach\u00e9\",\"criptomonedas\",\"css\",\"curl\",\"endpoints\",\"fetch\",\"html\",\"javascript\",\"JSON\",\"urls\",\"web\"],\"articleSection\":[\"Blockchain\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/\",\"name\":\"Creando p\u00e1gina web con html, css y javascript de criptomonedas - Ciencia y Tecnologia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/post_211.jpg\",\"datePublished\":\"2024-11-24T17:15:31+00:00\",\"dateModified\":\"2026-04-26T21:32:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/post_211.jpg\",\"contentUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/post_211.jpg\",\"width\":1280,\"height\":719},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creando p\u00e1gina web con html, css y javascript de criptomonedas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/\",\"name\":\"Ciencia y Tecnologia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\",\"name\":\"david\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\",\"caption\":\"david\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\"},\"sameAs\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creando p\u00e1gina web con html, css y javascript de criptomonedas - Ciencia y Tecnologia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/","og_locale":"es_ES","og_type":"article","og_title":"Creando p\u00e1gina web con html, css y javascript de criptomonedas - Ciencia y Tecnologia","og_description":"Vamos a crear una sencilla web en HTML, CSS y JavaScript que muestre las criptomonedas del top con nombre, s\u00edmbolo, precio, capitalizaci\u00f3n de mercado (market cap), posici\u00f3n y suministro (supply). Paso 1: HTML Primero, crearemos una estructura b\u00e1sica en HTML: Paso 2: CSS A\u00f1adiremos estilos b\u00e1sicos con CSS para darle un poco de dise\u00f1o a...","og_url":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/","og_site_name":"Ciencia y Tecnologia","article_published_time":"2024-11-24T17:15:31+00:00","article_modified_time":"2026-04-26T21:32:13+00:00","author":"david","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"david","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#article","isPartOf":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/"},"author":{"name":"david","@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"headline":"Creando p\u00e1gina web con html, css y javascript de criptomonedas","datePublished":"2024-11-24T17:15:31+00:00","dateModified":"2026-04-26T21:32:13+00:00","mainEntityOfPage":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/"},"wordCount":1688,"commentCount":0,"publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"image":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#primaryimage"},"thumbnailUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/04\/post_211.jpg","keywords":["Api Coingecko","cach\u00e9","criptomonedas","css","curl","endpoints","fetch","html","javascript","JSON","urls","web"],"articleSection":["Blockchain","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/","url":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/","name":"Creando p\u00e1gina web con html, css y javascript de criptomonedas - Ciencia y Tecnologia","isPartOf":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#primaryimage"},"image":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#primaryimage"},"thumbnailUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/04\/post_211.jpg","datePublished":"2024-11-24T17:15:31+00:00","dateModified":"2026-04-26T21:32:13+00:00","breadcrumb":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#primaryimage","url":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/04\/post_211.jpg","contentUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/04\/post_211.jpg","width":1280,"height":719},{"@type":"BreadcrumbList","@id":"https:\/\/cienciaytecnology.com\/wordpress\/creando-pagina-web-con-html-css-y-javascript-de-criptomonedas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/cienciaytecnology.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Creando p\u00e1gina web con html, css y javascript de criptomonedas"}]},{"@type":"WebSite","@id":"https:\/\/cienciaytecnology.com\/wordpress\/#website","url":"https:\/\/cienciaytecnology.com\/wordpress\/","name":"Ciencia y Tecnologia","description":"","publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cienciaytecnology.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b","name":"david","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g","caption":"david"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g"},"sameAs":["https:\/\/cienciaytecnology.com\/wordpress"]}]}},"_links":{"self":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/comments?post=211"}],"version-history":[{"count":1,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/211\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/211\/revisions\/212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/media\/762"}],"wp:attachment":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/media?parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/categories?post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/tags?post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}