The Real-world Currency Price Tracker is a web-based application designed to provide users with real-time information on currency exchange rates. Developed using HTML, CSS, and JavaScript, this project leverages the ExchangeRate-API to fetch the latest exchange rates in relation to the US Dollar (USD). The application features a clean and intuitive user interface, allowing users to search for specific currencies and view their exchange rates dynamically displayed in a table format.
Key Features:
- Currency Selection: Users can select their preferred currency from a dropdown menu to view exchange rates against the USD for various currencies worldwide.
- Search Functionality: The application includes a search input field that enables users to search for specific currencies by name, symbol, or country.
- Dynamic Data Display: Exchange rates are fetched from the ExchangeRate-API and dynamically updated in real-time, ensuring users have access to the latest currency values.
- Responsive Design: The application is designed to be responsive and mobile-friendly, allowing users to access and use it seamlessly across different devices and screen sizes.
- Error Handling: The application incorporates error handling mechanisms to gracefully handle errors such as network failures or API response errors, ensuring a smooth user experience.
- Cross-Browser Compatibility: Compatibility testing is conducted to ensure that the application functions consistently across various web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
- Performance Optimization: The application is optimized for performance to minimize loading times and ensure a fast and responsive user experience.
Overall, the Real-world Currency Price Tracker aims to provide users with a convenient and reliable tool for tracking currency exchange rates, empowering them to make informed decisions in the realm of global finance. Whether for personal, business, or educational purposes, this application serves as a valuable resource for anyone seeking to stay updated on the ever-changing world of currency markets.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-world Currency 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;
}
</style>
</head>
<body>
<div class="container">
<h1>Real-world Currency Price Tracker</h1>
<input type="text" id="searchInput" placeholder="Search for currency...">
<table>
<thead>
<tr>
<th>Currency</th>
<th>Symbol</th>
<th>Exchange Rate (USD)</th>
</tr>
</thead>
<tbody id="currencyPrices"></tbody>
</table>
</div>
<script>
function fetchCurrencyPrices() {
fetch('https://api.exchangerate-api.com/v4/latest/USD')
.then(response => response.json())
.then(data => {
const currencyRates = data.rates;
const currencyPriceList = document.getElementById('currencyPrices');
currencyPriceList.innerHTML = ''; // Clear previous data
for (const [currency, exchangeRate] of Object.entries(currencyRates)) {
const row = document.createElement('tr');
row.innerHTML = `
<td>${currency}</td>
<td>${getCurrencySymbol(currency)}</td>
<td>${exchangeRate}</td>
`;
currencyPriceList.appendChild(row);
}
})
.catch(error => {
console.error('Error fetching currency prices:', error);
document.getElementById('currencyPrices').innerText = 'Error fetching currency prices';
});
}
// Fetch currency prices initially
fetchCurrencyPrices();
// Search functionality
document.getElementById('searchInput').addEventListener('input', function() {
const searchQuery = this.value.trim().toLowerCase();
const rows = document.getElementById('currencyPrices').getElementsByTagName('tr');
for (const row of rows) {
const currency = row.cells[0].innerText.toLowerCase();
if (currency.includes(searchQuery)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
});
// Function to get currency symbol based on currency code
function getCurrencySymbol(currency) {
const currencySymbols = {
'USD': '$',
'EUR': '€',
'GBP': '£',
// Add more currency symbols here as needed
};
return currencySymbols[currency] || '';
}
</script>
</body>
</html>
This Price Tracker fetches real-world currency exchange rates in relation to the US Dollar (USD) from the ExchangeRate-API. It allows users to search for specific currencies and displays their exchange rates in a table.
Test: https://tonyc.info/testing/Real-worldCurrencyPriceTracker.html
Leave a Reply