Currency Converter

A fully functional real-time currency converter with a dark, minimal card UI. Users select a source and target currency from 45+ options, enter an amount, and the converted result updates live as they type — no button click required. A debounced input listener triggers API calls automatically, while a 10-minute client-side cache prevents redundant requests. A swap button instantly reverses the currency pair and re-converts. The app handles network errors, invalid inputs, and unsupported currencies gracefully using styled alert boxes and silent validation during live mode.

• Structuring a single-page UI with semantic HTML5 and ARIA accessibility attributes
• Styling a dark SaaS UI with CSS custom properties and solid color design tokens
• Fetching live data from a public REST API using the Fetch API and async/await
• Parsing and using JSON responses from an exchange rate API
• Dynamically populating select dropdowns from a JavaScript data array
• Implementing client-side response caching with timestamps to minimize API calls
• Building a debounce utility function to throttle live input events
• Validating user input silently during live mode vs. loudly on explicit submit
• Updating the DOM in real time based on user interactions without a framework
• Handling API errors and network failures with descriptive user-facing messages
• Formatting large and small numbers with toLocaleString and toFixed for readability
• Animating result appearance with CSS keyframes (fadeSlideIn)
• Building a swap interaction with rotate animation using CSS transitions
• Responsive card layout with CSS Grid and media queries for mobile devices
• Pre-fetching API data on page load to reduce perceived latency on first interaction