Design a Cryptocurrency Portfolio Tracker in HTML CSS & JavaScript

Last Updated : 27 Feb, 2024

We will learn how to Design a Cryptocurrency Portfolio Tracker. Users will be able to monitor their cryptocurrency investments. This tracker offers real-time data updates and a user-friendly interface, ensuring users can manage their portfolios seamlessly.

Prerequisites

Approach

Implement dynamic fetching of cryptocurrency data from the CoinRanking API to provide real-time updates.
Enable users to add transactions for various cryptocurrencies, including details like name, symbol, price, and quantity.
Design an interactive and visually engaging interface to facilitate easy navigation and comprehension.
Incorporate “View More” links to allow users to explore additional details about each cryptocurrency on the CoinRanking website.

Example: This example shows the implementation of the above-explained approach.

Javascript

// Function to fetch cryptocurrency data from CoinRanking API
async function fetchCryptoData() {
    try {
        const response = await
            fetch('https://api.coinranking.com/v2/coins');
        const data = await response.json();
        return data.data.coins;
    } catch (error) {
        console.error('Error fetching cryptocurrency data:', error);
        return [];
    }
}
 
// Function to display cryptocurrency data in the table
function displayCryptoData(coins) {
    const cryptoTable = document.getElementById('cryptoTable');
    cryptoTable.innerHTML = '';
 
    coins.forEach(coin => {
        const row = document.createElement('tr');
        row.innerHTML = `
        <td><img src="${coin.iconUrl}"
        class="crypto-logo" alt="${coin.name}"></td>
            <td>${coin.name}</td>
            <td>${coin.symbol}</td>
            <td>$${coin.price}</td>
            <td>${coin.change}%</td>
            <td>${coin.volume ? coin.volume : '-'}</td>
            <td>${coin.marketCap ? coin.marketCap : '-'}</td>
        `;
        cryptoTable.appendChild(row);
    });
}
 
// Function to filter cryptocurrencies based on user input
function filterCryptoData(coins, searchTerm) {
    searchTerm = searchTerm.toLowerCase();
 
    const filteredCoins = coins.filter(coin =>
        coin.name.toLowerCase().includes(searchTerm) ||
        coin.symbol.toLowerCase().includes(searchTerm)
    );
 
    return filteredCoins;
}
 
// Function to handle search input
function handleSearchInput() {
    const searchInput = document.getElementById('searchInput');
    const searchTerm = searchInput.value.trim();
 
    fetchCryptoData().then(coins => {
        const filteredCoins = filterCryptoData(coins,
            searchTerm);
        displayCryptoData(filteredCoins);
    });
}
 
// Function to initialize the app
async function initializeApp() {
    const coins = await fetchCryptoData();
    displayCryptoData(coins);
 
    // Add event listener to search input
    const searchInput = 
        document.getElementById('searchInput');
    searchInput.addEventListener('input',
        handleSearchInput);
}
 
// Call initializeApp function
// when the DOM content is loaded
document.addEventListener('DOMContentLoaded'
    , initializeApp);

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Cryptocurrency Portfolio Tracker</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <header class="bg-dark text-white py-4 mb-4">
        <div class="container text-center">
            <h1>Cryptocurrency Portfolio Tracker</h1>
        </div>
    </header>
 
    <div class="container">
        <div class="input-group mb-4">
            <input type="text" id="searchInput"
                   class="form-control"
                   placeholder="Search cryptocurrencies...">
            <div class="input-group-append">
                <button class="btn btn-primary"
                        type="button" id="searchButton">
                  Search</button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Logo</th>
                        <th>Name</th>
                        <th>Symbol</th>
                        <th>Price</th>
                        <th>Price Change</th>
                        <th>24h Volume</th>
                        <th>Market Cap</th>
                    </tr>
                </thead>
                <tbody id="cryptoTable">
                    <!-- Cryptocurrency details will be 
                        inserted here dynamically using JavaScript -->
                </tbody>
            </table>
        </div>
    </div>
 
    <footer class="bg-dark text-white py-4 mt-4">
        <div class="container text-center">
            <p>© 2024 Cryptocurrency Portfolio Tracker</p>
        </div>
    </footer>
 
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js">
      </script>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js">
      </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
      </script>
    <script src="script.js"></script>
</body>
 
</html>

CSS

body {
    background-color: #f5f5f5;
    /* Light gray background */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Set minimum height of the body to full viewport height */
}
 
.container {
    max-width: 800px;
    margin: 0 auto;
    flex: 1;
    /* Allow container to grow to fill remaining space */
}
 
h1 {
    color: #343a40;
    /* Dark gray heading color */
}
 
.input-group {
    margin-bottom: 20px;
}
 
.table {
    width: 100%;
    border-collapse: collapse;
}
 
.table th,
.table td {
    text-align: center;
    white-space: nowrap;
    /* Prevent text wrapping in cells */
    overflow: hidden;
    /* Hide overflowing content */
    text-overflow: ellipsis;
    /* Display ellipsis (...) for overflowed content */
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
 
.table th {
    background-color: #343a40;
    /* Dark gray background for table headers */
    color: #ffffff;
    /* White text color for table headers */
}
 
.table th:first-child,
.table td:first-child {
    font-weight: bold;
    /* Bold font weight for first column */
}
 
.table th:not(:first-child),
.table td:not(:first-child) {
    font-weight: normal;
    /* Normal font weight for other columns */
}
 
.table tbody tr:hover {
    background-color: #f8f9fa;
    /* Light gray background on hover */
    cursor: pointer;
}
 
.crypto-logo {
    width: 30px;
    /* Adjust the width of the coin logo */
    height: 30px;
    /* Adjust the height of the coin logo */
}
 
.btn-primary {
    background-color: #6c757d;
    /* Muted gray button color */
    border-color: #6c757d;
}
 
.btn-primary:hover {
    background-color: #5a6268;
    /* Darker gray on hover */
    border-color: #5a6268;
}
 
footer {
    background-color: #343a40;
    /* Dark gray background for footer */
    color: #ffffff;
    /* White text color for footer */
    text-align: center;
    margin-top: auto;
    /* Push the footer to the bottom */
}
 
header h1 {
    color: #ffffff;
    /* Set heading color to white */
}
 
/* Responsive styles for small screens */
@media only screen and (max-width: 600px) {
 
    .table th,
    .table td {
        font-size: 12px;
        /* Decrease font size for small screens */
        padding: 5px;
    }
 
    header h1 {
        font-size: 24px;
        /* Adjust font size for small screens */
    }
}