-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcrypto.html
144 lines (125 loc) · 5.12 KB
/
crypto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Ticker Display</title>
<style>
/* Base Styles */
body {
font-family: Arial, sans-serif;
background-color: black;
color: white;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
/* Ticker Grid Layout */
.ticker-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
padding: 20px;
width: 80%;
box-sizing: border-box;
}
/* Ticker Item Styles */
.ticker-item {
font-family: 'Courier New', Courier, monospace;
color: #00FF00;
background-color: #000000;
padding: 20px;
border-radius: 5px;
border: 1px solid #00FF00;
text-align: center;
transition: background-color 0.5s ease;
}
/* Flash Animations */
.flash-up { animation: flashUp 0.5s; }
.flash-down { animation: flashDown 0.5s; }
/* Keyframes for Flash Animation */
@keyframes flashUp { 0% { background-color: #00ff00; } 100% { background-color: #000000; } }
@keyframes flashDown { 0% { background-color: #ff0000; } 100% { background-color: #000000; } }
/* Center the Ticker Item Text */
.ticker-item span {
display: block;
font-size: 20px;
color: #FF00FF;
margin-bottom: 10px;
}
/* Set container to be flexible */
.ticker-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
</style>
</head>
<body>
<!-- Ticker Container -->
<div id="ticker-container" class="ticker-container"></div>
<script>
const tickers = [
'BTC-USDT', 'ETH-USDT', 'XMR-USDT', 'LTC-USDT', 'DOGE-USDT', 'ZEC-USDT', 'ADA-USDT', 'XRP-USDT',
'BNB-USDT', 'SOL-USDT', 'DOT-USDT', 'TRX-USDT', 'MATIC-USDT', 'SHIB-USDT', 'LINK-USDT', 'AVAX-USDT',
'BCH-USDT', 'LUNA-USDT', 'FTM-USDT', 'GRT-USDT'
];
// Store previous prices to track changes
const previousPrices = {};
// Populate ticker items in the container
const tickerContainer = document.getElementById('ticker-container');
tickers.forEach(ticker => {
const item = document.createElement('div');
item.className = 'ticker-item';
item.dataset.ticker = ticker;
item.textContent = `${ticker} - Loading...`;
tickerContainer.appendChild(item);
});
// Fetch and update crypto prices with flash effect
async function grab() {
for (const singleticker of tickers) {
try {
const response = await fetch(`https://tradeogre.com/api/v1/ticker/${singleticker}`);
const quote = await response.json();
if (!quote.success || !quote.bid || !quote.ask) continue;
// Get the bid and ask prices
const bidPrice = parseFloat(quote.bid);
const askPrice = parseFloat(quote.ask);
// Calculate the mid price (average of bid and ask)
const midPrice = ((bidPrice + askPrice) / 2).toFixed(2);
// Find the ticker item element
const item = document.querySelector(`.ticker-item[data-ticker='${singleticker}']`);
// Compare to previous price and apply flash if needed
const oldPrice = previousPrices[singleticker];
previousPrices[singleticker] = midPrice;
// Add flash class if price has changed
if (oldPrice !== undefined) {
item.classList.remove('flash-up', 'flash-down'); // Reset flash classes
if (midPrice > oldPrice) {
item.classList.add('flash-up');
} else if (midPrice < oldPrice) {
item.classList.add('flash-down');
}
// Remove flash class after animation
setTimeout(() => item.classList.remove('flash-up', 'flash-down'), 500);
}
// Update the ticker text with the mid price
item.innerHTML = `
<span>${singleticker}</span>
$${midPrice}
`;
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
// Initialize and update prices periodically
setInterval(grab, 2000); // Update every 2 seconds
</script>
</body>
</html>