Sure! Here's an example program using HTML, JavaScript, and an API to display real-time Copa trade information:
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Copa Trade Information</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Real-Time Copa Trade Information</h1>
<table id="tradeTable">
<tr>
<th>Symbol</th>
<th>Last Price</th>
<th>Volume</th>
<th>High</th>
<th>Low</th>
</tr>
</table>
<script>
// Function to fetch trade information from the API
function fetchTradeInfo() {
// Replace 'YOUR_API_KEY' with your actual API key
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://api.example.com/trades?symbol=copa&apikey=${apiKey}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// Clear previous table data
const table = document.getElementById('tradeTable');
while (table.rows.length > 1) {
table.deleteRow(1);
}
// Populate table with new data
data.forEach(trade => {
const row = table.insertRow();
row.insertCell().innerText = trade.symbol;
row.insertCell().innerText = trade.lastPrice;
row.insertCell().innerText = trade.volume;
row.insertCell().innerText = trade.high;
row.insertCell().innerText = trade.low;
});
})
.catch(error => {
console.log('Error fetching trade information:', error);
});
}
// Fetch trade information initially
fetchTradeInfo();
// Fetch trade information every 5 seconds
setInterval(fetchTradeInfo, 5000);
</script>
</body>
</html>
In the above code, replace `'YOUR_API_KEY'` with your actual API key. This code assumes that the API endpoint for fetching Copa trade information is `https://api.example.com/trades`. Modify the API URL according to the actual endpoint.
The code creates an HTML table with columns for symbol, last price, volume, high, and low. It fetches trade information from the API using `fetch()` and populates the table with the received data. The `fetchTradeInfo()` function is called initially to fetch data on page load and is then scheduled to be called every 5 seconds using `setInterval()`.