|

Creando página web con html, css y javascript de criptomonedas

Pordavid

Vamos a crear una sencilla web en HTML, CSS y JavaScript que muestre las criptomonedas del top con nombre, símbolo, precio, capitalización de mercado (market cap), posición y suministro (supply).

Paso 1: HTML

Primero, crearemos una estructura básica en HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Criptomonedas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Top Criptomonedas</h1>
        <table id="crypto-table">
            <thead>
                <tr>
                    <th>Posición</th>
                    <th>Nombre</th>
                    <th>Símbolo</th>
                    <th>Precio</th>
                    <th>Market Cap</th>
                    <th>Suministro</th>
                </tr>
            </thead>
            <tbody>
                <!-- Aquí se insertarán las criptomonedas con JavaScript -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: CSS

Añadiremos estilos básicos con CSS para darle un poco de diseño a nuestra tabla:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    background-color: #fff;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

Paso 3: JavaScript

Finalmente, usaremos JavaScript para obtener datos de la API de CoinGecko y mostrarlos en nuestra tabla:

// script.js
document.addEventListener("DOMContentLoaded", function() {
    const API_URL = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1";

    fetch(API_URL)
        .then(response => response.json())
        .then(data => {
            const tableBody = document.querySelector("#crypto-table tbody");
            data.forEach((crypto, index) => {
                const row = document.createElement("tr");

                const cellPosition = document.createElement("td");
                cellPosition.textContent = index + 1;
                row.appendChild(cellPosition);

                const cellName = document.createElement("td");
                cellName.textContent = crypto.name;
                row.appendChild(cellName);

                const cellSymbol = document.createElement("td");
                cellSymbol.textContent = crypto.symbol.toUpperCase();
                row.appendChild(cellSymbol);

                const cellPrice = document.createElement("td");
                cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;
                row.appendChild(cellPrice);

                const cellMarketCap = document.createElement("td");
                cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;
                row.appendChild(cellMarketCap);

                const cellSupply = document.createElement("td");
                cellSupply.textContent = crypto.circulating_supply.toLocaleString();
                row.appendChild(cellSupply);

                tableBody.appendChild(row);
            });
        })
        .catch(error => {
            console.error("Error al obtener los datos:", error);
        });
});

Resumen

  • HTML: Crea la estructura básica de la página.
  • CSS: Estiliza la página y la tabla.
  • JavaScript: Obtiene datos de la API y los inserta en la tabla.

Este es un punto de partida simple, pero puedes expandirlo añadiendo más estilos, funcionalidades, o mejorando la interfaz de usuario según tus necesidades.

API de Coingecko

La API de CoinGecko es una interfaz que permite a los desarrolladores acceder a datos de criptomonedas, NFTs y otros activos digitales a través de endpoints RESTful que devuelven datos en formato JSON. Puedes explorarla directamente desde tu navegador para entender qué contiene y cómo funciona.

Pasos para explorar la API de CoinGecko:

  1. Visita la documentación de la API de CoinGecko: Puedes encontrar la documentación completa en el siguiente enlace: [CoinGecko API Documentation](https://www.coingecko.com/en/api).
  2. Prueba los endpoints: La documentación ofrece una sección de «Try It!» donde puedes probar diferentes endpoints y ver las respuestas que devuelven. Esto te ayudará a entender qué datos puedes obtener y cómo formatear tus solicitudes.
  3. Consulta los endpoints disponibles: La API de CoinGecko ofrece una variedad de endpoints para diferentes tipos de datos, como precios actuales, datos históricos, información de mercado, datos de NFTs, y más. Puedes explorar estos endpoints en la documentación para ver qué información está disponible.
  4. Obtén una clave API (opcional): Si planeas usar la API para un proyecto más serio o comercial, puedes registrarte en CoinGecko y obtener una clave API para aumentar tus límites de uso y acceder a endpoints exclusivos.

Ejemplo de solicitud

Aquí tienes un ejemplo de cómo podrías hacer una solicitud simple para obtener los datos de una criptomoneda específica:

curl -H "Accept: application/json" "https://api.coingecko.com/api/v3/coins/bitcoin"

Esta solicitud devolverá un objeto JSON con información detallada sobre Bitcoin, incluyendo su precio actual, capitalización de mercado, suministro circulante, y más.

Resumen

Explorar la API de CoinGecko directamente desde tu navegador te permitirá entender mejor los datos disponibles y cómo formatear tus solicitudes. Puedes probar diferentes endpoints y ver las respuestas que devuelven para familiarizarte con la API antes de integrarla en tu proyecto.

Aquí tienes una guía detallada sobre cómo utilizar la API de CoinGecko, junto con algunos ejemplos de endpoints:

1. Obtener una clave API (opcional)

Para usar algunos endpoints exclusivos o aumentar tus límites de uso, puedes registrarte en CoinGecko y obtener una clave API. Esto es opcional para la mayoría de los endpoints públicos.

2. Explorar la documentación de la API

Visita la documentación de la API de CoinGecko para obtener información detallada sobre los endpoints disponibles, parámetros, y ejemplos de uso.

3. Ejemplos de endpoints

Endpoint para obtener datos de una criptomoneda específica

curl -H "Accept: application/json" "https://api.coingecko.com/api/v3/coins/bitcoin"

Este endpoint devuelve información detallada sobre Bitcoin, incluyendo su precio actual, capitalización de mercado, suministro circulante, y más.

Endpoint para obtener datos de varias criptomonedas

curl -H "Accept: application/json" "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1"

Este endpoint devuelve una lista de las 10 criptomonedas con mayor capitalización de mercado en USD.

Endpoint para obtener datos históricos

curl -H "Accept: application/json" "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=30"

Este endpoint devuelve datos históricos de Bitcoin por los últimos 30 días.

Endpoint para obtener datos de NFTs

curl -H "Accept: application/json" "https://api.coingecko.com/api/v3/nfts/collection/0x06012c8cf97bead5deae237070f9587f8e6d9748"

Este endpoint devuelve información sobre una colección de NFTs específica.

4. Probar los endpoints

Puedes 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ón para ver la respuesta en formato JSON.

5. Integrar la API en tu proyecto

Para integrar la API en tu proyecto, puedes usar lenguajes de programación como Python, JavaScript, o cualquier otro lenguaje que prefieras. Aquí tienes un ejemplo en JavaScript:

fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Error al obtener los datos:", error);
    });

Resumen

La API de CoinGecko ofrece una amplia gama de endpoints para obtener datos de criptomonedas, NFTs y otros activos digitales. Puedes explorar la documentación y probar los endpoints directamente desde tu navegador para entender mejor cómo funcionan y qué datos puedes obtener.

Ejemplos de Endpoints Útiles

1. Obtener las monedas del mercado

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd

Esta URL te devolverá una lista de las criptomonedas con datos de mercado básicos como precio, volumen y capitalización. Puedes personalizar esta URL con más parámetros como order, per_page, y page para ajustar los resultados. Por ejemplo:

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1

2. Obtener los detalles de una criptomoneda específica

https://api.coingecko.com/api/v3/coins/bitcoin

Esta URL te devolverá detalles completos sobre Bitcoin.

3. Obtener datos históricos de una criptomoneda

https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=30

Esta URL te devolverá datos históricos del precio de Bitcoin durante los últimos 30 días.

Exploración en el Navegador

Puedes copiar y pegar cualquiera de estas URLs directamente en tu navegador para ver los resultados en formato JSON. Esto te ayudará a explorar los datos disponibles y cómo se estructuran antes de utilizarlos en tu proyecto.

Por ejemplo:

  • 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ón de mercado en USD)
  • https://api.coingecko.com/api/v3/coins/bitcoin (Para obtener información detallada sobre Bitcoin)

Estas URLs deberían mostrarte el JSON directamente en tu navegador, donde podrás inspeccionarlo y ver qué tipo de datos puedes extraer.

Actualizando la web

Para asegurarte de que los precios de las criptomonedas se actualicen cada vez que refresques la página, debes asegurarte de que el script JavaScript haga una nueva solicitud a la API de CoinGecko cada vez que se cargue la página. Aquí tienes algunos pasos y sugerencias para hacerlo:

  1. Verifica que el fetch se ejecuta cada vez que se carga la página: Asegúrate de que el código fetch está dentro del bloque DOMContentLoaded, de modo que se ejecute cada vez que se cargue el DOM.
  2. Caché del navegador: Asegúrate de que el navegador no esté utilizando datos en caché. Puedes agregar un parámetro único a la URL de la API para evitar el caché del navegador.
  3. Verifica la respuesta de la API: Asegúrate de que la API de CoinGecko está devolviendo datos actualizados y que no hay errores en la solicitud.

Aquí tienes una versión actualizada del script.js:

document.addEventListener("DOMContentLoaded", function() {
    // URL de la API para obtener datos de mercado de criptomonedas
    const API_URL = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1";

    // Función para actualizar la tabla de criptomonedas
    function actualizarTabla() {
        fetch(API_URL)
            .then(response => response.json())
            .then(data => {
                const tableBody = document.querySelector("#crypto-table tbody");
                // Limpiar el contenido anterior
                tableBody.innerHTML = "";
                // Iterar sobre los datos y agregar filas a la tabla
                data.forEach((crypto, index) => {
                    const row = document.createElement("tr");

                    const cellPosition = document.createElement("td");
                    cellPosition.textContent = index + 1;
                    row.appendChild(cellPosition);

                    const cellName = document.createElement("td");
                    cellName.textContent = crypto.name;
                    row.appendChild(cellName);

                    const cellSymbol = document.createElement("td");
                    cellSymbol.textContent = crypto.symbol.toUpperCase();
                    row.appendChild(cellSymbol);

                    const cellPrice = document.createElement("td");
                    cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;
                    row.appendChild(cellPrice);

                    const cellMarketCap = document.createElement("td");
                    cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;
                    row.appendChild(cellMarketCap);

                    const cellSupply = document.createElement("td");
                    cellSupply.textContent = crypto.circulating_supply.toLocaleString();
                    row.appendChild(cellSupply);

                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error("Error al obtener los datos:", error);
            });
    }

    // Llamar a la función para actualizar la tabla cuando se cargue la página
    actualizarTabla();
});

Añadir un parámetro único para evitar el caché:

Una técnica común para evitar la caché del navegador es agregar un parámetro de tiempo a la URL de la API. Aquí tienes cómo hacerlo:

    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()}`;

Esto asegura que cada solicitud tenga una URL única y que el navegador no use datos en caché.

Resumen

Cada vez que recargues la página, el script fetch hará una nueva solicitud a la API de CoinGecko y actualizará la tabla con los datos más recientes. Esto debería resolver el problema de los precios que no se actualizan.

Vamos a agregar un formulario a tu página web que te permita especificar cuántas criptomonedas mostrar y también buscar por el nombre o símbolo de una criptomoneda específica.

Paso 1: Actualizar el HTML

Vamos a añadir un formulario en la parte superior de la página para que el usuario pueda ingresar el número de criptomonedas a mostrar o buscar una criptomoneda específica.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Criptomonedas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Top Criptomonedas</h1>
        <form id="crypto-form">
            <label for="number">Número de Criptomonedas:</label>
            <input type="number" id="number" name="number" min="1" max="250" value="10">
            <label for="search">Nombre o Símbolo:</label>
            <input type="text" id="search" name="search">
            <button type="submit">Buscar</button>
        </form>
        <table id="crypto-table">
            <thead>
                <tr>
                    <th>Posición</th>
                    <th>Nombre</th>
                    <th>Símbolo</th>
                    <th>Precio</th>
                    <th>Market Cap</th>
                    <th>Suministro</th>
                </tr>
            </thead>
            <tbody>
                <!-- Aquí se insertarán las criptomonedas con JavaScript -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Actualizar el CSS

Añade algunos estilos básicos para el formulario.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

form {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

label {
    margin: 0 10px;
}

input {
    margin: 0 10px;
    padding: 5px;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    background-color: #fff;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

Paso 3: Actualizar el JavaScript

Vamos a actualizar el script para manejar el formulario y hacer la búsqueda.

document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector("#crypto-form");
    const numberInput = document.querySelector("#number");
    const searchInput = document.querySelector("#search");
    const tableBody = document.querySelector("#crypto-table tbody");

    form.addEventListener("submit", function(event) {
        event.preventDefault();
        const number = numberInput.value;
        const search = searchInput.value.trim().toLowerCase();
        actualizarTabla(number, search);
    });

    function actualizarTabla(number, search) {
        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()}`;
        
        fetch(API_URL)
            .then(response => response.json())
            .then(data => {
                // Filtrar los resultados si se proporciona un término de búsqueda
                if (search) {
                    data = data.filter(crypto => crypto.name.toLowerCase().includes(search) || crypto.symbol.toLowerCase().includes(search));
                }

                tableBody.innerHTML = "";
                
                data.forEach((crypto, index) => {
                    const row = document.createElement("tr");

                    const cellPosition = document.createElement("td");
                    cellPosition.textContent = index + 1;
                    row.appendChild(cellPosition);

                    const cellName = document.createElement("td");
                    cellName.textContent = crypto.name;
                    row.appendChild(cellName);

                    const cellSymbol = document.createElement("td");
                    cellSymbol.textContent = crypto.symbol.toUpperCase();
                    row.appendChild(cellSymbol);

                    const cellPrice = document.createElement("td");
                    cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;
                    row.appendChild(cellPrice);

                    const cellMarketCap = document.createElement("td");
                    cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;
                    row.appendChild(cellMarketCap);

                    const cellSupply = document.createElement("td");
                    cellSupply.textContent = crypto.circulating_supply.toLocaleString();
                    row.appendChild(cellSupply);

                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error("Error al obtener los datos:", error);
            });
    }

    // Llamar a la función para actualizar la tabla al cargar la página por primera vez
    actualizarTabla(numberInput.value, "");
});

Resumen

  • Formulario en HTML: Permite al usuario especificar el número de criptomonedas a mostrar o buscar por nombre/símbolo.
  • Estilo en CSS: Añade estilos para el formulario y la tabla.
  • Lógica en JavaScript: Actualiza la tabla según el número de criptomonedas o el término de búsqueda proporcionado por el usuario.

Ahora, tu página web permitirá al usuario seleccionar el número de criptomonedas a mostrar y buscar por nombre o símbolo, asegurándose de que los datos se actualicen correctamente.

Vamos a añadir la funcionalidad de ordenar las criptomonedas por cada columna al pulsar en los encabezados de la tabla. Esto permitirá a los usuarios ordenar las criptomonedas según posición, nombre, símbolo, precio, capitalización de mercado y suministro.

Paso 1: Actualizar el HTML

Asegúrate de que tus encabezados de tabla tengan identificadores (id) para cada columna que desees ordenar.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Criptomonedas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Top Criptomonedas</h1>
        <form id="crypto-form">
            <label for="number">Número de Criptomonedas:</label>
            <input type="number" id="number" name="number" min="1" max="250" value="10">
            <label for="search">Nombre o Símbolo:</label>
            <input type="text" id="search" name="search">
            <button type="submit">Buscar</button>
        </form>
        <table id="crypto-table">
            <thead>
                <tr>
                    <th id="position-header">Posición</th>
                    <th id="name-header">Nombre</th>
                    <th id="symbol-header">Símbolo</th>
                    <th id="price-header">Precio</th>
                    <th id="marketcap-header">Market Cap</th>
                    <th id="supply-header">Suministro</th>
                </tr>
            </thead>
            <tbody>
                <!-- Aquí se insertarán las criptomonedas con JavaScript -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Actualizar el JavaScript

Añadiremos lógica para ordenar los datos y actualizar la tabla cuando se haga clic en los encabezados de las columnas.

document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector("#crypto-form");
    const numberInput = document.querySelector("#number");
    const searchInput = document.querySelector("#search");
    const tableBody = document.querySelector("#crypto-table tbody");

    let cryptoData = []; // Para almacenar los datos de criptomonedas
    let currentSortColumn = 'position';
    let currentSortOrder = 'asc';

    form.addEventListener("submit", function(event) {
        event.preventDefault();
        const number = numberInput.value;
        const search = searchInput.value.trim().toLowerCase();
        actualizarTabla(number, search);
    });

    function actualizarTabla(number, search) {
        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()}`;
        
        fetch(API_URL)
            .then(response => response.json())
            .then(data => {
                cryptoData = data; // Guardar datos para ordenarlos más tarde
                if (search) {
                    cryptoData = cryptoData.filter(crypto => crypto.name.toLowerCase().includes(search) || crypto.symbol.toLowerCase().includes(search));
                }
                renderTable();
            })
            .catch(error => {
                console.error("Error al obtener los datos:", error);
            });
    }

    function renderTable() {
        tableBody.innerHTML = "";

        const sortedData = sortData(cryptoData, currentSortColumn, currentSortOrder);
        sortedData.forEach((crypto, index) => {
            const row = document.createElement("tr");

            const cellPosition = document.createElement("td");
            cellPosition.textContent = index + 1;
            row.appendChild(cellPosition);

            const cellName = document.createElement("td");
            cellName.textContent = crypto.name;
            row.appendChild(cellName);

            const cellSymbol = document.createElement("td");
            cellSymbol.textContent = crypto.symbol.toUpperCase();
            row.appendChild(cellSymbol);

            const cellPrice = document.createElement("td");
            cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;
            row.appendChild(cellPrice);

            const cellMarketCap = document.createElement("td");
            cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;
            row.appendChild(cellMarketCap);

            const cellSupply = document.createElement("td");
            cellSupply.textContent = crypto.circulating_supply.toLocaleString();
            row.appendChild(cellSupply);

            tableBody.appendChild(row);
        });
    }

    function sortData(data, column, order) {
        const sortedData = [...data];
        sortedData.sort((a, b) => {
            let compareA, compareB;

            switch (column) {
                case 'position':
                    compareA = a.market_cap_rank;
                    compareB = b.market_cap_rank;
                    break;
                case 'name':
                    compareA = a.name.toLowerCase();
                    compareB = b.name.toLowerCase();
                    break;
                case 'symbol':
                    compareA = a.symbol.toLowerCase();
                    compareB = b.symbol.toLowerCase();
                    break;
                case 'price':
                    compareA = a.current_price;
                    compareB = b.current_price;
                    break;
                case 'marketcap':
                    compareA = a.market_cap;
                    compareB = b.market_cap;
                    break;
                case 'supply':
                    compareA = a.circulating_supply;
                    compareB = b.circulating_supply;
                    break;
                default:
                    compareA = a.market_cap_rank;
                    compareB = b.market_cap_rank;
            }

            if (compareA < compareB) return order === 'asc' ? -1 : 1;
            if (compareA > compareB) return order === 'asc' ? 1 : -1;
            return 0;
        });
        return sortedData;
    }

    document.querySelector("#position-header").addEventListener("click", function() {
        toggleSort('position');
    });

    document.querySelector("#name-header").addEventListener("click", function() {
        toggleSort('name');
    });

    document.querySelector("#symbol-header").addEventListener("click", function() {
        toggleSort('symbol');
    });

    document.querySelector("#price-header").addEventListener("click", function() {
        toggleSort('price');
    });

    document.querySelector("#marketcap-header").addEventListener("click", function() {
        toggleSort('marketcap');
    });

    document.querySelector("#supply-header").addEventListener("click", function() {
        toggleSort('supply');
    });

    function toggleSort(column) {
        if (currentSortColumn === column) {
            currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
        } else {
            currentSortColumn = column;
            currentSortOrder = 'asc';
        }
        renderTable();
    }

    // Llamar a la función para actualizar la tabla al cargar la página por primera vez
    actualizarTabla(numberInput.value, "");
});

Resumen

  • HTML: Añade identificadores (id) a los encabezados de las columnas.
  • JavaScript: Implementa la lógica para ordenar los datos y actualizar la tabla cuando se hace clic en los encabezados de las columnas.

Esto te permitirá ordenar las criptomonedas según cada columna (posición, nombre, símbolo, precio, capitalización de mercado y suministro) al hacer clic en los encabezados de la tabla.

Aquí tienes cómo quedarían los tres archivos completos (HTML, CSS y JavaScript) con las funcionalidades actualizadas, incluyendo la búsqueda y la capacidad de ordenar por columnas.

Archivo HTML (index.html):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Criptomonedas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Top Criptomonedas</h1>
        <form id="crypto-form">
            <label for="number">Número de Criptomonedas:</label>
            <input type="number" id="number" name="number" min="1" max="250" value="10">
            <label for="search">Nombre o Símbolo:</label>
            <input type="text" id="search" name="search">
            <button type="submit">Buscar</button>
        </form>
        <table id="crypto-table">
            <thead>
                <tr>
                    <th id="position-header">Posición</th>
                    <th id="name-header">Nombre</th>
                    <th id="symbol-header">Símbolo</th>
                    <th id="price-header">Precio</th>
                    <th id="marketcap-header">Market Cap</th>
                    <th id="supply-header">Suministro</th>
                </tr>
            </thead>
            <tbody>
                <!-- Aquí se insertarán las criptomonedas con JavaScript -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

Archivo CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

form {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

label {
    margin: 0 10px;
}

input {
    margin: 0 10px;
    padding: 5px;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    background-color: #fff;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
    cursor: pointer;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

Archivo JavaScript (script.js):

document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector("#crypto-form");
    const numberInput = document.querySelector("#number");
    const searchInput = document.querySelector("#search");
    const tableBody = document.querySelector("#crypto-table tbody");

    let cryptoData = []; // Para almacenar los datos de criptomonedas
    let currentSortColumn = 'position';
    let currentSortOrder = 'asc';

    form.addEventListener("submit", function(event) {
        event.preventDefault();
        const number = numberInput.value;
        const search = searchInput.value.trim().toLowerCase();
        actualizarTabla(number, search);
    });

    function actualizarTabla(number, search) {
        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()}`;
        
        fetch(API_URL)
            .then(response => response.json())
            .then(data => {
                cryptoData = data; // Guardar datos para ordenarlos más tarde
                if (search) {
                    cryptoData = cryptoData.filter(crypto => crypto.name.toLowerCase().includes(search) || crypto.symbol.toLowerCase().includes(search));
                }
                renderTable();
            })
            .catch(error => {
                console.error("Error al obtener los datos:", error);
            });
    }

    function renderTable() {
        tableBody.innerHTML = "";

        const sortedData = sortData(cryptoData, currentSortColumn, currentSortOrder);
        sortedData.forEach((crypto, index) => {
            const row = document.createElement("tr");

            const cellPosition = document.createElement("td");
            cellPosition.textContent = index + 1;
            row.appendChild(cellPosition);

            const cellName = document.createElement("td");
            cellName.textContent = crypto.name;
            row.appendChild(cellName);

            const cellSymbol = document.createElement("td");
            cellSymbol.textContent = crypto.symbol.toUpperCase();
            row.appendChild(cellSymbol);

            const cellPrice = document.createElement("td");
            cellPrice.textContent = `$${crypto.current_price.toLocaleString()}`;
            row.appendChild(cellPrice);

            const cellMarketCap = document.createElement("td");
            cellMarketCap.textContent = `$${crypto.market_cap.toLocaleString()}`;
            row.appendChild(cellMarketCap);

            const cellSupply = document.createElement("td");
            cellSupply.textContent = crypto.circulating_supply.toLocaleString();
            row.appendChild(cellSupply);

            tableBody.appendChild(row);
        });
    }

    function sortData(data, column, order) {
        const sortedData = [...data];
        sortedData.sort((a, b) => {
            let compareA, compareB;

            switch (column) {
                case 'position':
                    compareA = a.market_cap_rank;
                    compareB = b.market_cap_rank;
                    break;
                case 'name':
                    compareA = a.name.toLowerCase();
                    compareB = b.name.toLowerCase();
                    break;
                case 'symbol':
                    compareA = a.symbol.toLowerCase();
                    compareB = b.symbol.toLowerCase();
                    break;
                case 'price':
                    compareA = a.current_price;
                    compareB = b.current_price;
                    break;
                case 'marketcap':
                    compareA = a.market_cap;
                    compareB = b.market_cap;
                    break;
                case 'supply':
                    compareA = a.circulating_supply;
                    compareB = b.circulating_supply;
                    break;
                default:
                    compareA = a.market_cap_rank;
                    compareB = b.market_cap_rank;
            }

            if (compareA < compareB) return order === 'asc' ? -1 : 1;
            if (compareA > compareB) return order === 'asc' ? 1 : -1;
            return 0;
        });
        return sortedData;
    }

    document.querySelector("#position-header").addEventListener("click", function() {
        toggleSort('position');
    });

    document.querySelector("#name-header").addEventListener("click", function() {
        toggleSort('name');
    });

    document.querySelector("#symbol-header").addEventListener("click", function() {
        toggleSort('symbol');
    });

    document.querySelector("#price-header").addEventListener("click", function() {
        toggleSort('price');
    });

    document.querySelector("#marketcap-header").addEventListener("click", function() {
        toggleSort('marketcap');
    });

    document.querySelector("#supply-header").addEventListener("click", function() {
        toggleSort('supply');
    });

    function toggleSort(column) {
        if (currentSortColumn === column) {
            currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
        } else {
            currentSortColumn = column;
            currentSortOrder = 'asc';
        }
        renderTable();
    }

    // Llamar a la función para actualizar la tabla al cargar la página por primera vez
    actualizarTabla(numberInput.value, "");
});

Resumen:

  • index.html: Estructura básica del formulario y la tabla con identificadores para los encabezados de las columnas.
  • styles.css: Estilo del formulario y la tabla.
  • script.js: Lógica para manejar el formulario, actualizar la tabla, y ordenar los datos al hacer clic en los encabezados de las columnas.

Estas modificaciones permiten una experiencia de usuario más interactiva y dinámica, con la capacidad de buscar y ordenar las criptomonedas según diferentes criterios. Si necesitas más ajustes o funcionalidades adicionales

Publicaciones Similares

|

PHP

Pordavid

PHP está diseñado para ser fácil de aprender y potente en su aplicación, lo que lo convierte en una opción popular para desarrolladores de todos los niveles. Aquí tienes algunos aspectos básicos: Comentarios: Puedes agregar comentarios en tu código PHP para hacerlo más legible. Los comentarios de una sola línea comienzan con //, mientras que los comentarios…

Python

Pordavid

Python: —— 1. Como ejecutar python en linux: – Abrir una terminal – Verificar la instalación de python: python3 –version – Ejecutar un script de python: * Navega hasta el archivo: cd /ruta/del/archivo * Ejecuta el archivo con el comando python3: python3 mi_archivo.py – Hacer el script ejecutable (opcional): Si deseas ejecutar el script sin…

|

Web 3.0

Pordavid

Principales características de la Web3: ¿Por qué es importante? La Web3 promete una estructura más segura y libre, donde los usuarios tienen más control sobre sus datos y pueden interactuar de manera más directa y segura23. Esto podría transformar la forma en que usamos internet, haciendo que sea más equitativo y menos dominado por grandes…

Powershell

Pordavid

Para manejar PowerShell de manera básica, aquí tienes cómo se aplican los conceptos fundamentales que mencionamos antes: Para manejarte de manera básica en PowerShell, es útil conocer algunos cmdlets fundamentales. Aquí tienes una lista de los principales cmdlets que deberías aprender: Más Cmdlets Útiles Uso de Tuberías (Pipelines) Las tuberías en PowerShell permiten pasar la…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *