MULTI CURRENCY CONVERTER
Updated: Loading…
00:00:00
0
${currencyCode}
${currency.name}
${currencyCode}
${currency.name}
No currencies found matching "${searchTerm}"
`;
currencyList.appendChild(noResults);
}
}
// Close currency modal
function closeCurrencyModal() {
currencyModal.style.display = 'none';
currencySearch.value = '';
}
// Calculator functions
function updateCalculationDisplay(value) {
calcDisplay.textContent = value;
currentCalculation = value;
}
function handleNumberInput(number) {
if (currentCalculation === '0' || lastCalculationResult !== null) {
updateCalculationDisplay(number);
lastCalculationResult = null;
} else {
updateCalculationDisplay(currentCalculation + number);
}
// Update base amount and currency values
const newValue = parseFloat(currentCalculation + number);
if (!isNaN(newValue)) {
baseAmount = newValue;
updateAllCurrencyValues();
}
}
function handleOperatorInput(operator) {
if (lastCalculationResult !== null) {
updateCalculationDisplay(lastCalculationResult + operator);
lastCalculationResult = null;
} else {
updateCalculationDisplay(currentCalculation + operator);
}
}
function handleEquals() {
try {
// Replace × and ÷ with * and / for evaluation
let expression = currentCalculation
.replace(/×/g, '*')
.replace(/÷/g, '/')
.replace(/−/g, '-');
// Handle percentage calculations
expression = expression.replace(/(\d+(\.\d+)?)%/g, '($1/100)');
// Evaluate the expression
const result = eval(expression);
// Update display with result
updateCalculationDisplay(formatCurrencyValue(result));
// Update base amount and currency values
baseAmount = result;
updateAllCurrencyValues();
// Store result for next operation
lastCalculationResult = result.toString();
} catch (error) {
updateCalculationDisplay('Error');
setTimeout(() => updateCalculationDisplay('0'), 1000);
}
}
function handleClear() {
updateCalculationDisplay('0');
baseAmount = 0;
updateAllCurrencyValues();
lastCalculationResult = null;
}
function handleDelete() {
if (currentCalculation.length > 1) {
const newValue = currentCalculation.slice(0, -1);
updateCalculationDisplay(newValue);
const newBase = parseFloat(newValue);
if (!isNaN(newBase)) {
baseAmount = newBase;
updateAllCurrencyValues();
}
} else {
updateCalculationDisplay('0');
baseAmount = 0;
updateAllCurrencyValues();
}
}
function handleDecimal() {
if (!currentCalculation.includes('.')) {
updateCalculationDisplay(currentCalculation + '.');
}
}
function handlePlusMinus() {
if (currentCalculation.startsWith('-')) {
updateCalculationDisplay(currentCalculation.substring(1));
} else {
updateCalculationDisplay('-' + currentCalculation);
}
// Update base amount
baseAmount = -baseAmount;
updateAllCurrencyValues();
}
function handlePercent() {
const currentValue = parseFloat(currentCalculation);
if (!isNaN(currentValue)) {
const percentValue = currentValue / 100;
updateCalculationDisplay(percentValue.toString());
baseAmount = percentValue;
updateAllCurrencyValues();
lastCalculationResult = percentValue.toString();
}
}
function handleCopy() {
navigator.clipboard.writeText(currentCalculation)
.then(() => {
// Visual feedback
const button = document.querySelector('[data-action="copy"]');
button.innerHTML = '';
setTimeout(() => {
button.textContent = 'COPY';
}, 1000);
})
.catch(err => {
console.error('Failed to copy: ', err);
});
}
function handleSend() {
// In a real app, this would send the calculation to a service
alert(`Calculation sent: ${currentCalculation}`);
// Visual feedback
const button = document.querySelector('[data-action="send"]');
button.classList.add('button-pressed');
setTimeout(() => button.classList.remove('button-pressed'), 100);
}
// Set up event listeners
function setupEventListeners() {
// Menu toggle
menuBtn.addEventListener('click', toggleMenu);
menuOverlay.addEventListener('click', closeMenu);
// Menu item clicks
menuItems.forEach(item => {
item.addEventListener('click', (e) => {
const feature = e.currentTarget.dataset.feature;
handleMenuItemClick(feature);
});
});
// Add currency button
addCurrencyBtn.addEventListener('click', () => openCurrencyModal());
// Modal close buttons
closeModal.addEventListener('click', closeCurrencyModal);
window.addEventListener('click', (e) => {
if (e.target === currencyModal) {
closeCurrencyModal();
}
});
// Currency search input
currencySearch.addEventListener('input', () => {
populateCurrencyList();
});
// Calculator buttons
calculatorButtons.forEach(button => {
button.addEventListener('click', () => {
// Add button press animation
button.classList.add('button-pressed');
setTimeout(() => button.classList.remove('button-pressed'), 100);
// Handle different button types
if (button.dataset.number) {
handleNumberInput(button.dataset.number);
} else if (button.dataset.operator) {
handleOperatorInput(button.dataset.operator);
} else if (button.dataset.action) {
const action = button.dataset.action;
switch(action) {
case 'equals':
handleEquals();
break;
case 'clear':
handleClear();
break;
case 'delete':
handleDelete();
break;
case 'decimal':
handleDecimal();
break;
case 'plusminus':
handlePlusMinus();
break;
case 'percent':
handlePercent();
break;
case 'copy':
handleCopy();
break;
case 'send':
handleSend();
break;
}
}
});
});
// Keyboard support
document.addEventListener('keydown', (e) => {
// Don't trigger keyboard shortcuts when typing in search
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
const key = e.key;
// Number keys
if (/[0-9]/.test(key)) {
handleNumberInput(key);
e.preventDefault();
}
// Operators
else if (key === '+') {
handleOperatorInput('+');
e.preventDefault();
} else if (key === '-') {
handleOperatorInput('−');
e.preventDefault();
} else if (key === '*') {
handleOperatorInput('×');
e.preventDefault();
} else if (key === '/') {
e.preventDefault();
handleOperatorInput('÷');
}
// Other keys
else if (key === 'Enter' || key === '=') {
handleEquals();
e.preventDefault();
} else if (key === 'Escape') {
handleClear();
e.preventDefault();
} else if (key === 'Backspace') {
handleDelete();
e.preventDefault();
} else if (key === '.') {
handleDecimal();
e.preventDefault();
} else if (key === '%') {
handlePercent();
e.preventDefault();
}
});
}
// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', initApp);