Lets create a cryptocurrency tracking website that displays prices for all cryptocurrencies available in the world, you’ll need to fetch data from a cryptocurrency API that provides comprehensive information about all cryptocurrencies. CoinGecko is a popular choice for this purpose. Here’s how you can build it:
Introduction: Cryptocurrency Price Tracker
Welcome to the Cryptocurrency Price Tracker! This webpage provides real-time information about various cryptocurrencies, allowing you to stay updated on the latest prices, market caps, trading volumes, and percentage changes.
Cryptocurrencies have gained significant popularity in recent years as digital assets that utilize cryptographic techniques to secure financial transactions, control the creation of new units, and verify the transfer of assets. With thousands of cryptocurrencies available in the market, tracking their prices and market trends can be challenging. Our Cryptocurrency Price Tracker simplifies this process by aggregating data from the CoinGecko API, providing you with comprehensive insights into the cryptocurrency market.
Key Features:
- Dynamic Data Display: The webpage dynamically fetches cryptocurrency data from the CoinGecko API, ensuring that you receive up-to-date information on cryptocurrency prices and market trends.
- Currency Selection: You can select your preferred currency for viewing cryptocurrency prices, including USD, EUR, GBP, and PHP (Philippine Peso). Simply choose your desired currency from the dropdown menu, and the prices will be displayed accordingly.
- Search Functionality: Looking for a specific cryptocurrency? Use the search input field to quickly find cryptocurrencies by name or symbol. The webpage filters the cryptocurrency table in real-time based on your search query, making it easy to locate the desired cryptocurrency.
- Website Links: Each cryptocurrency entry includes a hyperlink to its official website, allowing you to explore further information about the cryptocurrency directly from the source.
Get Started:
Begin exploring the world of cryptocurrencies by selecting your preferred currency from the dropdown menu and using the search functionality to find specific cryptocurrencies. Stay informed about cryptocurrency prices, market caps, trading volumes, and percentage changes with our Cryptocurrency Price Tracker!
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cryptocurrency Price Tracker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
h1 {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}
table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 10px;
border-bottom: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f9f9f9;
}
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Cryptocurrency Price Tracker</h1>
<div>
<label for="currencySelect">Select Currency:</label>
<select id="currencySelect">
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
<option value="php">PHP</option>
<!-- Add more currency options here -->
</select>
</div>
<input type="text" id="searchInput" placeholder="Search for cryptocurrency...">
<table>
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price</th>
<th>Market Cap</th>
<th>Volume (24h)</th>
<th>% Change (24h)</th>
</tr>
</thead>
<tbody id="cryptoPrices"></tbody>
</table>
</div>
<script>
function fetchCryptoPrices(currency) {
fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}`)
.then(response => response.json())
.then(data => {
const cryptoPrices = data;
const cryptoPriceList = document.getElementById('cryptoPrices');
cryptoPriceList.innerHTML = ''; // Clear previous data
cryptoPrices.forEach(crypto => {
const name = crypto.name;
const symbol = crypto.symbol.toUpperCase();
const price = crypto.current_price;
const marketCap = crypto.market_cap;
const volume = crypto.total_volume;
const percentChange = crypto.price_change_percentage_24h;
const row = document.createElement('tr');
row.innerHTML = `
<td>${name}</td>
<td>${symbol}</td>
<td>${price.toLocaleString(currency, {style: 'currency', currency: currency.toUpperCase()})}</td>
<td>${marketCap.toLocaleString(currency, {style: 'currency', currency: currency.toUpperCase()})}</td>
<td>${volume.toLocaleString(currency, {style: 'currency', currency: currency.toUpperCase()})}</td>
<td>${percentChange.toFixed(2)}%</td>
`;
cryptoPriceList.appendChild(row);
});
})
.catch(error => {
console.error('Error fetching cryptocurrency prices:', error);
document.getElementById('cryptoPrices').innerText = 'Error fetching cryptocurrency prices';
});
}
// Fetch cryptocurrency prices initially with USD
fetchCryptoPrices('usd');
// Fetch cryptocurrency prices when the currency is changed
document.getElementById('currencySelect').addEventListener('change', function() {
const selectedCurrency = this.value;
fetchCryptoPrices(selectedCurrency);
});
// Search functionality
document.getElementById('searchInput').addEventListener('input', function() {
const searchQuery = this.value.trim().toLowerCase();
const rows = document.getElementById('cryptoPrices').getElementsByTagName('tr');
for (const row of rows) {
const name = row.cells[0].innerText.toLowerCase();
const symbol = row.cells[1].innerText.toLowerCase();
if (name.includes(searchQuery) || symbol.includes(searchQuery)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
});
</script>
</body>
</html>
Test: https://tonyc.info/testing/CryptocurrencyTracking.html
Leave a Reply