A simple and interactive Currency Converter built using HTML, CSS, and JavaScript that lets users convert values between any two currencies in real-time. It fetches the latest exchange rates from the @fawazahmed0/currency-api and also displays corresponding country flags for each currency.
Features
- Real-time currency conversion using live exchange rates
- Automatically updates flags based on selected currencies
- Reverse currency button to swap “From” and “To” values
- Default conversion on page load (USD → INR)
- Responsive and clean UI design
Tech Stack
- HTML5 – Structure and layout
- CSS3 – Styling and responsive design
- JavaScript (ES6) – API integration and logic
- Font Awesome – For the swap icon
- FlagsAPI – For displaying country flags
- Fawaz Ahmed Currency API – For real-time currency data
Project Structure currency-converter/ │ ├── index.html # Main HTML structure ├── style.css # Styling and layout (user-defined) ├── codes.js # Country and currency mapping └── app.js # Core JavaScript logic and API integration
How It Works
- The codes.js file contains a countryList object that maps currency codes (USD, INR, EUR) to country codes (US, IN, FR).
- The dropdowns are populated dynamically using this list.
- When the user clicks Convert, the app:
- Fetches live data from https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{base}.json
- Retrieves the conversion rate for the selected currencies.
- Displays the converted amount.
- Clicking the swap icon reverses the currencies and refreshes the result.
- On page load, the converter runs automatically with default values (USD → INR).
Example API Response
-
Request: https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json
-
Response: { "date": "2025-10-09", "usd": { "eur": 0.91, "inr": 84.25, "jpy": 153.5 } }
References
- Fawaz Ahmed Currency API → https://github.com/fawazahmed0/currency-api
- FlagsAPI → https://flagsapi.com/
- Font Awesome → https://fontawesome.com/
- MDN Web Docs – Fetch API
Usage in Code:
const rate = data["usd"]["inr"];