create a more advanced version of the Crypto Tracker with a search function and additional features, we can extend our previous implementation. Here’s how you can do it:
New Features:
- Search Functionality: Allow users to search for specific cryptocurrencies by name or symbol.
- Auto-Refresh: Refresh the data at regular intervals.
- More Detailed Information: Display additional details like 24h volume and supply.
Step 1: Updated HTML Structure
Add a search bar and update the table to accommodate more detailed information.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Crypto Tracker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f4f4f4;
}
#search-bar {
margin-bottom: 20px;
width: 100%;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Advanced Crypto Tracker</h1>
<input type="text" id="search-bar" placeholder="Search for a cryptocurrency...">
<table>
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Current Price (USD)</th>
<th>Market Cap (USD)</th>
<th>24h Change</th>
<th>24h Volume (USD)</th>
<th>Circulating Supply</th>
</tr>
</thead>
<tbody id="crypto-data">
<!-- Data will be injected here by JavaScript -->
</tbody>
</table>
<script>
const API_URL = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd';
async function fetchCryptoData() {
try {
const response = await fetch(API_URL);
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching crypto data:', error);
return [];
}
}
function displayCryptoData(data) {
const tableBody = document.getElementById('crypto-data');
tableBody.innerHTML = ''; // Clear any existing data
data.forEach(coin => {
const row = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = coin.name;
row.appendChild(nameCell);
const symbolCell = document.createElement('td');
symbolCell.textContent = coin.symbol.toUpperCase();
row.appendChild(symbolCell);
const priceCell = document.createElement('td');
priceCell.textContent = `$${coin.current_price.toLocaleString()}`;
row.appendChild(priceCell);
const marketCapCell = document.createElement('td');
marketCapCell.textContent = `$${coin.market_cap.toLocaleString()}`;
row.appendChild(marketCapCell);
const changeCell = document.createElement('td');
changeCell.textContent = `${coin.price_change_percentage_24h.toFixed(2)}%`;
changeCell.style.color = coin.price_change_percentage_24h >= 0 ? 'green' : 'red';
row.appendChild(changeCell);
const volumeCell = document.createElement('td');
volumeCell.textContent = `$${coin.total_volume.toLocaleString()}`;
row.appendChild(volumeCell);
const supplyCell = document.createElement('td');
supplyCell.textContent = coin.circulating_supply.toLocaleString();
row.appendChild(supplyCell);
tableBody.appendChild(row);
});
}
function filterData(data, query) {
return data.filter(coin =>
coin.name.toLowerCase().includes(query.toLowerCase()) ||
coin.symbol.toLowerCase().includes(query.toLowerCase())
);
}
async function main() {
let cryptoData = await fetchCryptoData();
document.getElementById('search-bar').addEventListener('input', (event) => {
const query = event.target.value;
const filteredData = filterData(cryptoData, query);
displayCryptoData(filteredData);
});
displayCryptoData(cryptoData);
// Auto-refresh every 5 minutes (300000 milliseconds)
setInterval(async () => {
cryptoData = await fetchCryptoData();
displayCryptoData(cryptoData);
}, 300000);
}
main();
</script>
</body>
</html>
Explanation:
- HTML Structure:
- Added a search bar (
<input type="text" id="search-bar">) above the table. - The table now includes columns for 24h volume and circulating supply.
- Added a search bar (
- JavaScript Code:
fetchCryptoData: Fetches data from the CoinGecko API.displayCryptoData: Displays the fetched data in the table. It now includes additional details like 24h volume and circulating supply.filterData: Filters the data based on the search query (name or symbol).main: Fetches the initial data and sets up an event listener for the search bar to filter the data as the user types. Also sets up an auto-refresh interval to refresh the data every 5 minutes.
Running the Application
- Save the updated HTML code to a file named
index.html. - Open this file in a web browser.
You should see a table displaying real-time data for various cryptocurrencies fetched from the CoinGecko API. The search function will filter the displayed data based on the input, and the data will refresh every 5 minutes to ensure it stays up to date.
This advanced version provides more detailed information and a better user experience with the search functionality and auto-refresh feature.
Leave a Reply