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

Faraz

By Faraz -

Learn how to build a real-time crypto price tracker using HTML, CSS, and JavaScript.

Join us on Telegram
create-real-time-crypto-price-tracker-with-html-css-and-javascript.webp
Read AlsoCreating a Tile Spinner Using HTML and CSS.jpgCreating a Tile Spinner Using HTML and CSS (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Tracking cryptocurrency prices in real-time is a popular feature in many applications. Building your own crypto price tracker can help you learn JavaScript and API integration. This guide will show you how to create a real-time crypto price tracker using HTML, CSS, and JavaScript.

With this project, you’ll fetch live crypto data using the CoinGecko API and display it in a user-friendly table. Follow these simple steps to create your tracker.

Prerequisites

Before starting, make sure you have:

  1. Basic knowledge of HTML, CSS, and JavaScript.
  2. A code editor like Visual Studio Code.
  3. An internet connection for fetching API data.
  4. A browser to test your project.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our crypto price tracker. Here’s a detailed explanation of the HTML code:

1. Document Declaration and Setup

<!DOCTYPE html>
<html lang="en">
  • <!DOCTYPE html>: Declares the document as an HTML5 file.
  • <html lang="en">: Specifies the language of the document as English for accessibility and SEO purposes.

2. Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Crypto Price Tracker</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
  <link rel="stylesheet" href="styles.css">
</head>
  • <meta charset="UTF-8">: Sets the character encoding to UTF-8, ensuring support for most languages and symbols.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive by adapting to the screen width of the device.
  • <title>Crypto Price Tracker</title>: Sets the title of the webpage, displayed on the browser tab.
  • <link rel="stylesheet" href="...">:
    • Loads the Poppins font from Google Fonts for modern typography.
    • Includes an external CSS file (styles.css) for styling the webpage.

3. Body Section

The body contains the visible content of the webpage.

Header Section

<header>
  <h1>Crypto Price Tracker</h1>
  <button id="theme-toggle">Dark Mode</button>
</header>
  • <header>: Contains the main title and a button.
  • <h1>: Displays the main heading of the page.
  • <button id="theme-toggle">Dark Mode</button>: A button to toggle between light and dark themes. The id="theme-toggle" can be used in JavaScript to add functionality.

Main Section

<main>
  <input type="text" id="search" placeholder="Search cryptocurrency..." />
  <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">
      <!-- Dynamic Content -->
    </tbody>
  </table>
</main>
  • <main>: The main content area of the webpage.
  • <input type="text" id="search" placeholder="Search cryptocurrency...">: A search bar for filtering cryptocurrencies. The id="search" allows JavaScript to interact with it.
  • <table>: Displays cryptocurrency data in a tabular format.
    • <thead>: Defines the table's header row.
      • <tr>: A row containing <th> elements for column headers:
        • #: Serial number.
        • Name: Name of the cryptocurrency.
        • Symbol: Abbreviation of the cryptocurrency (e.g., BTC for Bitcoin).
        • Price (USD): Current price in USD.
        • Market Cap: Total market capitalization.
    • <tbody id="crypto-table">: The body of the table where dynamic content (cryptocurrency data) will be inserted. The id="crypto-table" allows JavaScript to populate it dynamically.

Footer Section

<footer>
  <p>Powered by <a href="https://coingecko.com" target="_blank">CoinGecko API</a></p>
</footer>
  • <footer>: Displays information at the bottom of the page.
  • <p>: A paragraph containing a link to the CoinGecko API.
  • <a href="https://coingecko.com" target="_blank">: A hyperlink to the CoinGecko website. The target="_blank" opens the link in a new tab.

4. JavaScript Integration

<script src="script.js"></script>
  • Includes the script.js file, which contains JavaScript logic for fetching cryptocurrency data, populating the table, and handling interactions like theme toggling and search.
Read Alsohow to sort rows in a table with headers using javascript.pngHow to Sort HTML Table by Header Click | Sorting Data Tables

Step 2 (CSS Code):

Once the basic HTML structure of the tracker is in place, the next step is to add styling to the tracker using CSS. Here's a detailed explanation:

1. Global Styles

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f4f8;
  color: #333;
}
  • font-family: 'Poppins', sans-serif;: Sets the font for the entire webpage to Poppins for a modern look.
  • margin: 0; padding: 0;: Removes default margins and padding from the body.
  • background-color: #f0f4f8;: Sets a light gray background color.
  • color: #333;: Sets the default text color to a dark gray for readability.

2. Header Styling

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #825CFF;
  color: white;
}
  • display: flex;: Makes the header a flex container for easy alignment of its children (title and button).
  • justify-content: space-between;: Places the title and button at opposite ends.
  • align-items: center;: Vertically centers the content.
  • padding: 1rem;: Adds space around the header content.
  • background-color: #825CFF;: Sets the header background to purple.
  • color: white;: Makes the text white for contrast.

3. Header Title

header h1 {
  margin: 0;
}
  • Removes default margins from the <h1> element to align it properly.

4. Theme Toggle Button

button#theme-toggle {
  font-family: 'Poppins', sans-serif;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: none;
  color: #825CFF;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
  • font-family: 'Poppins', sans-serif;: Ensures the button text matches the page font.
  • padding: 0.5rem 1rem;: Adds internal spacing for a clickable, comfortable size.
  • background-color: #ffffff;: Sets the button background to white.
  • border: none;: Removes the default border for a cleaner look.
  • color: #825CFF;: Sets the text color to purple.
  • border-radius: 5px;: Rounds the button corners slightly.
  • cursor: pointer;: Changes the cursor to a pointer on hover to indicate interactivity.
  • font-size: 14px;: Sets a readable font size.

5. Main Section

main {
  padding: 1rem;
}
  • Adds padding around the main content area for spacing.

6. Search Input

input#search {
  width: 300px;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #825CFF;
  border-radius: 5px;
  outline: none;
}
  • width: 300px;: Sets the input width.
  • padding: 0.5rem;: Adds internal spacing.
  • margin-bottom: 1rem;: Adds space below the input field.
  • border: 1px solid #825CFF;: Adds a purple border.
  • border-radius: 5px;: Rounds the corners.
  • outline: none;: Removes the default focus outline.

7. Table Styling

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
  • width: 100%;: Makes the table span the full width of its container.
  • border-collapse: collapse;: Removes spacing between table cells for a compact look.
  • margin-bottom: 1rem;: Adds space below the table.

Table Cells

table th, table td {
  text-align: left;
  padding: 0.75rem;
  border: 1px solid #ddd;
}
  • text-align: left;: Aligns text to the left.
  • padding: 0.75rem;: Adds spacing inside cells.
  • border: 1px solid #ddd;: Adds a light gray border around cells.

Table Header

table th {
  background-color: #825CFF;
  color: white;
}
  • background-color: #825CFF;: Sets the header background to purple.
  • color: white;: Makes the header text white for contrast.

Table Image Row

table .crypto-image {
  display: flex;
  align-items: center;
  gap: 15px;
}
  • display: flex;: Aligns image and text in a row.
  • align-items: center;: Vertically centers the content.
  • gap: 15px;: Adds spacing between the image and text.

Table Images

table img {
  width: 60px;
  height: 60px;
}
  • Sets a fixed size for cryptocurrency icons.

8. Footer

footer {
  text-align: center;
  padding: 1rem;
  background-color: #825CFF;
  color: white;
}
  • text-align: center;: Centers the footer text.
  • padding: 1rem;: Adds spacing around the content.
  • background-color: #825CFF;: Purple background for consistency.
  • color: white;: White text for contrast.

9. Dark Mode

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

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

body.dark-mode button#theme-toggle {
  background-color: #6200ea;
  color: white;
}

body.dark-mode table th {
  background-color: #333;
}
  • body.dark-mode: Applies dark mode styling.
    • Background: Dark gray.
    • Text: White for better visibility.
  • header and table th: Darkens the header and table header for a cohesive dark theme.
  • button#theme-toggle: Adjusts the button colors for dark mode.
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;
}

header h1 {
  margin: 0;
}

button#theme-toggle {
  font-family: 'Poppins', sans-serif;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: none;
  color: #825CFF;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

main {
  padding: 1rem;
}

input#search {
  width: 300px;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #825CFF;
  border-radius: 5px;
  outline: none;
}

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

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

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

table .crypto-image{
  display: flex;
  align-items: center;
  gap: 15px;
}

table img {
  width: 60px;
  height: 60px;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #825CFF;
  color: white;
}

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

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

body.dark-mode button#theme-toggle {
  background-color: #6200ea;
  color: white;
}

body.dark-mode table th {
  background-color: #333;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Here's a detailed explanation:

1. API URL

const API_URL = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=10";
  • API_URL: A constant string storing the CoinGecko API endpoint to fetch cryptocurrency data.
    • vs_currency=usd: Fetches prices in USD.
    • per_page=10: Limits the result to 10 cryptocurrencies.

2. DOM Elements

const cryptoTable = document.getElementById("crypto-table");
const searchInput = document.getElementById("search");
const themeToggle = document.getElementById("theme-toggle");
  • cryptoTable: The table where cryptocurrency data will be displayed.
  • searchInput: The search input field for filtering cryptocurrencies.
  • themeToggle: The button to toggle between light and dark modes.

3. Fetching Cryptocurrency Data

async function fetchCryptoData() {
  const response = await fetch(API_URL);
  const data = await response.json();
  displayCryptoData(data);
}
  • fetchCryptoData: An asynchronous function to fetch data from the API.
    • fetch(API_URL): Sends a GET request to the API.
    • response.json(): Parses the response into JSON format.
    • displayCryptoData(data): Passes the fetched data to the display function.

4. Displaying Cryptocurrency Data

function displayCryptoData(data) {
  cryptoTable.innerHTML = ""; 
  data.forEach((coin, index) => {
    const row = `
      <tr>
        <td>${index + 1}</td>
        <td class="crypto-image"><img src="${coin.image}" alt="${coin.name} logo"> ${coin.name}</td>
        <td>${coin.symbol.toUpperCase()}</td>
        <td>$${coin.current_price.toLocaleString()}</td>
        <td>$${coin.market_cap.toLocaleString()}</td>
      </tr>
    `;
    cryptoTable.innerHTML += row;
  });
}
  • cryptoTable.innerHTML = "";: Clears the table before adding new rows.
  • data.forEach: Iterates over the array of cryptocurrency data.
    • index + 1: Displays the serial number.
    • coin.image: Shows the cryptocurrency's logo.
    • coin.name: Displays the name of the cryptocurrency.
    • coin.symbol.toUpperCase(): Shows the symbol in uppercase.
    • coin.current_price.toLocaleString(): Formats the current price with commas.
    • coin.market_cap.toLocaleString(): Formats the market cap with commas.
  • cryptoTable.innerHTML += row;: Adds each row to the table.

5. Search Functionality

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();
    if (name?.includes(searchTerm)) {
      row.style.display = "";
    } else {
      row.style.display = "none";
    }
  });
});
  • searchInput.addEventListener("input", ...): Adds an event listener for user input in the search field.
  • searchTerm: Converts the input to lowercase for case-insensitive matching.
  • rows: Selects all rows in the table.
  • row.children[1]?.textContent.toLowerCase(): Gets the text content of the second column (cryptocurrency name).
  • row.style.display: Shows or hides the row based on whether the name includes the search term.

6. Theme Toggle

themeToggle.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
  themeToggle.textContent = document.body.classList.contains("dark-mode")
    ? "Light Mode"
    : "Dark Mode";
});
  • themeToggle.addEventListener("click", ...): Adds an event listener to the theme toggle button.
  • document.body.classList.toggle("dark-mode"): Toggles the dark-mode class on the body.
  • themeToggle.textContent: Updates the button text to reflect the current theme:
    • "Light Mode": When in dark mode.
    • "Dark Mode": When in light mode.

7. Initial Data Fetch

fetchCryptoData();
  • Calls the fetchCryptoData function to load cryptocurrency data when the page loads.
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() {
  const response = await fetch(API_URL);
  const data = await response.json();
  displayCryptoData(data);
}

function displayCryptoData(data) {
  cryptoTable.innerHTML = ""; 
  data.forEach((coin, index) => {
    const row = `
      <tr>
        <td>${index + 1}</td>
        <td class="crypto-image"><img src="${coin.image}" alt="${coin.name} logo"> ${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();
    if (name?.includes(searchTerm)) {
      row.style.display = "";
    } else {
      row.style.display = "none";
    }
  });
});

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

fetchCryptoData();

Final Output:

create-real-time-crypto-price-tracker-with-html-css-and-javascript.gif
Read Alsofruit shop landing page with html and css.jpgFruit Shop Landing Page with HTML and CSS (Source code)

Conclusion:

You’ve successfully created a real-time crypto price tracker using HTML, CSS, and JavaScript. This project taught you how to fetch data from an API, display it dynamically, and add interactive features like search and theme toggling.

Keep exploring more APIs and enhancing your skills.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a real-time crypto price tracker, real-time cryptocurrency tracker using javascript, crypto price tracker tutorial for beginners, build a cryptocurrency tracker with coingecko api, html css javascript crypto tracker project, source code, api projects, crypto tracker, javascript project, real-time tracker, cryptocurrency api, html css javascript
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺