${currency.code}
${currency.name.split(' – ')[0]}
`;
div.addEventListener('mouseover', () => {
div.style.transform = 'translateY(-2px)';
div.style.background = '#213152';
});
div.addEventListener('mouseout', () => {
div.style.transform = 'translateY(0)';
div.style.background = '#1a2b45';
});
div.addEventListener('click', () => {
if (convertingCurrency === 1) {
currentCurrency1 = currency;
} else {
currentCurrency2 = currency;
}
updateCurrencyDisplay();
countryModal.classList.remove('active');
});
container.appendChild(div);
});
}
// Update currency display
function updateCurrencyDisplay() {
currencyName1.textContent = `${currentCurrency1.code} – ${currentCurrency1.name}`;
currencyDesc1.textContent = currentCurrency1.desc;
flag1.className = `flag-icon fi fi-${currentCurrency1.flag}`;
currencyName2.textContent = `${currentCurrency2.code} – ${currentCurrency2.name}`;
currencyDesc2.textContent = currentCurrency2.desc;
flag2.className = `flag-icon fi fi-${currentCurrency2.flag}`;
updateConversion();
}
// Update conversion calculation
function updateConversion() {
const usdValue = parseFloat(displayValue);
const rate1 = currentCurrency1.rate;
const rate2 = currentCurrency2.rate;
const usdEquivalent = usdValue / rate1;
const convertedValue = usdEquivalent * rate2;
currencyValue1.textContent = formatNumber(usdValue, currentCurrency1.code);
currencyValue2.textContent = formatNumber(convertedValue, currentCurrency2.code);
}
// Format number based on currency
function formatNumber(value, currencyCode) {
if (['JPY', 'KRW'].includes(currencyCode)) {
return Math.round(value).toLocaleString();
}
return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// Update exchange rates with random variation
function updateExchangeRates() {
currencies.forEach(currency => {
if (currency.code !== 'USD') {
const change = 1 + (Math.random() - 0.3) / 100;
currency.rate *= change;
}
});
updateRealTime();
updateConversion();
// Animate update button
const updateBtn = document.getElementById('updateBtn');
updateBtn.querySelector('i').style.transition = 'transform 0.5s ease';
updateBtn.querySelector('i').style.transform = 'rotate(360deg)';
setTimeout(() => {
updateBtn.querySelector('i').style.transform = 'rotate(0deg)';
}, 500);
}
// Switch currencies
function switchCurrencies() {
const temp = currentCurrency1;
currentCurrency1 = currentCurrency2;
currentCurrency2 = temp;
updateCurrencyDisplay();
// Animate switch button
const switchBtn = document.getElementById('switchBtn');
switchBtn.style.transition = 'transform 0.3s ease';
switchBtn.style.transform = 'rotate(180deg)';
setTimeout(() => {
switchBtn.style.transform = 'rotate(0deg)';
}, 300);
}
// Initialize chart
function initializeChart() {
const ctx = document.getElementById('trendChart').getContext('2d');
// Generate trend data
const baseRate = currentCurrency2.rate;
const trendData = [];
for (let i = 0; i < 7; i++) {
trendData.push(baseRate * (0.995 + Math.random() * 0.01));
}
trendChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: `${currentCurrency1.code}/${currentCurrency2.code}`,
data: trendData,
borderColor: '#5ac8fa',
backgroundColor: 'rgba(90, 200, 250, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4,
pointBackgroundColor: '#5ac8fa',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#fff',
font: {
size: 14
}
}
}
},
scales: {
x: {
ticks: {
color: '#8da1cc'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
y: {
ticks: {
color: '#8da1cc',
callback: function(value) {
return value.toFixed(2);
}
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}
}
});
}
// Open chart modal
function openChartModal() {
chartModal.classList.add('active');
updateChart();
}
// Update chart with current currencies
function updateChart() {
if (!trendChart) return;
const baseRate = currentCurrency2.rate;
const trendData = [];
for (let i = 0; i < 7; i++) {
trendData.push(baseRate * (0.995 + Math.random() * 0.01));
}
trendChart.data.datasets[0].data = trendData;
trendChart.data.datasets[0].label = `${currentCurrency1.code}/${currentCurrency2.code}`;
trendChart.update();
// Update chart modal title
chartModal.querySelector('.modal-header h2').textContent =
`${currentCurrency1.code} to ${currentCurrency2.code} - 7 Day Trend`;
}
// Calculator functionality
function setupCalculator() {
let currentInput = '1.00';
let operator = null;
let previousInput = null;
function updateDisplay() {
displayValue = currentInput;
updateConversion();
}
// Number buttons
document.querySelectorAll('.keypad-btn:not(.operator):not(.equals)').forEach(button => {
button.addEventListener('click', function() {
const value = this.textContent;
if (currentInput === '0' || currentInput === '0.00') {
currentInput = value;
} else if (value === '000') {
currentInput += '000';
} else if (value === '00') {
currentInput += '00';
} else {
currentInput += value;
}
updateDisplay();
});
});
// Operator buttons
document.querySelectorAll('.keypad-btn.operator:not(.equals)').forEach(button => {
button.addEventListener('click', function() {
if (operator !== null) calculate();
operator = this.textContent;
previousInput = currentInput;
currentInput = '0';
});
});
// Equals button
document.querySelector('.keypad-btn.equals').addEventListener('click', function() {
calculate();
operator = null;
});
// Clear button
document.getElementById('clearBtn').addEventListener('click', function() {
currentInput = '0';
previousInput = null;
operator = null;
updateDisplay();
});
// Delete button
document.getElementById('deleteBtn').addEventListener('click', function() {
if (currentInput.length > 1) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = '0';
}
updateDisplay();
});
// Copy button
document.getElementById('copyBtn').addEventListener('click', function() {
navigator.clipboard.writeText(displayValue);
const originalText = this.innerHTML;
this.innerHTML = '
COPIED';
setTimeout(() => {
this.innerHTML = originalText;
}, 1000);
});
function calculate() {
if (operator && previousInput !== null) {
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
let result;
switch(operator) {
case '+': result = prev + current; break;
case '–': result = prev - current; break;
case '×': result = prev * current; break;
case '÷': result = prev / current; break;
default: return;
}
currentInput = result.toString();
updateDisplay();
}
}
}