That’s a detailed project, and I’ll break it down step by step. Here’s a fully detailed and comprehensive guide on Creating a Live Cryptocurrency Price Tracker using jQuery, AJAX, and a Public API.

Creating a Live Cryptocurrency Price Tracker using jQuery

Introduction
Setting Up the Environment
Understanding API Calls for Live Data
Building the HTML Structure
Styling with CSS
Fetching Live Data with jQuery & AJAX
Displaying the Data Dynamically
Refreshing Data at Regular Intervals
Adding Advanced Features (Sorting, Filtering, and Search)
Handling API Errors and Optimizing Performance
Deploying the Tracker Online
Conclusion

1. Introduction

With the rise of cryptocurrency investments, real-time price tracking has become essential. In this tutorial, we will create a Live Cryptocurrency Price Tracker using jQuery, AJAX, and the CoinGecko API (a free API that provides real-time crypto prices).

By the end of this tutorial, you will have a fully functional cryptocurrency price tracker that fetches live price data, updates dynamically, and allows users to sort and filter coins.

2. Setting Up the Environment

Before starting, ensure you have:

A code editor like VS Code or Sublime Text.
A modern browser (Chrome, Firefox).
Basic knowledge of HTML, CSS, and JavaScript (jQuery).
A public API (we will use CoinGecko API).

Including jQuery in Your Project

You can add jQuery to your project in two ways:

Using CDN (Recommended) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Downloading jQuery
- Download the jQuery file from jquery.com
- Include it in your project: <script src="jquery.min.js"></script>

3. Understanding API Calls for Live Data

We’ll use the CoinGecko API, which allows us to fetch real-time crypto prices without requiring authentication.

CoinGecko API Endpoint

To get live data of multiple cryptocurrencies:

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

vs_currency=usd → Prices in USD
order=market_cap_desc → Sorted by market cap
per_page=10 → Fetches 10 coins
page=1 → Page number
sparkline=false → Excludes sparkline graphs

You can access this URL in a browser to see JSON data.

4. Building the HTML Structure

We need a table to display the cryptocurrency data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Crypto Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Live Cryptocurrency Price Tracker</h1>

    <input type="text" id="search" placeholder="Search Cryptocurrency...">

    <table>
        <thead>
            <tr>
                <th>Logo</th>
                <th>Name</th>
                <th>Symbol</th>
                <th>Price (USD)</th>
                <th>Market Cap</th>
                <th>24h Change</th>
            </tr>
        </thead>
        <tbody id="crypto-table">
            <!-- Data will be injected here -->
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>

</body>
</html>

5. Styling with CSS

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

h1 {
    margin-top: 20px;
    color: #333;
}

input {
    margin-bottom: 20px;
    padding: 10px;
    width: 250px;
    font-size: 16px;
}

table {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    background: #fff;
}

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

th {
    background-color: #333;
    color: #fff;
}

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

6. Fetching Live Data with jQuery & AJAX

$(document).ready(function() {
    function fetchCryptoData() {
        $.ajax({
            url: "https://api.coingecko.com/api/v3/coins/markets",
            method: "GET",
            data: {
                vs_currency: "usd",
                order: "market_cap_desc",
                per_page: 10,
                page: 1,
                sparkline: false
            },
            success: function(data) {
                $("#crypto-table").empty();
                data.forEach(coin => {
                    let priceChangeClass = coin.price_change_percentage_24h >= 0 ? 'green' : 'red';
                    $("#crypto-table").append(`
                        <tr>
                            <td><img src="${coin.image}" width="30"></td>
                            <td>${coin.name}</td>
                            <td>${coin.symbol.toUpperCase()}</td>
                            <td>$${coin.current_price.toLocaleString()}</td>
                            <td>$${coin.market_cap.toLocaleString()}</td>
                            <td class="${priceChangeClass}">${coin.price_change_percentage_24h.toFixed(2)}%</td>
                        </tr>
                    `);
                });
            }
        });
    }

    fetchCryptoData();
    setInterval(fetchCryptoData, 60000); // Refresh every 60 seconds
});

$.ajax() fetches the live data from CoinGecko API.
Data is appended dynamically to the <tbody> element.
The data updates every 60 seconds.

7. Adding Sorting, Filtering, and Search

Adding a Search Feature

Modify script.js:

$("#search").on("keyup", function() {
    let value = $(this).val().toLowerCase();
    $("#crypto-table tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
});

Filters table rows dynamically as user types.

8. Handling API Errors

Modify the AJAX request:

error: function(xhr, status, error) {
    console.error("Error fetching data:", error);
    $("#crypto-table").html("<tr><td colspan='6'>Error loading data. Try again later.</td></tr>");
}

If the API fails, it displays an error message.

9. Deploying the Tracker Online

You can host the project using:

GitHub Pages (Static Deployment)
Netlify or Vercel for free hosting.

This guide taught you how to: ✅ Fetch live crypto data using jQuery & AJAX
✅ Display data dynamically
✅ Refresh prices every minute
✅ Implement search functionality
✅ Handle API errors gracefully

Now, try adding more features like:

Dark mode
Historical price charts
More coins

Start coding your crypto tracker today!

Creating a live cryptocurrency price tracker