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
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 =
< 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 =
</ script >
< script src =
</ script >
< script src =
</ 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: