Currency Converter

Difficulty: Easy

In this challenge, you'll build a currency converter app that fetches exchange rates from an API and allows users to convert between two selected currencies. This exercise focuses on API integration, user interaction, and dynamic UI updates.

Requirements

Fetch Exchange Rates

• Fetch exchange rates from a mock API (see API documentation below).
• The API provides a base currency and an array of exchange rates relative to the base currency.

{
  "base": {
    "id": "USD",
    "rate": 1,
    "name": "US Dollar"
  },
  "rates": [
    {
      "id": "EUR",
      "rate": 0.85,
      "name": "Euro"
    },
    {
      "id": "GBP",
      "rate": 0.75,
      "name": "British Pound"
    },
    {
      "id": "JPY",
      "rate": 110.25,
      "name": "Japanese Yen"
    }
  ]
}

Currency Selection

• Users can select a base currency and a target currency from a dropdown or picker.
• Ensure that all available currencies from the API are displayed as options.

Conversion Input and Output

• Accept an input amount in the base currency.
• Display the converted amount dynamically as the user changes input or selects a new currency.

API Documentation

Path: https://breakpoint-ghost-io.github.io/ghost-web/currency-converter/rates.json

{
  "base": {
    "id": "USD",
    "rate": 1.0,
    "name": "US Dollar"
  },
  "rates": [
    {
      "id": "EUR",
      "rate": 0.85,
      "name": "Euro"
    }
  ]
}

Base Currency Object

Rates Array (List of Exchange Rates)