Create a Real-Time Crypto Price Tracker with HTML, CSS, and JS

·

Learn how to build a real-time crypto price tracker using HTML, CSS, and JavaScript. This project will help you master API integration, dynamic content rendering, and interactive features like search and dark mode toggling.

Why Build a Crypto Price Tracker?

Tracking cryptocurrency prices in real-time is essential for traders, investors, and developers. By building your own tracker, you’ll:

👉 Explore more crypto projects

Prerequisites

Before starting, ensure you have:

Step 1: HTML Structure

Create the foundational HTML structure for your tracker:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto Price Tracker</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Crypto Price Tracker</h1>
        <button id="theme-toggle">Dark Mode</button>
    </header>
    <main>
        <input type="text" id="search" placeholder="Search cryptocurrencies...">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Symbol</th>
                    <th>Price (USD)</th>
                    <th>Market Cap</th>
                </tr>
            </thead>
            <tbody id="crypto-table"></tbody>
        </table>
    </main>
    <footer>
        <p>Powered by <a href="https://www.coingecko.com/" target="_blank">CoinGecko API</a></p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Key Components:

Step 2: CSS Styling

Style your tracker for a polished look:

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f4f8;
    color: #333;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #825CFF;
    color: white;
}

button#theme-toggle {
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    border: none;
    color: #825CFF;
    border-radius: 5px;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

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

table th {
    background-color: #825CFF;
    color: white;
}

.dark-mode {
    background-color: #121212;
    color: white;
}

.dark-mode header {
    background-color: #333;
}

Step 3: JavaScript Functionality

Fetch and display real-time crypto data:

const API_URL = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=10";
const cryptoTable = document.getElementById("crypto-table");
const searchInput = document.getElementById("search");
const themeToggle = document.getElementById("theme-toggle");

async function fetchCryptoData() {
    try {
        const response = await fetch(API_URL);
        const data = await response.json();
        displayCryptoData(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

function displayCryptoData(data) {
    cryptoTable.innerHTML = "";
    data.forEach((coin, index) => {
        const row = `
            <tr>
                <td>${index + 1}</td>
                <td>${coin.name}</td>
                <td>${coin.symbol.toUpperCase()}</td>
                <td>$${coin.current_price.toLocaleString()}</td>
                <td>$${coin.market_cap.toLocaleString()}</td>
            </tr>
        `;
        cryptoTable.innerHTML += row;
    });
}

searchInput.addEventListener("input", (e) => {
    const searchTerm = e.target.value.toLowerCase();
    const rows = cryptoTable.querySelectorAll("tr");
    rows.forEach(row => {
        const name = row.children[1].textContent.toLowerCase();
        row.style.display = name.includes(searchTerm) ? "" : "none";
    });
});

themeToggle.addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
    themeToggle.textContent = document.body.classList.contains("dark-mode") 
        ? "Light Mode" 
        : "Dark Mode";
});

fetchCryptoData();

Features:

👉 Check out advanced crypto tools

FAQs

How do I update the crypto data automatically?

Use setInterval(fetchCryptoData, 60000) to fetch data every 60 seconds.

Can I add more cryptocurrencies to the tracker?

Yes! Modify the per_page parameter in the API URL (e.g., per_page=20).

How do I deploy this tracker?

Host the files on platforms like Netlify, Vercel, or GitHub Pages.

Conclusion

You’ve built a fully functional crypto price tracker! This project demonstrates:

Enhance it further by adding charts, alerts, or portfolio tracking features. Happy coding!