Fetching data from a cryptocurrency API

Fetching Data from a Cryptocurrency API Using jQuery

Introduction

In the digital age, cryptocurrencies have become a significant part of the financial ecosystem. With the growing popularity of Bitcoin, Ethereum, and other digital assets, developers often need to integrate real-time cryptocurrency data into web applications. This is where APIs (Application Programming Interfaces) come into play. In this guide, we will explore how to use jQuery to fetch real-time cryptocurrency data from a public API and display it dynamically on a web page.

This article will cover:

Understanding cryptocurrency APIs
Setting up a basic web project
Making AJAX requests with jQuery
Handling API responses
Displaying cryptocurrency data dynamically
Updating data in real-time
Adding error handling
Enhancing UI with CSS and animations

By the end of this tutorial, you will have a fully functional web page that can display real-time cryptocurrency prices.

1. Understanding Cryptocurrency APIs

A cryptocurrency API provides a way for developers to access market data, price trends, historical data, and other valuable information about digital currencies. There are many free and paid cryptocurrency APIs available, such as:

For this tutorial, we will use CoinGecko API, which is free and does not require authentication.

Example API Endpoint for Cryptocurrency Prices

The following endpoint retrieves the latest prices for multiple cryptocurrencies:

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,ripple&vs_currencies=usd

It returns data in JSON format:

{
  "bitcoin": {
    "usd": 45000
  },
  "ethereum": {
    "usd": 3200
  },
  "ripple": {
    "usd": 1.2
  }
}

2. Setting Up a Basic Web Project

Before fetching the API data, we need to set up a simple HTML, CSS, and JavaScript project.

Project Structure

/crypto-tracker
   |-- index.html
   |-- style.css
   |-- script.js

3. Creating the HTML Structure

Create an index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cryptocurrency Price Tracker</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <div class="container">
        <h1>Live Cryptocurrency Prices</h1>
        <table>
            <thead>
                <tr>
                    <th>Cryptocurrency</th>
                    <th>Price (USD)</th>
                </tr>
            </thead>
            <tbody id="crypto-table">
                <!-- Data will be inserted here -->
            </tbody>
        </table>
    </div>

    <script src="script.js"></script>
</body>
</html>

4. Styling with CSS

Create a style.css file to enhance the appearance:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #1a1a1a;
    color: white;
}

.container {
    margin-top: 50px;
}

table {
    width: 50%;
    margin: auto;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
    border: 1px solid white;
}

th {
    background-color: #333;
}

td {
    background-color: #444;
}

5. Fetching API Data with jQuery AJAX

Now, let’s write the JavaScript to fetch cryptocurrency data using jQuery’s AJAX function. Create a script.js file and add the following code:

$(document).ready(function () {
    function fetchCryptoPrices() {
        $.ajax({
            url: "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,ripple&vs_currencies=usd",
            type: "GET",
            dataType: "json",
            success: function (data) {
                let tableBody = $("#crypto-table");
                tableBody.empty(); // Clear previous data

                $.each(data, function (crypto, value) {
                    let price = value.usd;
                    let row = `<tr>
                        <td>${crypto.toUpperCase()}</td>
                        <td>$${price.toLocaleString()}</td>
                    </tr>`;
                    tableBody.append(row);
                });
            },
            error: function () {
                alert("Error fetching cryptocurrency data.");
            }
        });
    }

    fetchCryptoPrices(); // Fetch immediately
    setInterval(fetchCryptoPrices, 10000); // Refresh every 10 seconds
});

6. Explanation of the Code

1. $(document).ready()

Ensures the script runs only after the HTML document is fully loaded.

2. function fetchCryptoPrices()

Uses $.ajax() to fetch cryptocurrency prices from CoinGecko API.
On success, it parses JSON data and dynamically inserts it into the table.
Uses setInterval(fetchCryptoPrices, 10000); to update the prices every 10 seconds.

3. Error Handling

If the API request fails, an alert message appears.

7. Enhancing the UI with CSS Animations

To make the table look more interactive, add this CSS animation to style.css:

@keyframes blink {
    50% { opacity: 0.5; }
}

.blink {
    animation: blink 0.5s alternate infinite;
}

Modify the JavaScript to highlight price changes:

success: function (data) {
    let tableBody = $("#crypto-table");
    tableBody.empty();

    $.each(data, function (crypto, value) {
        let price = value.usd;
        let row = `<tr class="blink">
            <td>${crypto.toUpperCase()}</td>
            <td>$${price.toLocaleString()}</td>
        </tr>`;
        tableBody.append(row);

        setTimeout(() => {
            $(".blink").removeClass("blink");
        }, 1000);
    });
}

8. Expanding the Functionality

1. Add More Cryptocurrencies

Modify the API URL to include more cryptocurrencies:

url: "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,ripple,cardano,solana&vs_currencies=usd",

2. Convert Prices to Multiple Currencies

Modify the API request:

url: "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,ripple&vs_currencies=usd,eur,gbp",

In this tutorial, we built a live cryptocurrency tracker using jQuery and the CoinGecko API. Key takeaways:
✅ Learned about cryptocurrency APIs
✅ Set up a basic HTML, CSS, and JavaScript project
✅ Used jQuery’s $.ajax() method to fetch data
✅ Dynamically updated the UI with real-time data
✅ Added styling and animations

By tweaking the API parameters and UI, you can expand this project into a full-featured crypto dashboard.