Design a Cryptocurrency Portfolio Tracker in HTML CSS & JavaScript
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 : 100 vh; /* 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 */ } h 1 { 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 h 1 { 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 h 1 { font-size : 24px ; /* Adjust font size for small screens */ } } |
Output:
Contact Us