CurrencyFlow

A fast, accurate, and beautiful currency converter with real-time live exchange rates. Built with vanilla web technologies, CurrencyFlow provides instant conversions and tracks live market fluctuations with intuitive visual indicators.

Features

• Instant Currency Conversion (Persistent Cache): Converts between dozens of global currencies instantaneously by leveraging a cross-session localStorage caching layer that eliminates redundant network calls and guarantees 0ms load times on return visits.
• Contextual Inverse Rates: Automatically calculates and displays the inverse exchange rate (e.g., 1 EUR = $1.08 USD) beneath the main result, a standard found in premium financial tools.
• Live Exchange Rates: A dedicated dashboard that auto-updates every 10 seconds to show real-time rates against your chosen base currency.
• Visual Trend Indicators: Watch rates change in real-time with green (▲) and red (▼) flash animations as values rise and fall.
• Progressive Web App (PWA) & Offline Support: Installable on mobile devices. Employs a custom Service Worker with a Network-First caching strategy, allowing the app to seamlessly calculate conversions entirely offline using the last known rates.
• Intelligent Dropdowns: Dynamically translates standard 3-letter currency codes into rich UI elements featuring country flag emojis and full localized names (e.g., 🇺🇸 USD - US Dollar) using the native Intl.DisplayNames API and Unicode point math.
• Intelligent Formatting: Utilizes the browser's native Intl.NumberFormat API to guarantee correct, locale-aware currency symbols and formatting (e.g., €100.00 instead of 100 EUR).
• Dark Mode: Seamlessly switch between light and dark themes with a click. Auto-detects system preferences.
• Smart Auto-Convert: Employs a debounced input listener to automatically convert amounts as you type, providing immediate feedback without straining the API.
• Premium Micro-Interactions: Features satisfying, tactile animations including a spring-physics rotation on the swap button and a subtle scaling pulse to confirm when a debounced auto-conversion completes.
• State Persistence: Utilizes the browser's LocalStorage API to remember your previously selected currency pairs, active theme, and live-base currency across browser sessions.
• Quality of Life Utilities: Includes pro-user keyboard shortcuts (S to swap, A to focus amount, / to search live rates), one-click "Copy to Clipboard", and quick-amount tap chips (+10, +100, +1k) for rapid mobile inputs.
• Social Media Ready: Built with Open Graph metadata for rich, beautiful link previews when shared on messaging platforms.
• Responsive Design: A mobile-first, sleek UI that looks great on any device, complete with modern gradients, subtle shadows, and glassmorphism touches.
• Accessible & Resilient: Semantic HTML, ARIA attributes, keyboard navigation support, and <noscript> fallbacks for users without JavaScript.

Tech Stack

• Frontend: HTML5, CSS3 (CSS Variables, Flexbox), Vanilla JavaScript (ES6+, async/await, Service Workers, Intl API, LocalStorage).
• API: ExchangeRate-API for reliable, up-to-date currency data.

Getting Started

To run this project locally, simply download or clone the repository and open the index.html file in your preferred web browser. No build tools, node modules, or local servers are required!

# Clone the repository
git clone https://github.com/yourusername/currencyflow.git

Then, double-click index.html or serve it using a simple local server (like the Live Server extension for VS Code).

Acknowledgements

• Built with dedication
• Powered by ExchangeRate-API